New to Telerik UI for .NET MAUI? Start a free 30-day trial

.NET MAUI ListView Layouts

The ListView control supports two layouts: linear and grid through its LayoutDefinition property. It accepts values of type ListViewLayoutBase which is a base class for all list view layouts.

Here are the properties exposed by the ListViewLayoutBase class:

  • VerticalItemSpacing (double)—Gets or sets the vertical space between two items.
  • HorizontalItemSpacing (double)—Gets or sets the horizontal space between two items.
  • ItemLength (double)—Gets or sets the width or height (depending on the layout orientation) of the items. The default value is -1, which means that the items will be sized according to the targeted platform default behavior.
  • GroupHeaderLength (double)—Gets or sets the width or height (depending on the layout orientation) of the group headers. The default value is -1 which means that the items will be sized according to the targeted platform default behavior.
  • Orientation (Orientation)—Gets or sets the orientation (scroll direction) of the layout.

Linear Layout

Linear layout is the default layout of the control. It can be explicitly set by creating an instance of the ListViewLinearLayout class and assigning it to the RadListView.LayoutDefinition property.

The following example demonstrates how to use the RadListViewLinearLayout.

1. Define the list view in XAML:

<telerik:RadListView x:Name="listView" ItemsSource="{Binding Items}">
    <telerik:RadListView.BindingContext>
        <local:ViewModel/>
    </telerik:RadListView.BindingContext>
    <telerik:RadListView.ItemTemplate>
        <DataTemplate>
            <telerik:ListViewTemplateCell>
                <telerik:ListViewTemplateCell.View>
                    <telerik:RadBorder BorderColor="LightBlue" BorderThickness="2">
                        <Label Text="{Binding Name}"/>
                    </telerik:RadBorder>
                </telerik:ListViewTemplateCell.View>
            </telerik:ListViewTemplateCell>
        </DataTemplate>
    </telerik:RadListView.ItemTemplate>
    <telerik:RadListView.LayoutDefinition>
        <telerik:ListViewLinearLayout ItemLength="40" VerticalItemSpacing="2" />
    </telerik:RadListView.LayoutDefinition>
</telerik:RadListView>

2. Add the telerik namespace:

3. Add the ViewModel class with the ItemsSource collection:
public class ViewModel
{
    public ViewModel()
    {
        this.Items = new ObservableCollection<Item>();
        for (int i = 0; i < 14; i++)
        {
            var c = 200 - 10 * i;
            this.Items.Add(new Item() { Name = "Item " + i, });
        }
    }
    public ObservableCollection<Item> Items { get; set; }
}

The following image shows the result:

.NET MAUI ListView Layouts Linear Vertical

Grid Layout

The Grid Layout allows distributing cells in a fixed number of columns/rows. To the basic layout properties, it exposes the SpanCount (int) property, which gets or sets the count of the columns/rows (depending on the orientation) of the list.

The grid layout can be utilized by setting the RadListView.LayoutDefinition property to a new instance of the ListViewGridLayout class.

The following example demonstrates how to use the RadListViewGridLayout.

1. Define the list view in XAML:

<telerik:RadListView x:Name="listView" ItemsSource="{Binding Items}">
    <telerik:RadListView.BindingContext>
        <local:ViewModel/>
    </telerik:RadListView.BindingContext>
    <telerik:RadListView.ItemTemplate>
        <DataTemplate>
            <telerik:ListViewTemplateCell>
                <telerik:ListViewTemplateCell.View>
                    <telerik:RadBorder BorderColor="LightBlue" BorderThickness="2">
                        <Label Text="{Binding Name}"/>
                    </telerik:RadBorder>
                </telerik:ListViewTemplateCell.View>
            </telerik:ListViewTemplateCell>
        </DataTemplate>
    </telerik:RadListView.ItemTemplate>
    <telerik:RadListView.LayoutDefinition>
        <telerik:ListViewGridLayout ItemLength="40" 
                                            HorizontalItemSpacing="2" 
                                            VerticalItemSpacing="2" />
    </telerik:RadListView.LayoutDefinition>
</telerik:RadListView>

2. Add the ViewModel class with the ItemsSource collection:

public class ViewModel
{
    public ViewModel()
    {
        this.Items = new ObservableCollection<Item>();
        for (int i = 0; i < 14; i++)
        {
            var c = 200 - 10 * i;
            this.Items.Add(new Item() { Name = "Item " + i, });
        }
    }
    public ObservableCollection<Item> Items { get; set; }
}

The following image shows the result:

.NET MAUI ListView Layouts Grid

See Also

In this article