1. Home
  2. Forum
  3. Xamarin.Forms
  4. How to do Datasource binding on xaml with mvvm?

How to do Datasource binding on xaml with mvvm?

Hi,

I am looking for using datasource with listview but documentation example is only with C# behind code. is it possible using mvvm and binding on xaml? can you provide me please some information?

thank you very much.

Emil

7 Replies
DB Dinesh Babu Yadav Syncfusion Team December 9, 2016 11:31 AM UTC

Hi Emil, 
 
Thank you for contacting Syncfusion Support. 
 
You can work with our SfListView using the MVVM pattern and binding on XAML. We have mentioned the code examples like loading, sorting and grouping with DataSource in both XAML  and C# code with Tabs on our SfListView documentation. Please find the UG link for your reference, 
 
 
For your reference, we have attached the sample also. Please find the sample link below, 
 
 
Please let us know if you have any queries. 
  
Regards, 
Dinesh Babu Yadav 


EM Emil December 9, 2016 12:17 PM UTC

Hi Dinesh,

thanks for your suggestion. just a quick question, Is it any different than sfDataGrid? It has also grouping. is there any difference?
on the other hand, I have also wp8.1 app, i think that sfListview doesnt support it, correct?

thanks,

Emil 

DB Dinesh Babu Yadav Syncfusion Team December 9, 2016 02:26 PM UTC

Hi Emil, 
 
·       DataSource is different than SfDataGrid. Please find the differentiation below. 
o   DataSource – It is a non-UI component that consumes raw data and processes data operations such as sorting, filtering and grouping. 
o   SfDataGrid – It is an UI component which display and manipulate the data in a tabular (Multi-column) view.  
o   SfListView – It is a layout control to load the items in a linear manner with some set of features. In future, different layouts (Grid, Wrap, Staggered, etc.) will be added into this. It uses the DataSource internally to processes the data. 
 
·       Yes, SfListView don’t have support for Windows Platform 8.1 application. 
 
Please let us know if you have any queries. 
  
Regards, 
Dinesh Babu Yadav 


EM Emil December 9, 2016 04:22 PM UTC

Hi Dinesh,

One last question please. 
Is it possible have AllowGroupExpandCollapse option like SfListView.AllowGroupExpandCollapse ?
Because datasource exposes already a method called  AutoExpandGroups() method. But I cant find AllowGroupExpandCollapse or after all collapsed, how to expend back. here is my code as below.

It works fine, all will be colapsed if i use dataSource.AutoExpandGroups = false; but how to expland again?

  dataSource.GroupDescriptors.Add(new GroupDescriptor()
            {
                PropertyName = "Title",
                KeySelector = (object obj1) =>
                {
                    var item = (obj1 as Helpers.Models.ExerciseDetailModel);
                    return item.Title.ToString();
                }
            });

          dataSource.AutoExpandGroups = false;

   private  void ViewCell_BindingContextChanged(object sender, EventArgs e)
        {
            try
            {
                ViewCell viewCell = sender as ViewCell;
                var rs= viewCell.BindingContext as GroupResult;
                if (viewCell.BindingContext is GroupResult)
                {
                    var label = new Label()
                    {
                        TextColor = Color.Black,
                        FontSize = 14,
                        HeightRequest = 30,
                        HorizontalTextAlignment = TextAlignment.Center,
                        VerticalTextAlignment = TextAlignment.Center,
                        BackgroundColor = Color.Gray
                    };
                    label.SetBinding(Label.TextProperty, new Binding("Key"));
                    viewCell.View = label;
                }
            }
            catch (Exception)
            {
                 
            }
           
        }


PS Pannir Selvam S Syncfusion Team December 12, 2016 03:36 AM UTC

Hi Emil, 
 
You can achieve your requirement “Expand or Collapse the particular group” by calling the ExpandGroup  or CollapseGroup method. To expand or collapse all the groups at runtime, you can call the ExpandAll or CollapseAll method of SfListView. 
 
Code example [C#]:  
  
// To expand or collapse a group 
var group = listView.DataSource.Groups[0]; 
listView.ExpandGroup(group); 
listView.CollapseGroup(group); 
 
//To expand or collapse all the groups 
listView.ExpandAll(); 
listView.CollapseAll(); 
 
  
If you want to expand or collapse the groups, please refer the below documentation for more details  
 
  
Regards, 
Pannir 


EM Emil December 12, 2016 04:48 PM UTC

Hi Pannir,

thanks for your reply. But what is the event after tapping on the groupitem or KeySelector ? 

PS Pannir Selvam S Syncfusion Team December 13, 2016 12:14 PM UTC

Hi Emil, 

In SfListView, ItemTapped event is fired when tap on a group header, header and normal item. And you can identify the tap on group header item by checking the ItemType from event arguments like below code example. 

Code Example [C#]: 
ListView.ItemTapped += ListView_ItemTapped; 
 
private void ListView_ItemTapped(object sender, ItemTappedEventArgs e) 
{ 
    if(e.ItemType == Syncfusion.ListView.XForms.ItemType.GroupHeader) 
    { 
        var group = e.ItemData as GroupResult; 
        var key = group.Key; 
    } 
} 

Regards, 
Pannir 


Loader.
Up arrow icon