Getting Started with WPF Carousel

18 Nov 201824 minutes to read

This section explains how to create a WPF Carousel and describes its structure. The WPF Carousel is implemented through the Carousel class.

Structure of WPF Carousel

Assembly deployment

Refer to the Control Dependencies section to get the list of assemblies or NuGet packages that need to be added as references to use the control in an application.

Refer to this documentation for more information about installing NuGet packages in a WPF application.

Adding WPF Carousel via designer

The Carousel can be added to an application by dragging it from the toolbox to a designer view. The following dependent assemblies are added automatically:
- Syncfusion.Shared.WPF

WPF Carousel control added by designer

Set the properties for the Carousel in design mode using the SmartTag feature.

Adding WPF Carousel via XAML

To add the Carousel manually in XAML, follow these steps:

Create a new WPF project in Visual Studio.
Add the following required assembly references to the project:
- Syncfusion.Shared.WPF

Import the Syncfusion^® WPF schema http://schemas.syncfusion.com/wpf, and declare the WPF Carousel on the XAML page.

XAML
<Window x:Class="Carousel_sample.MainWindow"
        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:local="clr-namespace:Carousel_sample"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
   
    <Grid Name="grid">
        <syncfusion:Carousel Name="carousel"
                             Height="200"
                             Width="200"/>
    </Grid>
</Window>

Adding WPF Carousel via C#

To add the Carousel manually in C#, follow these steps:

Create a new WPF application via Visual Studio.
Add the following required assembly references to the project:
- Syncfusion.Shared.WPF
Include the required namespace.
- C#
using Syncfusion.Windows.Shared;

Create an instance of Carousel, and add it to the window.

C#
// Creating an instance of the Carousel
Carousel carousel = new Carousel();
   
// Setting height and width to Carousel
carousel.Height = 200;
carousel.Width = 260;

WPF Carousel control added by code-behind

Populating items using CarouselItem

You can add the WPF Carousel items inside the control by using CarouselItem objects.

XAML
C#
<syncfusion:Carousel x:Name="carousel" 
                     Height="700" Width="500">
    <syncfusion:CarouselItem>
        <syncfusion:CarouselItem.Content>
            <Viewbox Height="100" Width="100">
                <Image Source="Images/Buchanan.png"/>
            </Viewbox>
        </syncfusion:CarouselItem.Content>
    </syncfusion:CarouselItem>
    <syncfusion:CarouselItem>
        <syncfusion:CarouselItem.Content>
            <Viewbox Height="100" Width="100">
                <Image Source="Images/Callahan.png"/>
            </Viewbox>
        </syncfusion:CarouselItem.Content>
    </syncfusion:CarouselItem>
    <syncfusion:CarouselItem>
        <syncfusion:CarouselItem.Content>
            <Viewbox Height="100" Width="100">
                <Image Source="Images/Davolio-1.png"/>
            </Viewbox>
        </syncfusion:CarouselItem.Content>
    </syncfusion:CarouselItem>
    <syncfusion:CarouselItem>
        <syncfusion:CarouselItem.Content>
            <Viewbox Height="100" Width="100">
                <Image Source="Images/Callahan.png"/>
            </Viewbox>
        </syncfusion:CarouselItem.Content>
    </syncfusion:CarouselItem>
    <syncfusion:CarouselItem>
        <syncfusion:CarouselItem.Content>
            <Viewbox Height="100" Width="100">
                <Image Source="Images/dodsworth.png"/>
            </Viewbox>
        </syncfusion:CarouselItem.Content>
    </syncfusion:CarouselItem>
    <syncfusion:CarouselItem>
        <syncfusion:CarouselItem.Content>
            <Viewbox Height="100" Width="100">
                <Image Source="Images/Fuller.png"/>
            </Viewbox>
        </syncfusion:CarouselItem.Content>
    </syncfusion:CarouselItem>
    <syncfusion:CarouselItem>
        <syncfusion:CarouselItem.Content>
            <Viewbox Height="100" Width="100">
                <Image Source="Images/King.png"/>
            </Viewbox>
        </syncfusion:CarouselItem.Content>
    </syncfusion:CarouselItem>
    <syncfusion:CarouselItem>
        <syncfusion:CarouselItem.Content>
            <Viewbox Height="100" Width="100">
                <Image Source="Images/Leverling.png"/>
            </Viewbox>
        </syncfusion:CarouselItem.Content>
    </syncfusion:CarouselItem>
</syncfusion:Carousel>
Carousel carousel = new Carousel()
{ 
	Width=700, 
	Height = 500
};

Image image = new Image();
Image image1 = new Image();
Image image2 = new Image();
Image image3 = new Image();
Image image4 = new Image();
Image image5 = new Image();
Image image6 = new Image();
Image image7 = new Image();

BitmapImage bitimg1 = new BitmapImage(new Uri("/Sample;component/Images/1.png", UriKind.RelativeOrAbsolute));
BitmapImage bitimg2 = new BitmapImage(new Uri("/Sample;component/Images/2.png", UriKind.RelativeOrAbsolute));
BitmapImage bitimg3 = new BitmapImage(new Uri("/Sample;component/Images/3.png", UriKind.RelativeOrAbsolute));
BitmapImage bitimg4 = new BitmapImage(new Uri("/Sample;component/Images/4.png", UriKind.RelativeOrAbsolute));
BitmapImage bitimg5 = new BitmapImage(new Uri("/Sample;component/Images/5.png", UriKind.RelativeOrAbsolute));
BitmapImage bitimg6 = new BitmapImage(new Uri("/Sample;component/Images/6.png", UriKind.RelativeOrAbsolute));
BitmapImage bitimg7 = new BitmapImage(new Uri("/Sample;component/Images/7.png", UriKind.RelativeOrAbsolute));
BitmapImage bitimg8 = new BitmapImage(new Uri("/Sample;component/Images/8.png", UriKind.RelativeOrAbsolute));

image.Source = bitimg1 as ImageSource;
image1.Source = bitimg2 as ImageSource;
image2.Source = bitimg3 as ImageSource;
image3.Source = bitimg4 as ImageSource;
image4.Source = bitimg5 as ImageSource;
image5.Source = bitimg6 as ImageSource;
image6.Source = bitimg7 as ImageSource;
image7.Source = bitimg8 as ImageSource;
          
carousel.Items.Add(new CarouselItem() { Content = new Viewbox(){ Child = image }});
carousel.Items.Add(new CarouselItem() { Content = new Viewbox(){ Child = image1 }});
carousel.Items.Add(new CarouselItem() { Content = new Viewbox(){ Child = image2 }});
carousel.Items.Add(new CarouselItem() { Content = new Viewbox(){ Child = image3 }});
carousel.Items.Add(new CarouselItem() { Content = new Viewbox(){ Child = image4 }});
carousel.Items.Add(new CarouselItem() { Content = new Viewbox(){ Child = image5 }});
carousel.Items.Add(new CarouselItem() { Content = new Viewbox(){ Child = image6 }});
carousel.Items.Add(new CarouselItem() { Content = new Viewbox(){ Child = image7 }});

Carousel items are populated to the WPF Carousel control

Populating items using collection binding

You can populate items in the WPF Carousel control by setting the collection value to the ItemsSource property.

C#
//Model.cs
public class CarouselModel {
	public string Header { get; set; }
}

//ViewModel.cs
public class ViewModel {
	private ObservableCollection<CarouselModel> collection;
	public ObservableCollection<CarouselModel> HeaderCollection
	{
		get {
			return collection;
		}
		set {
			collection = value;
		}
	}
	public ViewModel() {
		HeaderCollection = new ObservableCollection<CarouselModel>();
		HeaderCollection.Add(new CarouselModel() { Header = "Buchanan" });
		HeaderCollection.Add(new CarouselModel() { Header = "Callahan" });
		HeaderCollection.Add(new CarouselModel() { Header = "Davolio" });
		HeaderCollection.Add(new CarouselModel() { Header = "Dodsworth" });
		HeaderCollection.Add(new CarouselModel() { Header = "Fuller" });
		HeaderCollection.Add(new CarouselModel() { Header = "King" });
		HeaderCollection.Add(new CarouselModel() { Header = "Leverling" });
		HeaderCollection.Add(new CarouselModel() { Header = "Suyama" });
	}
}

XAML
<Window.DataContext>
    <local:ViewModel/>
</Window.DataContext>

<Grid>
    <syncfusion:Carousel Name="Carousel"
                         ItemsSource="{Binding HeaderCollection}">
        <syncfusion:Carousel.ItemTemplate>
            <DataTemplate>
                <Border Height="50" 
                        Width="100" 
                        BorderBrush="Purple" 
                        BorderThickness="5"
                        Background="LightBlue">
                    <TextBlock HorizontalAlignment="Center" 
                               VerticalAlignment="Center" 
                               Text="{Binding Header}"/>
                </Border>
            </DataTemplate>
        </syncfusion:Carousel.ItemTemplate>
    </syncfusion:Carousel>
</Grid>

Carousel items populated by using the collection binding

Select carousel item

You can select a carousel item by clicking it. You can get the selected item and its value by using the SelectedItem and SelectedValue properties. You can also get the selected item index by using the SelectedIndex property. You can select only one item at a time.

Select carousel item programmatically using property

You can select a particular carousel item programmatically by using the CarouselItem.IsSelected property.

XAML
<Window.Resources>
    <Style x:Key="selecteditemStyle" TargetType="syncfusion:CarouselItem" >
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Foreground" Value="Red"/>
                <Setter Property="FontWeight" Value="Bold"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
    <syncfusion:Carousel ItemContainerStyle="{StaticResource selecteditemStyle}" 
                         x:Name="carousel">
        <syncfusion:CarouselItem Content="Item1"/>
        <syncfusion:CarouselItem Content="Item2"/>
        <syncfusion:CarouselItem Content="Item3" IsSelected="True"/>
        <syncfusion:CarouselItem Content="Item4"/>
        <syncfusion:CarouselItem Content="Item5"/>
    </syncfusion:Carousel>

Particular carousel item selected using IsSelected property

Select carousel item programmatically using command and methods

You can select the previous, next, first, or last Carousel items programmatically by using the commands and methods.

SelectFirstItemCommand or SelectFirstItem() - To select the first item.
SelectLastItemCommand or SelectLastItem() - To select the last item.
SelectPreviousItemCommand or SelectPreviousItem - To select the previous item from the currently selected item
SelectNextItemCommand or SelectNextItem() - To select the next item from the currently selected item.
SelectPreviousPageCommand or SelectPreviousPage() - To select the previous page item.
SelectNextPageCommand or SelectNextPage() - To select the next page item.

Rotate carousel item

You can place a carousel item at a specific rotation angle by using the RotationAngle property. You can change the rotation speed of the Carousel items by using the RotationSpeed property. You can also disable rotation animation by setting the EnableRotationAnimation property to false. The default value of the RotationAngle property is 0, the default value of the RotationSpeed property is 200, and the default value of the EnableRotationAnimation property is true.

XAML
C#
<syncfusion:Carousel RotationAngle="180" 
                     RotationSpeed="500" 
                     EnableRotationAnimation="True"
                     ItemsSource="{Binding HeaderCollection}"
                     Name="carousel" />
carousel.RotationAngle = 180;
carousel.RotationSpeed = 500;
carousel.EnableRotationAnimation = true;

Carousel items rotated with 25 degree angle

Resize the WPF Carousel items

To change the size of WPF Carousel items except the selected item, use the ScaleFraction property. You can disable scaling by setting the ScalingEnabled property to false. The value range of the ScaleFraction property is 0 to 1. The default value of the ScaleFraction property is 0, and the default value of the ScalingEnabled property is true.

XAML
C#
<syncfusion:Carousel ScaleFraction="0.50"
                     ItemsSource="{Binding HeaderCollection}"
                     Name="carousel"/>
carousel. ScaleFraction = 0.50;

Size reduced for the next and previous items of the selected item

Change radius of carousel item

You can change the radius of the Carousel control by setting values for the RadiusX and RadiusY properties. Items are arranged based on the radius points. The default value of the RadiusX property is 250, and the default value of the RadiusY property is 150.

XAML
C#
<syncfusion:Carousel RadiusX="100" 
                     RadiusY="100"
                     ItemsSource="{Binding HeaderCollection}"
                     Name="carousel"/>
carousel.RadiusX = 100;
carousel.RadiusY = 100;

The radius of the WPF Carousel control changed

Custom UI of carousel item

You can customize the appearance of each carousel item by using the ItemTemplate property. To change the appearance of a particular carousel item, use the ItemTemplateSelector property. The DataContext of the ItemTemplate property is CarouselItem.

C#
//Model.cs
public class CarouselModel {
	public string Header { get; set; }
}

//ViewModel.cs
public class ViewModel {
	private ObservableCollection<CarouselModel> collection;
	public ObservableCollection<CarouselModel> HeaderCollection	{
		get {
			return collection;
		}
		set {
			collection = value;
		}
	}
	public ViewModel() {
		HeaderCollection = new ObservableCollection<CarouselModel>();
		HeaderCollection.Add(new CarouselModel() { Header = "Buchanan" });
		HeaderCollection.Add(new CarouselModel() { Header = "Callahan" });
		HeaderCollection.Add(new CarouselModel() { Header = "Davolio" });
		HeaderCollection.Add(new CarouselModel() { Header = "Dodsworth" });
		HeaderCollection.Add(new CarouselModel() { Header = "Fuller" });
		HeaderCollection.Add(new CarouselModel() { Header = "King" });
		HeaderCollection.Add(new CarouselModel() { Header = "Leverling" });
		HeaderCollection.Add(new CarouselModel() { Header = "Suyama" });
	}
}

XAML
<Window.DataContext>
    <local:ViewModel/>
</Window.DataContext>

<Grid>
    <syncfusion:Carousel ItemsSource="{Binding HeaderCollection}"
                         ScaleFraction="0.5"
                         Name="carousel" >
        <syncfusion:Carousel.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Ellipse Width="200" Height="100" 
                             Stroke="Green" 
                             StrokeThickness="4"
                             Fill="Yellow"/>
                    <TextBlock HorizontalAlignment="Center" 
                               VerticalAlignment="Center" 
                               Text="{Binding Header}"/>
                </Grid>
            </DataTemplate>
        </syncfusion:Carousel.ItemTemplate>
    </syncfusion:Carousel>
</Grid>

Custom UI of carousel item using ItemTemplate

Custom display path for carousel items

You can change the custom display path of WPF Carousel items by using the Carousel.Path property. Enable it by setting the VisualMode property to VisualMode.CustomPath. The default value of the Carousel.Path property is null, and the default value of the VisualMode property is Standard.

XAML
C#
<syncfusion:Carousel VisualMode="CustomPath"
                     ItemsSource="{Binding HeaderCollection}"
                     Name="carousel">
    <syncfusion:Carousel.Path>
        <Path Data="M0,100 L100,20" 
              Stroke="Blue" 
              StrokeThickness="2" 
              HorizontalAlignment="Stretch"
              VerticalAlignment="Stretch"/>
    </syncfusion:Carousel.Path>
</syncfusion:Carousel>
carousel.VisualMode = VisualMode.CustomPath;

Customized visual path of WPF Carousel items

Number of items to be visible in a page

By default, all the items are displayed in the Carousel control. To display fewer items at a time when more items are added, use the ItemsPerPage property. The ItemsPerPage property is effective only in VisualMode.CustomPath view mode. The default value of the ItemsPerPage property is -1.

XAML
C#
<syncfusion:Carousel ItemsPerPage="3"
                     VisualMode="CustomPath"
                     ItemsSource="{Binding HeaderCollection}"
                     Name="carousel"/>
carousel.ItemsPerPage = 3;
carousel.VisualMode = VisualMode.CustomPath;

Number of items displayed in the Carousel control is reduced

Selected item changed notification

You can examine changes to the selected item in the Carousel by using the SelectionChanged event. The SelectionChanged event contains the old and newly selected items in the OldValue and NewValue properties.

XAML
C#
<syncfusion:Carousel SelectionChanged="Carousel_SelectionChanged"
                      ItemsSource="{Binding HeaderCollection}"
                      Name="carousel"/>
Carousel carousel = new Carousel();
carousel.SelectionChanged += Carousel_SelectionChanged;

You can handle the event as follows,

C#
private void Carousel_SelectionChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) {
    //Get old and new selected carousel item
    var oldValue = e.OldValue;
    var newValue = e.NewValue;
}

Theme

The WPF Carousel supports various built-in themes. Refer to the following links to apply themes for the WPF Carousel:

Setting theme to WPF Carousel

Search docs

Ask Syncfusion AI Assistant