ComponentOne Carousel for WPF and Silverlight
C1CarouselPanel Quick Start / Step 2 of 3: Adding Content to the Application
In This Topic
    Step 2 of 3: Adding Content to the Application
    In This Topic

    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:

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

    2. 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>
      
    3. Add a DataTemplate within the Resources tag:

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

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

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

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

    6. Switch to Code view by right-clicking the page and selecting View Code.
    7. 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;
      
    8. 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();                      
      
      }
      
    9. 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.

    See Also