Xamarin Forms Bindable Grid

Question

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?

Answer 1

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> 

Answer 2

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

It has alot of neat features.

Answer 3

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>

Answer 4

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));
    }