ComponentOne Carousel for WPF and Silverlight
CarouselPanel Task Based Help / Adding and Moving Content in C1Carousel / Moving Content Along a Parabolic Path
In This Topic
    Moving Content Along a Parabolic Path
    In This Topic

    Follow these steps:

    1. From the Visual Studio File menu select New and choose Project.
    2. 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.
    3. 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
    4. Right-click on the yourprojectname .Web project and select Add | Folder from the list. Name the folder Resources.
    5. Right-click on the Resources folder and select Add | Folder from the list. Name the new sub-folder covers.
    6. 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.
    7. 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">
      

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

    8. 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.

    9. 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>
      

    10. Insert a <DataTemplate> to define the image source:

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

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

      XAML
      Copy Code
      <Style x:Key="parabolaPanelStyle" TargetType="ListBox">
      <Setter Property="c1:C1CarouselPanel.PathGeometry" Value="F1 M 164.564,73.0518C 201.647,164.183 238.73,255.315 284.817,323.23C 330.903,391.146 385.993,435.845 445.921,431.137C 505.849,426.43 570.614,372.315 614.53,304.361C 658.446,236.407 681.512,154.614 704.578,72.8207"/>
      <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>
      

    12. 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 parabolaPanelStyle}"/>
      
    13. Right-click the MainPage.xaml page and select View Code from the list.
    14. 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;
      

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

      Visual Basic
      Copy Code
      InitData()
      

      C#
      Copy Code
      InitData();
      

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

    17. Press F5 to run your application. The carousel should resemble the following image:

    See Also