CODEWITHSUNDEEP
c#mvvmdata-bindingxamarin.forms
markpirvine
markpirvine

Reputation: 1592

Xamarin Forms Bindable Grid

I;m working on a Xamarin Forms application and need to be able to bind to a Grid. I came across this article:

https://www.linkedin.com/pulse/bindable-grid-xamarin-forms-jonas-frid

Source on GitHub:

https://github.com/Manne990/XamTest/blob/master/XamTest/Views/TemplatedTableView/TemplatedTableView.cs

This is exactly what I need, however it doesn't respond to changes in the collection. I'm using MvvmHelpers which works well for all of the ListView's:

https://github.com/jamesmontemagno/mvvm-helpers

I assume I need to update TemplatedTableView.cs to respond to a CollectionChanged event - I'm just not sure how to do this?

Upvotes: 0

Views: 8091

Answers (4)

Giuseppe Laera
Giuseppe Laera

Reputation: 310

From Xamarin Forms 3.5 you can use a Bindable Layouts

Example from official docs:

<StackLayout BindableLayout.ItemsSource="{Binding User.TopFollowers}"
             Orientation="Horizontal"
             ...>
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <controls:CircleImage Source="{Binding}"
                                  Aspect="AspectFill"
                                  WidthRequest="44"
                                  HeightRequest="44"
                                  ... />
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

Upvotes: 3

Ahmad Chishti
Ahmad Chishti

Reputation: 111

You can try the grid provided by Syncfusion

Use in XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DataGridDemo;assembly=DataGridDemo"
             xmlns:syncfusion="clr-namespace:Syncfusion.SfDataGrid.XForms;assembly=Syncfusion.SfDataGrid.XForms" 
             x:Class="DataGridDemo.Sample">

    <ContentPage.BindingContext>
        <local:OrderInfoRepository x:Name="viewModel" />
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <syncfusion:SfDataGrid x:Name="dataGrid"
                               ItemsSource="{Binding OrderInfoCollection}">
        </syncfusion:SfDataGrid>
    </ContentPage.Content>
</ContentPage>

Be sure to call the property changed event after bound collection is updated

enter image description here

It has alot of neat features.

Upvotes: 1

Daniel Luberda
Daniel Luberda

Reputation: 7454

Maybe it would help: https://github.com/daniel-luberda/DLToolkit.Forms.Controls/tree/master/FlowListView - it supports items updates / grouping and much more

Sample code: 

<flv:FlowListView x:Name="flowListView" FlowColumnCount="3" SeparatorVisibility="None" HasUnevenRows="false"
    FlowItemTappedCommand="{Binding ItemTappedCommand}" FlowLastTappedItem="{Binding LastTappedItem}"
    FlowItemsSource="{Binding Items}" >

    <flv:FlowListView.FlowColumnTemplate>
        <DataTemplate>
            <Label HorizontalOptions="Fill" VerticalOptions="Fill" 
                XAlign="Center" YAlign="Center" Text="{Binding Title}"/>
        </DataTemplate>
    </flv:FlowListView.FlowColumnTemplate>

</flv:FlowListView>

Upvotes: 1

Rohit Vipin Mathews
Rohit Vipin Mathews

Reputation: 11787

You can add an event to the ItemSource property's CollectionChanged Event.

This is how the ListView in Xamarin Forms is implemented. You can find the code for the same in github.

Eg: 

    void OnItemsSourceChanged(bool fromGrouping = false)
    {
        ListProxy.CollectionChanged -= OnProxyCollectionChanged;

        IEnumerable itemSource = GetItemsViewSource();
        if (itemSource == null)
            ListProxy = new ListProxy(new object[0]);
        else
            ListProxy = new ListProxy(itemSource);

        ListProxy.CollectionChanged += OnProxyCollectionChanged;
        OnProxyCollectionChanged(this, new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Reset));
    }

Upvotes: 0

Related Questions