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