.NET MAUI SlideView Data Binding and Virtualization Options
The Telerik UI for .NET MAUI SlideView provides UI virtualization and an option to bind data.
Binding to a Complex Object
To define the collection of the items that will populate the control with data, use ItemsSource
(IEnumerable
).
1. Add the SlideView definition in XAML:
<telerik:RadSlideView x:Name="slideView"
ItemsSource="{Binding Views}"
Orientation="Vertical">
<telerik:RadSlideView.ItemTemplate>
<DataTemplate>
<Label Text="{Binding Content}"
TextColor="#007ACC"
HorizontalTextAlignment="Center"
VerticalOptions="CenterAndExpand"/>
</DataTemplate>
</telerik:RadSlideView.ItemTemplate>
</telerik:RadSlideView>
2. Add the following namespace:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
3. Add the sample Data Model and the View Model:
- Business Model
public class MyItem
{
public string Content { get; set; }
}
- View Model
public class ViewModel
{
public ObservableCollection<MyItem> Views { get; set; }
public ViewModel()
{
this.Views = new ObservableCollection<MyItem>()
{
new MyItem() { Content = "View 1" },
new MyItem() { Content = "View 2" },
new MyItem() { Content = "View 3" },
};
}
}
Virtualization Mode
UI virtualization is a technique used to generate visual containers only for the visible part of the control (the viewport). For example, if the data items collection contains 100 records, but the size of the control allows to show only 20 at once, only 20 containers will be generated. When the viewport changes, the number of generated containers may increase or decrease based on the available size.
The Telerik UI for .NET MAUI SlideView control uses UI virtualization on demand. So the creation and preparation of the views is delayed until an item gets near the viewport. You can disable the virtualization by setting the VirtualizationMode
(enum
of type Telerik.Maui.Controls.SlideView.VirtualizationMode
) property to None
. The default value is LoadOnDemand
.
Here is a sample SlideView definition with a VirtualizationMode
set to None
:
<telerik:RadSlideView x:Name="slideView"
ItemsSource="{Binding Views}"
VirtualizationMode="None"/>