Selecting Item in UWP Carousel (SfCarousel)

10 May 20212 minutes to read

Items can be selected programmatically using the properties SelectedIndex, SelectedItem.

Selecting an item using SelectedIndex

SelectedIndex property is used to select an item in SfCarousel using the index of item.

XAML

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

<layout:SfCarouselItem x:Name="item1" Content="Item 1"/>

<layout:SfCarouselItem x:Name="item2" Content="Item 2"/>

<layout:SfCarouselItem x:Name="item3" Content="Item 3"/>

<layout:SfCarouselItem x:Name="item4" Content="Item 4"/>

<layout:SfCarouselItem x:Name="item5" Content="Item 5"/>

</layout:SfCarousel>

C#

carousel.SelectedIndex = 2;

VB.NET

carousel.SelectedIndex = 2

Selecting an item using SelectedItem

SelectedItem property is used to select an item in SfCarousel using the instance of item.

XAML

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

<layout:SfCarouselItem x:Name="item1" Content="Item 1"/>

<layout:SfCarouselItem x:Name="item2" Content="Item 2"/>

<layout:SfCarouselItem x:Name="item3" Content="Item 3"/>

<layout:SfCarouselItem x:Name="item4" Content="Item 4"/>

<layout:SfCarouselItem x:Name="item5" Content="Item 5"/>

</layout:SfCarousel>

C#

carousel.SelectedItem = item3;

VB.NET

carousel.SelectedItem = item3

Navigating to next item

MoveNext method is used to select next item of the selected item in SfCarousel.

C#

carousel.MoveNext();

VB.NET

carousel.MoveNext()

Navigating to previous item

MovePrevious method is used to select previous item of the selected item in SfCarousel.

C#

carousel.MovePrevious();

VB.NET

carousel.MovePrevious()

Customizing the selected item

SelectedItemTemplate property is used to apply a template for the selected item

Refresh the layout

Refresh method is used to refresh the layout of SfCarousel control.