ComponentOne Carousel for WPF and Silverlight
Working with C1CarouselPanel / Customizing the Carousel
In This Topic
    Customizing the Carousel
    In This Topic

    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