Step 2 of 3: Adding Content to the Application

In the previous step you created a new Silverlight application and added image resources to the application. In this step you'll add a ListBox and create a C1CarouselPanel template to apply to the ListBox control. Complete the following steps:

In the XAML view, add a Resources tag just under the UserControl or Window tag and above the Grid tag with the following markup:
```
<Window.Resources>
</Window.Resources>
```
```
<UserControl.Resources>  
</UserControl.Resources>
```
You will add templates within this tag.

Add an ItemsPanelTemplate within the Resources tag to define the C1CarouselPanel:

<ItemsPanelTemplate x:Key="carouselPanelTemplate">
<c1:C1CarouselPanel Padding="0, 10, 50, 50" VerticalPathAlignment="Center" HorizontalItemAnchorOnPath="Center" VerticalItemAnchorOnPath="Center"/>
</ItemsPanelTemplate>

Add a DataTemplate within the Resources tag:

<DataTemplate x:Key="carouselItemTemplate">         
    <Image Source="{Binding}" Stretch="None" />          
</DataTemplate>

Add a Style within the Resources tag to define the C1CarouselPanel's path:

<Style x:Key="circlePanelStyle" TargetType="ListBox">
<Setter Property="c1:C1CarouselPanel.PathGeometry" Value="F1 M 466.829,27.2642C 635.339,35.6577 762.667,98.3819 762.667,173C 762.667,254.002 613.428,319.667 429.333,319.667C 245.238,319.667 96,254.002 96,173C 96,98.0584 224.402,35.1712 393.751,27.1714"/>
<Setter Property="c1:C1CarouselPanel.HorizontalPathAlignment" Value="Left"/>
<Setter Property="c1:C1CarouselPanel.VerticalPathAlignment" Value="Top"/>
<Setter Property="c1:C1CarouselPanel.PerspectiveAngle" Value="55"/>
<Setter Property="c1:C1CarouselPanel.PerspectiveFactor" Value="0.4"/>
</Style>

Create a ListBox control by adding the following ListBox tag within the Grid tags:

<ListBox Background="Transparent" Name="carouselListBox" Grid.Row="1" ItemsPanel="{StaticResource carouselPanelTemplate}" ItemTemplate="{StaticResource carouselItemTemplate}" Style="{StaticResource circlePanelStyle}">           
</ListBox>

Note that this ListBox uses the templates you just added. The ItemsPanel property assigns the C1CarouselPanel to the ListBox via the ItemsPanelTemplate.

Switch to Code view by right-clicking the page and selecting View Code.

Add the following import statements at the top of the page of the Code Editor:

Visual Basic:
Imports System.Windows.Media.Imaging;
Imports C1.WPF;
Imports C1.WPF.Carousel;
C#:
using System.Windows.Media.Imaging;
using C1.WPF;
using C1.WPF.Carousel;

Visual Basic:
Imports System.Windows.Media.Imaging
Imports C1.Silverlight
Imports C1.Silverlight.Carousel
C#:
using System.Windows.Media.Imaging;
using C1.Silverlight;
using C1.Silverlight.Carousel;

Add code to the main class so it appears like the following:

Public Sub New()                      
    InitializeComponent()                  
    InitData()                      
End Sub

public MainPage()
{                    
    InitializeComponent();                   
    InitData();                      
}

Add the following code below the main class:

Private Sub InitData()                   
    For i As Integer = 101 To 140                  
        carouselListBox.Items.Add(New BitmapImage(Extensions.GetAbsoluteUri("Resources/covers/cover" & i & ".jpg")))                 
    Next                       
End Sub

private void InitData()                      
{                    
    for (int i = 101; i <= 140; i++)                 
       {                 
            carouselListBox.Items.Add(new BitmapImage(Extensions.GetAbsoluteUri("Resources/covers/cover" + i + ".jpg")));                 
        }                     
}

This loads the images you added into the ListBox control. Note that if you added different images to your project, you may have to adapt the above code.

In this step you added a ListBox and create a C1CarouselPanel template to apply to the ListBox control. Now all that's left is to run the application.

Step 2 of 3: Adding Content to the Application

See Also