Customizing the Carousel

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>

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>

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>

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>