Articles in this section
Category / Section

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

1 min read

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)
Please  to leave a comment
Access denied
Access denied