Getting Started with UWP Carousel (SfCarousel)
8 Nov 2019 / 4 minutes to read
This section explains how to create a preview of slides using SfCarousel control.
Adding SfCarousel 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 SfCarousel 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 SfCarouselItems are added as the children of the SfCarousel.
<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
Content property helps 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 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))}
})
Was this page helpful?
Yes
No
Thank you for your feedback!
Thank you for your feedback and comments. We will rectify this as soon as possible!
An unknown error has occurred. Please try again.
Help us improve this page