We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

SfListView GridLayout SpanCount Binding MVVM Orientation not working


I want to have a orientation (Portrait, Landscape) aware behavior for the ListView in Gridlayout mode. 
For example if I have 8 Items, in portrait-mode (PageWith <  PageHeight) they should be displayed as a grid of two columns and four rows. Changing the orientation to landscape-mode (PageWith >= PageHeight) they should displayed as a grid of four columns and two rows. The number of Items isn't always fix, so its great using a ListView and a ObservableCollection for this. 

So the rule is:
  • Portrait-Mode: 2 Columns and x Rows (SpanCount 2)
  • Landscape-Mode: 4 Columns and x Rows (SpanCount 4)
I'm highly using MVVM and have already a ViewModel-baseclass that provides OnPortraitMode() and OnLandscapeMode() methods for using in ViewModels as well as IsPortraitMode and IsLandscapeMode Properties for Binding in XAML.

My first try was to just bind SpanCount with a ViewModel Property and change it when the OnPortraitMode() and OnLandcapeMode() methods get called:

 <syncfusion:SfListView ItemsSource="{Binding Path=ItemList}" ItemSize="280" ItemSpacing="10,10,0,0" VerticalOptions="FillAndExpand">


                <syncfusion:GridLayout SpanCount="{Binding Path=SpanCount}" />


This isn't working, I think SpanCount isn't able to be bound.

Second try was to use triggers and bind to the IsLandscape-Property:

<syncfusion:SfListView ItemsSource="{Binding Path=ItemList}" ItemSize="280" ItemSpacing="10" VerticalOptions="FillAndExpand">



                    <syncfusion:GridLayout x:Key="LandscapeGridLayout" SpanCount="4"></syncfusion:GridLayout>

                    <syncfusion:GridLayout x:Key="PortraitGridLayout" SpanCount="2"></syncfusion:GridLayout>




                <DataTrigger TargetType="syncfusion:SfListView" Binding="{Binding Path=IsLandscapeMode}" Value="True">

                    <Setter Property="syncfusion:SfListView.LayoutManager" Value="{StaticResource LandscapeGridLayout}"></Setter>


                <DataTrigger TargetType="syncfusion:SfListView" Binding="{Binding Path=IsLandscapeMode}" Value="False">

                    <Setter Property="syncfusion:SfListView.LayoutManager" Value="{StaticResource PortraitGridLayout}"></Setter>




This is working but only for one mode-change: e.g. Portrait -> Landscape, changing back causes an unhandled NullReferenceException.

I attached a sample-project for reproducing this behavior and the exception. I'm using the last Syncfusion version (with nuget packages) and test currently only for Android and UWP (but the ListView is initialized in iOS too).

I hope anyone cal help getting the wanted behavior by using MVVM.



Attachment: GridSpanSample_603f0f76.zip

7 Replies

MK Muthu Kumaran Gnanavinayagam Syncfusion Team April 11, 2017 02:22 PM UTC

Hi Christopher, 
Thank you for using Syncfusion Products. 
Query 1: 
We have analyzed the reported issue “SpanCount not updated when set binding to ListView LayoutManager” and we have noticed that the BindingContext (MainPageViewModel) of LayoutManager is not updated. So you can achieve your requirement by setting the BindingContext of LayoutManager when ListView BindingContext is changed. Please refer the below code snippet, 
Code snippet: 
<syncfusion:SfListView x:Name="listView" BindingContextChanged="ListView_BindingContextChanged"  ItemsSource="{Binding Path=ItemList}"> 
private void ListView_BindingContextChanged(object sender, System.EventArgs e) 
   this.listView.LayoutManager.BindingContext = this.listView.BindingContext; 
For your reference we have attached the working sample below, 
Query 2: 
We are able to reproduce theNullReference Exception throws while changing the LayoutManager at Run-time” issue and a support incident has been created under your account to track the status of this report. Please log on to our support website to check for further updates 
G.Muthu Kumaran. 

CS Christopher Schulze April 12, 2017 11:13 AM UTC


the provided solution for Query 1 works very well.

But I think I will use the way of Query 2 when the issue has been fixed in the next release.

Thank You for the quick response and solution.


MK Muthu Kumaran Gnanavinayagam Syncfusion Team April 13, 2017 05:57 AM UTC

Hi Christopher, 

Thanks for the update. We will let you know once the release has been rolled out. Please let us know if you require further assistance. 

G.Muthu Kumaran. 

CS Christopher Schulze May 23, 2017 10:05 AM UTC


I updated to Version today and tested my second solution (with DataTrigger) again. It works like a charm now. It's now possible to just bind to the IsLandscapeMode or IsPortraitMode Properties of the Baseclass. So I have a clean codebehind, a clean ViewModel and XAML is describing what happens when Mode is changing.
Thanks for fixing the NullReferenceException so fast.


DB Dinesh Babu Yadav Syncfusion Team May 24, 2017 04:09 AM UTC

Hi Christopher, 
Thanks for the update. 
Dinesh Babu Yadav 

RA Raghav September 14, 2021 08:35 AM UTC


We have the same issue for the same usecase.Looks like this might have broken. We are using 


LN Lakshmi Natarajan Syncfusion Team September 15, 2021 12:07 PM UTC

Hi Raghav, 
Thank you for using Syncfusion products. 
We have checked the reported query “SfListView GridLayout SpanCount Binding MVVM Orientation not working” from our side. Unfortunately, we are unable to reproduce the reported scenario at our side. We have attached the tested sample and video in the following link, 
Please check our sample and let us know if you still facing the same issue? If not, please modify our sample based on your scenario to reproduce the issue which would be helpful for us to check on it and provide you the solution as soon as possible. 
Lakshmi Natarajan 

Live Chat Icon For mobile
Up arrow icon