# Using C1CarouselPanel

## Content



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

## See Also

[Customizing the Carousel](/componentone/docs/wpf/online-carousel/Working_with_C1CarouselPanel/Customizing_the_Carousel)