You can customize the CarouselPanel in the example in the Using C1CarouselPanel topic by setting properties in either the <c1:C1CarouselPanel/> tag in the ItemsPanelTemplate or in the <ItemsControl> tag. Setting properties in the <ItemsControl> tag is possible because all of the properties introduced in carousel are attached dependency properties, providing the ability to change carousel's property at run time.
In the C1CarouselPanel Tag
So, for example, to limit the number of visible elements in the CarouselPanel, you can set the PageSize property in the <c1:C1CarouselPanel> tag:
WPF XAML |
Copy Code
|
---|---|
<Window.Resources> <!-- An ItemsPanelTemplate template defining the C1CarouselPanel. --> <ItemsPanelTemplate x:Key="carouselPanel"> <!-- Limit the number of visible elements to 3 with the PageSize property. --> <c1:C1CarouselPanel PageSize="3" /> </ItemsPanelTemplate> </Window.Resources> |
Silverlight XAML |
Copy Code
|
---|---|
<UserControl.Resources> <!-- An ItemsPanelTemplate template defining the C1CarouselPanel. --> <ItemsPanelTemplate x:Key="carouselPanel"> <!-- Limit the number of visible elements to 3 with the PageSize property. --> <c1:C1CarouselPanel PageSize="3" /> </ItemsPanelTemplate> </UserControl.Resources> |
In the ItemsControl Tag
To limit the number of visible elements in the CarouselPanel, you can also set the PageSize property in the in the <ItemsControl> tag:
XAML |
Copy Code
|
---|---|
<!-- An ItemsControl with ItemsPanel set to the ItemsPanelTemplate defining a C1CarouselPanel. The PageSize property limits the number of visible elements to 3. --> <ItemsControl ItemsPanel="{StaticResource carouselPanel}" c1:C1CarouselPanel.PageSize="3"> <!-- 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> |