Populating Items in UWP Carousel (SfCarousel)

10 May 20216 minutes to read

SfCarouselItem can be added as items of SfCarousel. Items of SfCarousel can be added though Items or ItemSource property.

Using Items

SfCarousel accepts SfCarouselItem as its children when added directly.

Adding items to the control

Here five SfCarouselItems are added as the children of the SfCarousel.

XAML

<layout:SfCarousel>

<layout:SfCarouselItem/>

<layout:SfCarouselItem/>

<layout:SfCarouselItem/>

<layout:SfCarouselItem/>

<layout:SfCarouselItem/>

</layout:SfCarousel>

C#

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());

VB.NET

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())

Displaying the items

Content property helps to set the content for SfCarouselItem. SfCarouselItem is a ContentControl so that any object can be added as its content.

XAML

<layout:SfCarousel>

<layout:SfCarouselItem Content="Item 1"/>

<layout:SfCarouselItem Content="Item 2"/>

<layout:SfCarouselItem Content="Item 3"/>

<layout:SfCarouselItem Content="Item 4"/>

<layout:SfCarouselItem Content="Item 5"/>

</layout:SfCarousel>

C#

SfCarousel carousel = new SfCarousel();

carousel.Items.Add(new SfCarouselItem() { Content = "Item 1" });

carousel.Items.Add(new SfCarouselItem() { Content = "Item 2"});

carousel.Items.Add(new SfCarouselItem() { Content = "Item 3" });

carousel.Items.Add(new SfCarouselItem() { Content = "Item 4"});

carousel.Items.Add(new SfCarouselItem() { Content = "Item 5"});

VB.NET

Dim carousel As New SfCarousel()

carousel.Items.Add(New SfCarouselItem() With {.Content = "Item 1"})

carousel.Items.Add(New SfCarouselItem() With {.Content = "Item 2"})

carousel.Items.Add(New SfCarouselItem() With {.Content = "Item 3"})

carousel.Items.Add(New SfCarouselItem() With {.Content = "Item 4"})

carousel.Items.Add(New SfCarouselItem() With {.Content = "Item 5"})

Using ItemsSource

SfCarousel accepts any business object collection to be bound to its ItemsSource property.

Adding items to the control

Follow the below steps to add the Items through ItemsSource property.

1.Create a model

C#

public class Employee

{
	
public string Name { get; set; }

public string Description { get; set; }

}

VB.NET

Public Class Employee


Public Property Name() As String

Public Property Description() As String

End Class

2.Create a collection of model

C#

private List<Employee> employees;

public List<Employee> Employees

{
	
get { return employees; }

set { employees = value; }

}

VB.NET

Private employees_Renamed As List(Of Employee)

Public Property Employees() As List(Of Employee)


Get
	Return employees_Renamed
End Get

Set(ByVal value As List(Of Employee))
	employees_Renamed = value
End Set

End Property

3.Populate the collection

C#

Employees = new List<Employee>();

Employees.Add(new Employee() { Name = "James", Description = "Description about James" });

Employees.Add(new Employee() { Name = "Linda", Description = "Description about Linda" });

Employees.Add(new Employee() { Name = "Carl", Description = "Description about Carl" });

Employees.Add(new Employee() { Name = "Niko", Description = "Description about Niko" });

VB.NET

Employees = New List(Of Employee)()

Employees.Add(New Employee() With {
	.Name = "James",
	.Description = "Description about James"
})

Employees.Add(New Employee() With {
	.Name = "Linda",
	.Description = "Description about Linda"
})

Employees.Add(New Employee() With {
	.Name = "Carl",
	.Description = "Description about Carl"
})

Employees.Add(New Employee() With {
	.Name = "Niko",
	.Description = "Description about Niko"
})

4.Bind the Employees collection to ItemsSource property of SfCarousel Control

XAML

<layout:SfCarousel ItemsSource="{Binding Employees}"/>

SfCarousel control is populated as follows:

Displaying the item

Content can be displayed using the DisplayMemberPath and ItemTemplate property.

XAML

<layout:SfCarousel ItemsSource="{Binding Employees}" DisplayMemberPath="Name"/>

XAML

<layout:SfCarousel ItemsSource="{Binding Employees}">

<layout:SfCarousel.ItemTemplate>

<DataTemplate>

<TextBlock Text="{Binding Name}"/>

</DataTemplate>

</layout:SfCarousel.ItemTemplate>

</layout:SfCarousel>