How to change SpanCount for GridLayout based on screen size and orientation in .NET MAUI ListView (SfListView)

In .NET MAUI ListView (SfListView), GridLayout arranges the item in a column based on the SpanCount property. The SpanCount can be adjust based on the view size of application either orientation is portrait or landscape.

XAML
Initialize the ItemsLayout as GridLayout, by default set the SpanCount as “2”

<syncfusion:SfListView x:Name="listView" 
                    SelectionMode="Multiple"
                    ItemsSource="{Binding GalleryInfo}"
                    Grid.Row="1"
                    ItemSize="{OnIdiom Phone='150',Tablet='150',Desktop='170'}"
                    ItemSpacing="3">
           <syncfusion:SfListView.ItemsLayout>
               <syncfusion:GridLayout SpanCount="2"/>
           </syncfusion:SfListView.ItemsLayout>
</syncfusion:SfListView>

C#
To customize the SpanCount based on view size of application, PropertyChanged method to get the width.

public class Behavior:Behavior<contentpage>
   {
       #region Override Methods
       protected override void OnAttachedTo(ContentPage bindable)
       {
           listview = bindable.FindByName<syncfusion.maui.listview.sflistview>("listView");
           bindable.PropertyChanged += Bindable_PropertyChanged;
       }

       private void Bindable_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
       {
           if (e.PropertyName == "Width" || e.PropertyName == "Height")
           {
               var size = Application.Current.MainPage.Width / listview.ItemSize;

               if (DeviceInfo.Platform == DevicePlatform.Android || DeviceInfo.Platform == DevicePlatform.iOS)
                   (listview.ItemsLayout as GridLayout).SpanCount = DeviceInfo.Idiom == DeviceIdiom.Phone ? 2 : 4;
               else if (DeviceInfo.Platform == DevicePlatform.WinUI)
               {
                   (listview.ItemsLayout as GridLayout).SpanCount = DeviceInfo.Idiom == DeviceIdiom.Desktop || DeviceInfo.Idiom == DeviceIdiom.Desktop ? 4 : 2;
                   listview.ItemSize = DeviceInfo.Idiom == DeviceIdiom.Desktop || DeviceInfo.Idiom == DeviceIdiom.Tablet ? 230 : 140;
               }
              (listview.ItemsLayout as GridLayout).SpanCount = (int)size;
           }
       }
       protected override void OnDetachingFrom(BindableObject bindable)
       {
           bindable.PropertyChanged -= Bindable_PropertyChanged;
           bindable = null;
           listview = null;
       }
       #endregion
   }

In the code example, the SpanCount is calculated by screen width and ItemSize property to layout the items. For example, the screen width is 300 and ItemSize is 150 in portrait mode, then SpanCount value would be 2.

View sample in GitHub

Take a moment to peruse the documentation to learn more about layouts and its related operations in the SfListView with code examples.