The WPF CarouselPanel is a virtualizing panel control that arranges child elements along an arbitrary 3D path. We can use C1CarouselPanel with any items control to turn a flat list of items into a virtualizing carousel with true 3D perspectives and scrolling animation. This blog discusses method to create a Carousel for Winforms application through porting the currently available C1CarouselPanel [WPF] into Winforms application. In order to use the WPF Carousel we need to create a Winforms application and add a WPF User Control which uses CarouselPanel. This User control can then be hosted in an ElementHost control on the Windows form.

Create a new Winforms application

Create a new Windows application. Also add reference to “WindowsFormsIntegration” class library in the application. The System.Windows.Forms.Integration namespace contains classes that enable interoperation between the Windows Forms and WPF technologies. When we use System.Windows.Forms.Integration classes, we can host Windows Forms controls on WPF pages, and WPF elements in Windows Forms-based applications. For more details on the class library please refer to the following MSDN link: http://msdn.microsoft.com/en-us/library/system.windows.forms.integration.aspx

Adding C1CarouselPanel in User Control

Step 1: Add a WPF User control 'CarousalUC.xaml' to the application.

1. In the Solution Explorer, right-click the project name and choose Add Reference. In the Add Reference dialog box, locate and select the C1.WPF and C1.WPF.Carousel assemblies and click OK to add references to the project. 2. Open the XAML view of the CarousalUC.xaml file and add the XAML namespace to the UserControl tag with the following markup:

xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml".

The namespaces will now appear similar to the following:

<UserControl x:Class="Sample_Rotator.CarousalUC"  
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
mc:Ignorable="d"  
xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" >

This is a unified namespace that will enable us to work with most ComponentOne WPF or Silverlight controls without adding multiple namespaces. 3. Add new folder 'Resources' and another folder 'covers' to the Resources folder in the solution explorer. 4. Add the images we want to display in the C1CarouselPanel. We will be using the images given with the WPF samples located in the Documents or My Documents folder in ComponentOne Samples\Studio for WPF\C1WPFControlExplorer\CarouselSamples\Resources\covers. Several images will be added to the application. 5. Once the images are added, select all of them and set “Copy to Output Directory” property to “Copy Always”.

Step 2 : Adding Content to the User Control

1. In the XAML view add a Resources tag just under the Window tag and above the Grid tag with the following markup:

<UserControl.Resources>  
</UserControl.Resources>

We will add templates within this tag. 2. Add an ItemsPanelTemplate within the Resources tag to define the C1CarouselPanel:

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

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

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

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

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

8. Add code to the main class so it appears like the following: Visual Basic

Public Sub New()  
   InitializeComponent()  
   InitData()  
End Sub

C#

public CarousalUC()  
{  
   InitializeComponent();  
   InitData();  
}

9. Add the following code below the main class: Visual Basic

Private Sub InitData()  
   For i As Integer = 101 To 125  
      carouselListBox.Items.Add(New BitmapImage(New Uri("Resources/covers/cover" & i & ".jpg", UriKind.Relative)))  
   Next  
End Sub

C#

private void InitData()  
{  
   for (int i = 101; i <= 125; ++i)  
   {  
      carouselListBox.Items.Add(new BitmapImage(new Uri("Resources/covers/cover" + i + ".jpg", UriKind.Relative)));  
   }  
}

This loads the images we added into the ListBox control. Note that if we added different images to our project, we may have to adapt the above code. In the above steps we added a ListBox and create a C1CarouselPanel template to apply to the ListBox control. Now all that's left is to add the ElementHost in the Windows Form.

Insert WPF User Control in Windows Form

WPF User Control can be inserted into Windows Form using ElementHost that is present in the Toolbox underneath “WPF Interoperability”. So once we drag an ElementHost onto our form, we need to click on the little arrow on the upper right of the ElementHost and open the combobox for “Select Hosted Content”. After this we need to choose the WPF user control in order to host in the ElementHost. Once this is done we can simply run the application and view images in the Carousel control in our Winforms application. Download Sample