.NET MAUI ListView Template Cell

Cells in the ListView are the presentation of each data item from the control's ItemsSource. You can choose between the ListViewTextCell and ListViewTemplateCell cell types.

The ListViewTemplateCell derives from Microsoft.Maui.Controls.ViewCell and used to present complex data sets as RadListView.ItemTemplate.

The example below demonstrates how to create a ListView with templated cells, like this:

1. Create a view model that will be the source of the ListView:

public class Book
{
    public string Title { get; set; }
    public string Author { get; set; }
    public bool IsFavourite { get; set; }
}

public class ViewModel
{
    public ViewModel()
    {
        this.Source = new List<Book>{
            new Book{ Title = "The Fault in Our Stars ",  Author = "John Green"},
            new Book{ Title = "Divergent",  Author = "Veronica Roth"},
            new Book{ Title = "Gone Girl",  Author = "Gillian Flynn", IsFavourite = true},
            new Book{ Title = "Clockwork Angel",  Author = "Cassandra Clare"},
            new Book{ Title = "The Martian",  Author = "Andy Weir"},
            new Book{ Title = "Ready Player One",  Author = "Ernest Cline"},
            new Book{ Title = "The Lost Hero",  Author = "Rick Riordan", IsFavourite = true},
            new Book{ Title = "All the Light We Cannot See",  Author = "Anthony Doerr"},
            new Book{ Title = "Cinder",  Author = "Marissa Meyer"},
            new Book{ Title = "Me Before You",  Author = "Jojo Moyes"},
            new Book{ Title = "The Night Circus",  Author = "Erin Morgenstern"},
        };
    }

    public List<Book> Source { get; set; }
}

2. Options to define the ListView control - in XAML or code-behind:

2.1 Define the ListView in XAML

<telerik:RadListView ItemsSource="{Binding Source}" x:Name="listView">
    <telerik:RadListView.BindingContext>
        <local:ViewModel />
    </telerik:RadListView.BindingContext>
    <telerik:RadListView.ItemTemplate>
        <DataTemplate>
            <telerik:ListViewTemplateCell>
                <telerik:ListViewTemplateCell.View>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <HorizontalStackLayout Margin="10, 10, 10, 0">
                            <Image IsVisible="{Binding IsFavourite}" Source="favourite.png" HeightRequest="16" VerticalOptions="Center" />
                            <Label Text="{Binding Title}" FontSize="16" FontAttributes="Bold" TextColor="Black" VerticalOptions="Center" />
                        </HorizontalStackLayout>
                        <HorizontalStackLayout Grid.Row="1" Margin="10, 0, 10, 10">
                            <Label Text="by" FontSize="13" FontAttributes="Italic" TextColor="Gray" />
                            <Label Text="{Binding Author}" FontSize="13" FontAttributes="Italic" TextColor="Gray" />
                        </HorizontalStackLayout>
                    </Grid>
                </telerik:ListViewTemplateCell.View>
            </telerik:ListViewTemplateCell>
        </DataTemplate>
    </telerik:RadListView.ItemTemplate>
    <telerik:RadListView.LayoutDefinition>
        <telerik:ListViewLinearLayout ItemLength="60" />
    </telerik:RadListView.LayoutDefinition>
</telerik:RadListView>

Add the telerik namespace:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

2.2 Define the ListView in code-behind

For clarity, let's build the template of the list view cell in a separate method:

public View GetCellContent()
{
    var content = new Grid();

    var book = new Label
    {
        FontAttributes = FontAttributes.Bold,
        TextColor = Color.Black,
        FontSize = 16,
        VerticalOptions = LayoutOptions.Center
    };

    book.SetBinding(Label.TextProperty, new Binding(nameof(Book.Title)));

    var fav = new Image
    {
        Source = ImageSource.FromFile("favourite.png"),
        HeightRequest = 16,
        VerticalOptions = LayoutOptions.Center
    };

    fav.SetBinding(Image.IsVisibleProperty, new Binding(nameof(Book.IsFavourite)));

    var author = new Label
    {
        TextColor = Color.Gray,
        FontAttributes = FontAttributes.Italic,
        FontSize = 13
    };

    author.SetBinding(Label.TextProperty, new Binding(nameof(Book.Author)));

    var by = new Label
    {
        Text = "by",
        TextColor = Color.Gray,
        FontAttributes = FontAttributes.Italic,
        FontSize = 13
    };

    var main = new StackLayout { Orientation = StackOrientation.Horizontal, Margin = new Thickness(10, 10, 10, 0) };
    main.Children.Add(fav);
    main.Children.Add(book);

    var detail = new StackLayout { Orientation = StackOrientation.Horizontal, Margin = new Thickness(10, 0, 10, 10) };
    detail.Children.Add(by);
    detail.Children.Add(author);

    content.Children.Add(main, 0, 0);
    content.Children.Add(detail, 0, 1);

    return content;
}

Define the ListView:

var listView = new RadListView
{
    ItemsSource = new ViewModel().Source,
    ItemTemplate = new DataTemplate(() =>
    {
        return new ListViewTemplateCell
        {
            View = GetCellContent()
        };
    }),
};

See Also

• ListView Item Template Selector
• ListView Layouts
• Items Styling