ComponentOne Carousel for WPF and Silverlight
Customizing the Carousel
Working with C1CarouselPanel > 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>

 

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>
 
 
See Also