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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

SfListView GridLayout SpanCount Binding MVVM Orientation not working

Thread ID:

Created:

Updated:

Platform:

Replies:

129916 Apr 10,2017 09:43 AM UTC May 24,2017 04:09 AM UTC Xamarin.Forms 5
loading
Tags: SfListView
Christopher Schulze
Asked On April 10, 2017 09:43 AM UTC

Hi,

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:SfListView.LayoutManager>

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

            </syncfusion:SfListView.LayoutManager>

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:SfListView.Resources>

                <ResourceDictionary>

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

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

                </ResourceDictionary>

            </syncfusion:SfListView.Resources>

            <syncfusion:SfListView.Triggers>

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

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

                </DataTrigger>

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

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

                </DataTrigger>

            </syncfusion:SfListView.Triggers>

            <syncfusion:SfListView.ItemTemplate>...

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 15.1.0.41 (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.


Thanks

Christopher


Attachment: GridSpanSample_603f0f76.zip

Muthu Kumaran Gnanavinayagam [Syncfusion]
Replied On 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: 
 
XAML: 
<syncfusion:SfListView x:Name="listView" BindingContextChanged="ListView_BindingContextChanged"  ItemsSource="{Binding Path=ItemList}"> 
... 
</syncfusion:SfListView> 
 
C#: 
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 
 
Regards, 
G.Muthu Kumaran. 


Christopher Schulze
Replied On April 12, 2017 11:13 AM UTC

Hi,

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.


Christopher

Muthu Kumaran Gnanavinayagam [Syncfusion]
Replied On 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. 

Regards, 
G.Muthu Kumaran. 


Christopher Schulze
Replied On May 23, 2017 10:05 AM UTC

Hi,

I updated to Version 15.2.0.40 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.

Regards,
Christopher

Dinesh Babu Yadav [Syncfusion]
Replied On May 24, 2017 04:09 AM UTC

Hi Christopher, 
 
Thanks for the update. 
 
Regards, 
Dinesh Babu Yadav 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;