You can customize the C1CarouselPanel in the example in the Using the C1CarouselPanel Panel topic by setting properties in either the <c1grid: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 C1CarouselPanel, you can set the PageSize property in the <c1grid:C1CarouselPanel> tag:
<Window.Resources>
<!-- An ItemsPanelTemplate template defining the C1CarouselPanel. -->
<ItemsPanelTemplate x:Key="carouselPanel">
<!-- Limit the number of visible elements to 3 with the PageSize property. -->
<c1grid:C1CarouselPanel PageSize="3" />
</ItemsPanelTemplate>
</Window.Resources>
In the ItemsControl Tag
To limit the number of visible elements in the C1CarouselPanel, you can also set the PageSize property in the in the <ItemsControl> tag:
<!-- 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}" c1grid: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>
|
