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.

<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>
carousel.SelectedIndex = 2;
carousel.SelectedIndex = 2

Provided SelectedIndex for Carousel

Selecting an item using SelectedItem

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

<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>
carousel.SelectedItem = item3;
carousel.SelectedItem = item3

Provided SelectedItem for Carousel

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

carousel.MoveNext();
carousel.MoveNext()

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

carousel.MovePrevious();
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.