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:

WPF XAML	Copy Code
<Window.Resources> </Window.Resources>

Silverlight XAML	Copy Code
<UserControl.Resources> </UserControl.Resources>

You will add templates within this tag.

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

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

XAML

Copy Code

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

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

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

XAML	Copy Code
<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>

XAML

Copy Code

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

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

XAML

Copy Code

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

WPF	Copy Code
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;

Silverlight	Copy Code
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:

Visual Basic	Copy Code
Public Sub New() InitializeComponent() InitData() End Sub

C#	Copy Code
public MainPage() { InitializeComponent(); InitData(); }

Add the following code below the main class:

Visual Basic	Copy Code
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

C#	Copy Code
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.