Moving Content Along a Spiral Path

Follow these steps:

From the Visual Studio File menu select New and choose Project.
In the New Project dialog box choose a language in the left-side menu, choose .NET Framework 4 in the Framework drop-down list, and enter a name for the project.
In the Solution Explorer, right-click the project name and choose Add Reference. In the Add Reference dialog box, locate and select the following assemblies and click OK to add references to your project:
- Silverlight: C1.Silverlight.dll, C1.Silverlight.Carousel.dll
- WPF: C1.WPF.dll, C1.WPF.Carousel
Right-click on the yourprojectname .Web project and select Add | Folder from the list. Name the folder Resources.
Right-click on the Resources folder and select Add | Folder from the list. Name the new sub-folder covers.
Right-click on the covers folder and select Add | Existing Item from the list. For this Help, locate the covers that are included with the C1Carousel_Demo sample application. Select all the files by pressing Shift and then clicking the first and last covers. Click Add to add the files to your folder.

Add the XAML namespace to the UserControl or Window tag with the following markup: xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml".

The namespaces will now appear similar to the following:

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

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

Silverlight XAML	Copy Code
<UserControl x:Class="QuickStart.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">

Silverlight XAML

Copy Code

<UserControl x:Class="QuickStart.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">

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

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>

Insert a <DataTemplate> to define the image source:

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

Add the following <Style> under the <DataTemplate> to set the PathGeometry property for the CarouselPanel control:

XAML	Copy Code
<Style x:Key="spiralPanelStyle" TargetType="ListBox"> <Setter Property="c1:C1CarouselPanel.PathGeometry" Value=" F1 M 426.39877,214.56664 C 477.32999,252.5027 425.16229,295.34012 402.57449,303.93842 C 385.32977,310.50281 302.99234,311.50055 289.99231,310.50055 C 277.30948,309.52493 190.99216,292.50021 178.99214,286.50021 C 171.53923,282.77377 143.14252,246.34085 140.99213,237.50035 C 131.99211,200.50027 144.99214,178.50027 191.99223,149.5002 C 200.50449,144.24796 259.86719,123.92526 276.99231,120.50028 C 291.99237,117.50031 363.99265,118.50018 382.01099,122.78677 C 402.75034,127.7207 436.07599,133.93291 457.07605,144.93292 C 474.27582,153.94232 489.89432,159.93607 502.89435,169.93608 C 513.04492,177.74423 542.43744,201.83525 552.03833,213.18535 C 564.9931,228.50035 568.22015,248.1823 573.71283,266.7619 C 576.95355,277.72397 559.99274,316.50018 546.99274,333.50021 C 533.24768,351.47452 473.77701,392.49255 450.77695,402.49255 C 424.47693,413.92734 387.50757,418.44592 358.99243,421.50061 C 330.99237,424.50009 300.22705,418.91339 272.99228,416.50018 C 247.2047,414.21521 219.99205,409.50064 193.94289,403.37714 C 177.01965,399.39893 137.99185,389.50015 123.99122,379.50012 C 103.3692,364.77072 64.991714,336.50052 56.991692,318.50049 C 46.535854,294.97488 40.107754,267.91367 35.991642,242.50037 C 32.747829,222.47273 49.97628,161.97603 61.236015,142.52779 C 72.236038,123.52813 102.94307,100.53529 122.99121,85.49958 C 146.99126,67.500015 189.99133,51.499714 217.99138,42.499702 C 243.25951,34.377808 297.45969,22.180216 323.99234,21.49992 C 401.99304,19.499987 423.3172,21.685627 497.32446,56.185596 C 532.84088,72.742287 591.66083,116.8151 614.9928,144.50041"/> <Setter Property="c1:C1CarouselPanel.HorizontalPathAlignment" Value="Left"/> <Setter Property="c1:C1CarouselPanel.VerticalPathAlignment" Value="Top"/> <Setter Property="c1:C1CarouselPanel.PerspectiveAngle" Value="90"/> <Setter Property="c1:C1CarouselPanel.PerspectiveFactor" Value="-0.317"/> </Style>

XAML

Copy Code

<Style x:Key="spiralPanelStyle" TargetType="ListBox">
<Setter Property="c1:C1CarouselPanel.PathGeometry" Value=" F1 M 426.39877,214.56664
C 477.32999,252.5027 425.16229,295.34012 402.57449,303.93842
C 385.32977,310.50281 302.99234,311.50055 289.99231,310.50055
C 277.30948,309.52493 190.99216,292.50021 178.99214,286.50021
C 171.53923,282.77377 143.14252,246.34085 140.99213,237.50035
C 131.99211,200.50027 144.99214,178.50027 191.99223,149.5002
C 200.50449,144.24796 259.86719,123.92526 276.99231,120.50028
C 291.99237,117.50031 363.99265,118.50018 382.01099,122.78677
C 402.75034,127.7207 436.07599,133.93291 457.07605,144.93292
C 474.27582,153.94232 489.89432,159.93607 502.89435,169.93608
C 513.04492,177.74423 542.43744,201.83525 552.03833,213.18535
C 564.9931,228.50035 568.22015,248.1823 573.71283,266.7619
C 576.95355,277.72397 559.99274,316.50018 546.99274,333.50021
C 533.24768,351.47452 473.77701,392.49255 450.77695,402.49255
C 424.47693,413.92734 387.50757,418.44592 358.99243,421.50061
C 330.99237,424.50009 300.22705,418.91339 272.99228,416.50018
C 247.2047,414.21521 219.99205,409.50064 193.94289,403.37714
C 177.01965,399.39893 137.99185,389.50015 123.99122,379.50012
C 103.3692,364.77072 64.991714,336.50052 56.991692,318.50049
C 46.535854,294.97488 40.107754,267.91367 35.991642,242.50037
C 32.747829,222.47273 49.97628,161.97603 61.236015,142.52779
C 72.236038,123.52813 102.94307,100.53529 122.99121,85.49958
C 146.99126,67.500015 189.99133,51.499714 217.99138,42.499702
C 243.25951,34.377808 297.45969,22.180216 323.99234,21.49992
C 401.99304,19.499987 423.3172,21.685627 497.32446,56.185596
C 532.84088,72.742287 591.66083,116.8151 614.9928,144.50041"/>
<Setter Property="c1:C1CarouselPanel.HorizontalPathAlignment" Value="Left"/>
<Setter Property="c1:C1CarouselPanel.VerticalPathAlignment" Value="Top"/>
<Setter Property="c1:C1CarouselPanel.PerspectiveAngle" Value="90"/>
<Setter Property="c1:C1CarouselPanel.PerspectiveFactor" Value="-0.317"/>
</Style>

Add the following ListBox control within the <Grid>:

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

XAML

Copy Code

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

Right-click the MainPage.xaml page and select View Code from the list.

Add the following namespaces to the top of the page:

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;

Insert the following method directly below the InitializeComponent() method:

Visual Basic	Copy Code
InitData()

C#	Copy Code
InitData();

Call the following method to populate the CarouselPanel with data:

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"))); }

Press F5 to run your application. The items in the CarouselPanel control should move through a spiral.