Getting Started with UWP Carousel (SfCarousel)

18 Nov 20184 minutes to read

This section explains how to create a preview of slides using UWP Carousel control.

Create a Universal Windows Platform project in Visual Studio and refer to the following assemblies.

  • Syncfusion. SfCarousel.UWP

  • Syncfusion.SfShared.UWP

1.Include the namespace for Syncfusion.SfCarousel.UWP assembly in MainPage.xaml

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:layout="using:Syncfusion.UI.Xaml.Controls.Layout">

2.Now add the UWP Carousel control with a required optimal name using the included namespace

<layout:SfCarousel x:Name="carousel"/>
SfCarousel carousel = new SfCarousel();
Dim carousel As New SfCarousel()

Adding SfCarouselItems to the control

Here, the SfCarouselItems are added as the children of the UWP Carousel.

<layout:SfCarousel x:Name="carousel">

<layout:SfCarouselItem/>

<layout:SfCarouselItem/>

<layout:SfCarouselItem/>

<layout:SfCarouselItem/>

</layout:SfCarousel>
SfCarousel carousel = new SfCarousel();

carousel.Items.Add(new SfCarouselItem());

carousel.Items.Add(new SfCarouselItem());

carousel.Items.Add(new SfCarouselItem());

carousel.Items.Add(new SfCarouselItem());

carousel.Items.Add(new SfCarouselItem());
Dim carousel As New SfCarousel()

carousel.Items.Add(New SfCarouselItem())

carousel.Items.Add(New SfCarouselItem())

carousel.Items.Add(New SfCarouselItem())

carousel.Items.Add(New SfCarouselItem())

carousel.Items.Add(New SfCarouselItem())

Setting content for CarouselItems

The Content property is used to set the content for SfCarouselItem. SfCarouselItem is a ContentControl so that any object can be added as its content. Here, images are set as the content of the carousel items.

<layout:SfCarousel x:Name="carousel">

<layout:SfCarouselItem >

<Image Source="Assets/1.jpg" Stretch="Uniform"/>

</layout:SfCarouselItem>

<layout:SfCarouselItem >

<Image Source="Assets/2.jpg" Stretch="Uniform"/>

</layout:SfCarouselItem>

<layout:SfCarouselItem >

<Image Source="Assets/3.jpg" Stretch="Uniform"/>

</layout:SfCarouselItem>

<layout:SfCarouselItem >

<Image Source="Assets/4.jpg" Stretch="Uniform"/>

</layout:SfCarouselItem>

</layout:SfCarousel>
SfCarousel carousel = new SfCarousel() { Height = 500, Width = 500 };

carousel.Items.Add(new SfCarouselItem() { Content = new Image() { Source = new BitmapImage(new Uri(@"ms-appx:///Assets/1.jpg", UriKind.RelativeOrAbsolute)) } });

carousel.Items.Add(new SfCarouselItem() { Content = new Image() { Source = new BitmapImage(new Uri(@"ms-appx:///Assets/2.jpg", UriKind.RelativeOrAbsolute)) } });

carousel.Items.Add(new SfCarouselItem() { Content = new Image() { Source = new BitmapImage(new Uri(@"ms-appx:///Assets/3.jpg", UriKind.RelativeOrAbsolute)) } });

carousel.Items.Add(new SfCarouselItem() { Content = new Image() { Source = new BitmapImage(new Uri(@"ms-appx:///Assets/4.jpg", UriKind.RelativeOrAbsolute)) } });
Dim carousel As New SfCarousel() With {
	.Height = 500,
	.Width = 500
}

carousel.Items.Add(New SfCarouselItem() With {
	.Content = New Image() With {.Source = New BitmapImage(New Uri("ms-appx:///Assets/1.jpg", UriKind.RelativeOrAbsolute))}
})

carousel.Items.Add(New SfCarouselItem() With {
	.Content = New Image() With {.Source = New BitmapImage(New Uri("ms-appx:///Assets/2.jpg", UriKind.RelativeOrAbsolute))}
})

carousel.Items.Add(New SfCarouselItem() With {
	.Content = New Image() With {.Source = New BitmapImage(New Uri("ms-appx:///Assets/3.jpg", UriKind.RelativeOrAbsolute))}
})

carousel.Items.Add(New SfCarouselItem() With {
	.Content = New Image() With {.Source = New BitmapImage(New Uri("ms-appx:///Assets/4.jpg", UriKind.RelativeOrAbsolute))}
})

Step by Step Carousel