Working with C1CarouselPanel > Using C1CarouselPanel |
To use the CarouselPanel for creating a carousel-like interactive effect, you can set it as an ItemsControl control's panel and assign your visual elements collection to the ItemsControl.Items property. So, for example, in the XAML below an ItemsPanelTemplate template is defined in the Window's resources and includes the CarouselPanel panel. An ItemsControl containing arbitrary elements later points to the ItemsPanelTemplate template:
WPF XAML |
Copy Code
|
---|---|
<Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <!-- An ItemsPanelTemplate template defining the C1CarouselPanel. --> <ItemsPanelTemplate x:Key="carouselPanel"> <c1:C1CarouselPanel /> </ItemsPanelTemplate> </Window.Resources> <Grid> <!-- An ItemsControl with ItemsPanel set to the ItemsPanelTemplate defining a C1CarouselPanel. --> <ItemsControl ItemsPanel="{StaticResource carouselPanel}"> <!-- Arbitrary controls or images within the ItemsControl. --> <Image Width="51" Height="51" Source="image1.png"/> <Image Width="51" Height="51" Source="image2.png"/> <Image Width="51" Height="51" Source="image3.png"/> <Button Height="23" Name="Button1" Width="75">Button</Button> </ItemsControl> </Grid> </Window> |
Silverlight XAML |
Copy Code
|
---|---|
<UserControl x:Class="C1Carousel.MainPage" xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml xmlns:d=http://schemas.microsoft.com/expression/blend/2008 xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006 xmlns:c1=http://schemas.componentone.com/winfx/2006/xaml mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400"> <UserControl.Resources> <!-- An ItemsPanelTemplate template defining the C1CarouselPanel. --> <ItemsPanelTemplate x:Key="carouselPanel"> <c1:C1CarouselPanel /> </ItemsPanelTemplate> </UserControl.Resources> <Grid> <!-- An ItemsControl with ItemsPanel set to the ItemsPanelTemplate defining a C1CarouselPanel. --> <ItemsControl ItemsPanel="{StaticResource carouselPanel}"> <!-- Arbitrary controls or images within the ItemsControl. --> <Image Width="51" Height="51" Source="image1.png"/> <Image Width="51" Height="51" Source="image2.png"/> <Image Width="51" Height="51" Source="image3.png"/> <Button Height="23" Name="Button1" Width="75">Button</Button> </ItemsControl> </Grid> </UserControl> |