Articles in this section

How to customize the layout in Xamarin.Forms ListView (SflistView)

You can customize the GridLayout’s SpanCount based on SfListView ItemSize using SizeChanged event in Xamarin.Forms.

XAML

Defined SfListView and added Behavior to it.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ListViewXamarin"
             xmlns:sync="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             x:Class="ListViewXamarin.MainPage" Padding="{OnPlatform iOS='0,40,0,0'}">
 
    <ContentPage.BindingContext>
        <local:GalleryViewModel/>
    </ContentPage.BindingContext>
 
    <ContentPage.Content>
        <sync:SfListView x:Name="listView" ItemsSource="{Binding Items}" ItemSpacing="1" SelectionMode="None" BackgroundColor="#F0F0F0" ItemSize="100">
                <sync:SfListView.Behaviors>
                    <local:Behavior/>
                </sync:SfListView.Behaviors>
                <sync:SfListView.ItemTemplate>
                    <DataTemplate x:Name="ItemTemplate">
                    <Frame OutlineColor="#b3b3b3" Padding="2" HeightRequest="100" WidthRequest="100">
                        <Image Source="{Binding Image}" HeightRequest="100" WidthRequest="100" Aspect="AspectFit"/>
                    </Frame>
                    </DataTemplate>
                </sync:SfListView.ItemTemplate>
            </sync:SfListView>
    </ContentPage.Content>
</ContentPage>

C#

Customizing GridLayout SpanCount based on ListView ItemSize.

namespace ListViewXamarin
{
    public class Behavior : Behavior<SfListView>
    {
        SfListView listView;
        protected override void OnAttachedTo(SfListView bindable)
        {
            listView = bindable;
            listView.SizeChanged += ListView_SizeChanged;
            base.OnAttachedTo(bindable);
        }
 
        private void ListView_SizeChanged(object sender, EventArgs e)
        {
            GridLayout gridLayout = new GridLayout();
            gridLayout.SpanCount = (int)listView.Width / (int)listView.ItemSize;
            listView.LayoutManager = gridLayout; 
        }
        
        protected override void OnDetachingFrom(SfListView bindable)
        {
            listView.SizeChanged -= ListView_SizeChanged;
            listView = null;
            base.OnDetachingFrom(bindable);
        }
    }
}

Output

SpanCount based on ItemSize (Portrait)

SpanCount based on ItemSize (Landscape)

View sample in GitHub

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Access denied
Access denied