Using C1CarouselPanel | ComponentOne Carousel for WPF and Silverlight

Using C1CarouselPanel

In This Topic

To use the CarouselPanel for creating a carousel-like interactive effect, you can set it as an ItemsControl control's panel and assign your visual elements collection to the ItemsControl.Items property. So, for example, in the XAML below an ItemsPanelTemplate template is defined in the Window's resources and includes the CarouselPanel panel. An ItemsControl containing arbitrary elements later points to the ItemsPanelTemplate template:

WPF XAML	Copy Code
<Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <!-- An ItemsPanelTemplate template defining the C1CarouselPanel. --> <ItemsPanelTemplate x:Key="carouselPanel"> <c1:C1CarouselPanel /> </ItemsPanelTemplate> </Window.Resources> <Grid> <!-- An ItemsControl with ItemsPanel set to the ItemsPanelTemplate defining a C1CarouselPanel. --> <ItemsControl ItemsPanel="{StaticResource carouselPanel}"> <!-- 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> </Grid> </Window>

WPF XAML

Copy Code

<Window x:Class="MainWindow"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"

    Title="MainWindow" Height="350" Width="525">

    <Window.Resources>

 

        <!-- An ItemsPanelTemplate template defining the C1CarouselPanel. -->

        <ItemsPanelTemplate x:Key="carouselPanel">

            <c1:C1CarouselPanel />

        </ItemsPanelTemplate>

    </Window.Resources>

    <Grid> 

<!-- An ItemsControl with ItemsPanel set to the ItemsPanelTemplate defining a C1CarouselPanel. -->

<ItemsControl ItemsPanel="{StaticResource carouselPanel}">

<!-- 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>

    </Grid>

</Window>

Silverlight XAML	Copy Code
<UserControl x:Class="C1Carousel.MainPage" xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml xmlns:d=http://schemas.microsoft.com/expression/blend/2008 xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006 xmlns:c1=http://schemas.componentone.com/winfx/2006/xaml mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400"> <UserControl.Resources> <!-- An ItemsPanelTemplate template defining the C1CarouselPanel. --> <ItemsPanelTemplate x:Key="carouselPanel"> <c1:C1CarouselPanel /> </ItemsPanelTemplate> </UserControl.Resources> <Grid> <!-- An ItemsControl with ItemsPanel set to the ItemsPanelTemplate defining a C1CarouselPanel. --> <ItemsControl ItemsPanel="{StaticResource carouselPanel}"> <!-- 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> </Grid> </UserControl>

Silverlight XAML

Copy Code

<UserControl x:Class="C1Carousel.MainPage"

    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

    xmlns:d=http://schemas.microsoft.com/expression/blend/2008

    xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006

    xmlns:c1=http://schemas.componentone.com/winfx/2006/xaml

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.Resources>

        <!-- An ItemsPanelTemplate template defining the C1CarouselPanel. -->

        <ItemsPanelTemplate x:Key="carouselPanel">

            <c1:C1CarouselPanel />

        </ItemsPanelTemplate>

    </UserControl.Resources>

    

    <Grid>

         <!-- An ItemsControl with ItemsPanel set to the ItemsPanelTemplate defining a C1CarouselPanel. -->

         <ItemsControl ItemsPanel="{StaticResource carouselPanel}">

            <!-- 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>

    </Grid>


</UserControl>