Skip to content

Articles

  • Date published

    Monday, 18 March 2019

  • Author

    Patrick Allwood

  • Estimated reading time

    4 minute read

Xamarin.Forms version 3.0 introduced a lovely new layout class, the FlexLayout. It is based on the CSS Flexible Box Layout, and has many flexible options to arrange children within the layout. A common usage scenario is to dynamically position a collection of elements, wrapping lines where necessary. Unfortunately FlexLayout doesn't support data binding out of the box, making it awkward to use when your project follows the MVVM structure because the collection of items to show will often be provided by a ViewModel. This article explains how to add collection data binding support to the FlexLayout.
The convention for bindable collection controls such as ListView is to have an ItemsSource property, which binds to the collection of items to display, and an ItemTemplate property, which specifies a template to use to display each source item. All pretty straight forward and unsurprising. So lets go ahead and subclass FlexLayout and add these properties.
class BindableFlexLayout : FlexLayout
{
    public static readonly BindableProperty ItemsSourceProperty  
        = BindableProperty.Create(nameof(ItemsSource), typeof(IList), typeof(BindableFlexLayout));

    public IList ItemsSource
    {
        get { return (IList)GetValue(ItemsSourceProperty); }
        set { SetValue(ItemsSourceProperty, value); }
    }

    public static readonly BindableProperty ItemTemplateProperty 
        = BindableProperty.Create(nameof(ItemTemplate), typeof(DataTemplate), typeof(BindableFlexLayout));

    public DataTemplate ItemTemplate
    {
        get { return (DataTemplate)GetValue(ItemTemplateProperty); }
        set { SetValue(ItemTemplateProperty, value); }
    }
}

We're going to defer all layout and positioning decisions to the base class. In order to do this, all we need to do is add the child UI elements to the Children collection in the correct order. The snippet below allows either a static DataTemplate, or a DataTemplateSelector to be used. For this article we're going to use the simplest solution of rebuilding the whole collection each time.

private void BuildLayout()
{
    Children.Clear();

    foreach (var item in ItemsSource)
    {
        View view = null;

        if (ItemTemplate is DataTemplateSelector)
        {
            view = (View)ItemTemplate.CreateContent(item, null);
        }
        else
        {
            view = (View)ItemTemplate.CreateContent();
        }

        view.BindingContext = item;
        Children.Add(view);
    }
}

Finally, we need to trigger the rebuild whenever the DataTemplate or ItemsSource properties change. Add property change event handlers to our two bindable properties.

public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create("ItemsSource", typeof(IList), typeof(StackLayoutList), propertyChanged: OnItemsSourceChanged);

public static readonly BindableProperty ItemTemplateProperty = BindableProperty.Create("ItemTemplate", typeof(DataTemplate), typeof(StackLayoutList), propertyChanged: OnItemTemplateChanged);

private static void OnItemTemplateChanged(BindableObject obj, object oldValue, object newValue)
{
    var layout = obj as StackLayoutList;

    if (layout?.ItemsSource != null && layout?.ItemTemplate != null)
        layout.BuildLayout();
}

private static void OnItemsSourceChanged(BindableObject obj, object oldValue, object newValue)
{
    var layout = obj as StackLayoutList;

    if (layout?.ItemsSource != null && layout?.ItemTemplate != null)
        layout.BuildLayout();
}

That's all there is to it, complete copy-pastable sample is below. The same implementation can also be applied to other types of layouts. Worth noting that this has a short shelf life - the Xamarin team have seen the need for bindable layouts and as of Xamarin.Forms 3.5, will be providing the same functionality via attached properties. Neat.

public class BindableFlexLayout : FlexLayout
{
    public static readonly BindableProperty ItemsSourceProperty 
        = BindableProperty.Create("ItemsSource", typeof(IList), typeof(BindableFlexLayout), propertyChanged: OnItemsSourceChanged);

    public IList ItemsSource
    {
        get { return (IList)GetValue(ItemsSourceProperty); }
        set { SetValue(ItemsSourceProperty, value); }
    }

    public static readonly BindableProperty ItemTemplateProperty 
        = BindableProperty.Create("ItemTemplate", typeof(DataTemplate), typeof(BindableFlexLayout), propertyChanged: OnItemTemplateChanged);

    public DataTemplate ItemTemplate
    {
        get { return (DataTemplate)GetValue(ItemTemplateProperty); }
        set { SetValue(ItemTemplateProperty, value); }
    }

    private static void OnItemTemplateChanged(BindableObject obj, object oldValue, object newValue)
    {
        var layout = obj as BindableFlexLayout;

        if (layout?.ItemsSource != null && layout?.ItemTemplate != null)
            layout.BuildLayout();
    }

    private static void OnItemsSourceChanged(BindableObject obj, object oldValue, object newValue)
    {
        var layout = obj as BindableFlexLayout;

        if (layout?.ItemsSource != null && layout?.ItemTemplate != null)
            layout.BuildLayout();
    }

    private void BuildLayout()
    {
        Children.Clear();

        foreach (var item in ItemsSource)
        {
            View view = null;

            if (ItemTemplate is DataTemplateSelector)
            {
                view = (View)ItemTemplate.CreateContent(item, null);
            }
            else
            {
                view = (View)ItemTemplate.CreateContent();
            }

            view.BindingContext = item;
            Children.Add(view);
        }
    }
}

Last updated: Monday, 19 June 2023

Patrick Allwood

Senior Software Developer

He/him

Patrick is a Senior Software Developer at Rock Solid Knowledge.

Back to top

We're proud to be a Certified B Corporation, meeting the highest standards of social and environmental impact.

Find out more

Rock Solid Knowledge C2 Vantage Office Park Old Gloucester Road Bristol BS16 1GW

Email address

Email us

Phone

+44 333 939 8119

Made in Bristol