Layouts in .NET MAUI ListView (SfListView)

13 Jul 20263 minutes to read

The SfListView supports different layouts such as linear and grid layouts. The SfListView.ItemsLayout property is used to define the layout.

Linear layout

The linear layout arranges items linearly in a single column vertically or a single row horizontally. Initialize a LinearLayout and assign it to the ItemsLayout property to display items in a linear layout. It is the default layout.

MainPage.xaml

<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView">
  <syncfusion:SfListView x:Name="listView" 
                    ItemsSource="{Binding CategoryInfo}"
                    ItemSize="100">
      <syncfusion:SfListView.ItemsLayout>
        <syncfusion:LinearLayout />
      </syncfusion:SfListView.ItemsLayout>
  </syncfusion:SfListView>
</ContentPage>

MainPage.xaml.cs

using Syncfusion.Maui.ListView;
// ...
listView.ItemsLayout = new LinearLayout();

Grid layout

The grid layout arranges items in a configurable number of columns. Initialize a GridLayout and assign it to the ItemsLayout property to display items in a grid layout.

The number of columns can be defined by using the SpanCount property of GridLayout. The default SpanCount is 2.

In Horizontal orientation, SpanCount defines the number of rows.

MainPage.xaml

<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView">
  <syncfusion:SfListView x:Name="listView" 
                    ItemsSource="{Binding GalleryInfo}"
                    ItemSize="100">
      <syncfusion:SfListView.ItemsLayout>
        <syncfusion:GridLayout SpanCount="2" />
      </syncfusion:SfListView.ItemsLayout>
  </syncfusion:SfListView>
</ContentPage>

MainPage.xaml.cs

using Syncfusion.Maui.ListView;
// ...
listView.ItemsLayout = new GridLayout() { SpanCount = 2 };

Change span count based on screen size

In the SfListView, the GridLayout allows you to change the SpanCount based on the application’s view size and orientation (portrait or landscape).

NOTE

ItemSize represents a single dimension of the item. In a GridLayout, divide the available width by the per-cell width to compute the number of columns. In vertical orientation, use the item height; in horizontal orientation, use the item width.

MainPage.xaml.cs

public partial class GridLayoutPage : ContentPage
{
  public GridLayoutPage()
  {
      InitializeComponent();
      this.PropertyChanged += GridLayoutPage_PropertyChanged;
  }

  private void GridLayoutPage_PropertyChanged(object sender, PropertyChangedEventArgs e)
  {
      if (e.PropertyName == "Width")
      {
          // Use the item's per-cell width to compute the number of columns.
          var cellWidth = listView.ItemSize;
          var size = Application.Current.MainPage.Width / cellWidth;
          gridLayout.SpanCount = Math.Max(1, (int)size);
          listView.ItemsLayout = gridLayout;
      }
  }
}