Rotation in WPF Carousel

RotationAngle property of carousel enables the items in the control to be rotated at a user defined angle.

Adding RotationAngle support to an Application

<syncfusion:Carousel  x:Name="Carousel"
VerticalAlignment="Center"
HorizontalAlignment="Center"
RotationAngle="45"/>
Carousel carousel = new Carousel();

carousel.HorizontalAlignment = HorizontalAlignment.Center;

carousel.VerticalAlignment = VerticalAlignment.Center;

carousel.Name = "Carousel1";

carousel.RotationAngle = 45;

carousel.ItemsSource = new ObservableCollection<string>() { "Item1", "Item2", "Item3", "Item4", "Item5", "Item6", "Item7", "Item8", "Item9" };

grid1.Children.Add(carousel);
Dim carousel As New Carousel()

carousel.HorizontalAlignment = HorizontalAlignment.Center

carousel.VerticalAlignment = VerticalAlignment.Center

carousel.Name = "Carousel1"

carousel.RotationAngle = 45

carousel.ItemsSource = New ObservableCollection(Of String)() From { _
	"Item1", _
	"Item2", _
	"Item3", _
	"Item4", _
	"Item5", _
	"Item6", _
	"Item7", _
	"Item8", _
	"Item9" _
}

grid1.Children.Add(carousel)

Carousel rotation

RotationSpeed Support

RotationSpeed property of Carousel enables the items in the control to be rotated at a user defined speed.

Adding RotationSpeed support to an Application

<syncfusion:Carousel  x:Name="Carousel"
VerticalAlignment="Center"
HorizontalAlignment="Center"
RotationSpeed="100"/>
Carousel carousel = new Carousel();

carousel.HorizontalAlignment = HorizontalAlignment.Center;

carousel.VerticalAlignment = VerticalAlignment.Center;

carousel.Name = "Carousel1";

carousel.RotationSpeed = 100;

carousel.ItemsSource = new ObservableCollection<string>() { "Item1", "Item2", "Item3", "Item4", "Item5", "Item6", "Item7", "Item8", "Item9" };

grid1.Children.Add(carousel);
Dim carousel As New Carousel()

carousel.HorizontalAlignment = HorizontalAlignment.Center

carousel.VerticalAlignment = VerticalAlignment.Center

carousel.Name = "Carousel1"

carousel.RotationSpeed = 100

carousel.ItemsSource = New ObservableCollection(Of String)() From { _
	"Item1", _
	"Item2", _
	"Item3", _
	"Item4", _
	"Item5", _
	"Item6", _
	"Item7", _
	"Item8", _
	"Item9" _
}

grid1.Children.Add(carousel)

Rotation Animation

EnableRotationAnimation property will enable or disable the Rotation Animation behavior of CarouselItems.

<syncfusion:Carousel x:Name="carousel" EnableRotationAnimation="False">

<syncfusion:CarouselItem Content="Item1" x:Name="item1"/>

<syncfusion:CarouselItem Content="Item2" x:Name="item2"/>

<syncfusion:CarouselItem Content="Item3" x:Name="item3"/>

<syncfusion:CarouselItem Content="Item4" x:Name="item4"/>

<syncfusion:CarouselItem Content="Item5" x:Name="item5"/>

</syncfusion:Carousel>
Carousel carousel = new Carousel();

carousel.EnableRotationAnimation = false;

carousel.Items.Add(new CarouselItem() { Content = "Item1" });

carousel.Items.Add(new CarouselItem() { Content = "Item2" });

carousel.Items.Add(new CarouselItem() { Content = "Item3" });

carousel.Items.Add(new CarouselItem() { Content = "Item4" });

carousel.Items.Add(new CarouselItem() { Content = "Item5" });

grid1.Children.Add(carousel);

Touch support

Carousel provides Touch UI which is easy to perform the rotation of CarouselItems.

To enable Touch Support in Carousel, set EnableTouch property as true. When the property is false, we need to touch exactly on the item to rotate. By default its value is false.

<syncfusion:Carousel x:Name="carousel" EnableTouch="True">
            <syncfusion:CarouselItem Content="Item1" x:Name="item1"/>
            <syncfusion:CarouselItem Content="Item2" x:Name="item2"/>
            <syncfusion:CarouselItem Content="Item3" x:Name="item3"/>
            <syncfusion:CarouselItem Content="Item4" x:Name="item4"/>
            <syncfusion:CarouselItem Content="Item5" x:Name="item5"/>
        </syncfusion:Carousel>