.NET MAUI SlideView Item Template

You can populate the SlideView component with various types of objects, for example, string, int, business objects, and so on. To customize the visualization of the views in the ItemsSource of the control, use its ItemTemplate property. The template can contain any of the views that you use to display the data.

Example

The following example shows how to populate the ItemsSource with business items and customize their appearance.

1. Create a sample CustomItem class.

• C#

public class CustomItem
{
    public string IconUnicode { get; set;}
    public string DescriptionText { get; set;}
}

2. Add a View Model containing a collection of MyItem objects.

• C#

public class ItemTemplateViewModel
{
    public ObservableCollection<CustomItem> Items { get; set; }

    public ItemTemplateViewModel()
    {
        this.Items = new ObservableCollection<CustomItem>()
        {
            new CustomItem() { IconUnicode = "\ue84a", DescriptionText = "The .NET MAUI SlideView has so much more to show than just images." },
            new CustomItem() { IconUnicode = "\ue848", DescriptionText = "Create stunning designs for your data's visual representation." },
            new CustomItem() { IconUnicode = "\ue84c", DescriptionText = "Bring your masterpieces to life through the slide view's ItemTemplate." },
        };
    }
}

3. Add the SlideView definition with a sample ItemTemplate applied.

• XAML

<telerik:RadSlideView x:Name="slideView"
                      ItemsSource="{Binding Items}">
    <telerik:RadSlideView.ItemTemplate>
        <DataTemplate>
            <Grid RowDefinitions="Auto, *"
                  VerticalOptions="Center">
                <Label Text="{Binding IconUnicode}"
                       TextColor="#3341A1"
                       FontFamily="TelerikFontExamples"
                       FontSize="64"
                       HorizontalOptions="Center" />
                <Label Grid.Row="1"
                       Text="{Binding DescriptionText}"
                       HorizontalTextAlignment="Center"
                       Margin="0, 10, 0, 0" />
            </Grid>
        </DataTemplate>
    </telerik:RadSlideView.ItemTemplate>
</telerik:RadSlideView>

4. Set the BindingContext to the View Model:

• C#

slideView.BindingContext = new ViewModel();

Here is the result:

For a runnable example with the SlideView ItemTemplate scenario, see the SDKBrowser Demo Application and go to SlideView > Templates.