Defining a Custom Path in the XamCarousel

Introduction

The XamCarousel line of controls brings the sizzle of WPF to the client developer. It makes it easy to create navigation views or data-bound contact rolodexes. This tutorial will demonstrate how to define a custom path upon which the carousel items will arrange themselves.

Creating a Custom Path

First step, is to define your custom path. This can be achieved by using the Pen Tool in Blend and having a little fun drawing. Essentially, what you are working on is getting the data from the path property and re-use it in your Carousel.

In XAML that path looks like this:

<Path x:Name="myPath"  Margin="0,0,0,0" HorizontalAlignment="Left" 
      VerticalAlignment="Top" Height="Auto" Width="Auto" Stretch="Fill" 
      Data="M8,210.04 C83.5,85.541096 177.5,84.54052 236.5,204.53999 295.5,
      324.54002 398.5,251.53956 409.5,210.53999 466.5,84.541153 561.5,88.54112 
      609.5,212.54011" 
      Stroke="#FF0000" StrokeThickness="1" />

Assigning the Custom Path to the Carousel

After the path is drawn, initialize one of the XamCarousel controls. In the case of this sample, we are going to add a custom path to our XamCarouselPanel which will host a series of images. The XAML code looks like this:

<igWindows:XamCarouselPanel Margin="0,0,0,0">
    <igWindows:XamCarouselPanel.ViewSettings>
          <igWindows:CarouselViewSettings IsListContinuous="True"/>
   </igWindows:XamCarouselPanel.ViewSettings>
   <Image Source="Images/Autumn Leaves.jpg" Width="130" />
   <Image Source="Images/Creek.jpg" Width="130" />
    …
</igWindows:XamCarouselPanel>

Next, we need to make a quick resource that will house our path definition. We can simply copy our above path into the <Grid.Resources> <Path x:key=”myPath”… /> </Grid.Resources> and assign a x:key name to the Path.

<igWindows:CarouselViewSettings IsListContinuous="True" 
           ItemPath="{StaticResource myPath}" ItemsPerPage=”7”/>

And that’s it, after that we have officially styled the xamCarousel to follow our custom path!

Recommended