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.

<layout:SfCarousel>

<layout:SfCarouselItem/>

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

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.

<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>
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"});
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"})

Provided the Content to Carousel

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

public class Employee

{
	
public string Name { get; set; }

public string Description { get; set; }

}
Public Class Employee


Public Property Name() As String

Public Property Description() As String

End Class

2.Create a collection of model

private List<Employee> employees;

public List<Employee> Employees

{
	
get { return employees; }

set { employees = value; }

}
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

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" });
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

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

SfCarousel control is populated as follows:

Provided the ItemSource to Carousel

Displaying the item

Content can be displayed using the DisplayMemberPath and ItemTemplate property.

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

Provided the DisplayMemberPath to Carousel

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

<layout:SfCarousel.ItemTemplate>

<DataTemplate>

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

</DataTemplate>

</layout:SfCarousel.ItemTemplate>

</layout:SfCarousel>