Xamarin Forms - Usando Bindable Layouts
 Hoje vou apresentar o recurso Bindable Layouts introduzido na versão 3.5 do Xamarin Forms.

Os Bindable Layouts ou layouts vinculáveis permitem que qualquer classe de layout derivada da classe Layout<T> gere seu conteúdo vinculando-se a uma coleção de itens, com a opção de definir a aparência de cada item com um DataTemplate.

Os layouts vinculáveis são fornecidos pela classe BindableLayout, que expõe as seguintes propriedades anexadas:

Além disso, a classe BindableLayout expõe as seguintes propriedades vinculáveis:

EmptyView - Define a string ou view que será exibida quando a propriedade ItemsSource for nula ou quando a coleção especificada pela propriedade ItemsSource for nula ou vazia. O valor padrão é null.

EmptyViewTemplate - Especifica o DataTemplate que será exibido quando a propriedade ItemsSource for nula ou quando a coleção especificada pela propriedade ItemsSource for nula ou vazia. O valor padrão é null.

Todas essas propriedades podem ser anexadas às classes AbsoluteLayout, FlexLayout, Grid, RelativeLayout e StackLayout, todas derivadas da classe Layout<T>.

Em qual cenário este recurso pode ser útil ?

Quando você precisa repetir uma interface do usuário específica com conteúdo ou dados diferentes, embora você possa usar um ListView, você pode obter mais flexibilidade no Layout usando StackLayout, Grid, FlexLayout, AbsoulteLayout e RelativeLayout.

O problema ao usar esses leiautes é que não tínhamos flexibilidade para fornecer dados em tempo real a essas interfaces de usuário pois tínhamos que criar cada filho desses layouts e vincular seus dados.

Agora usando o recurso Bindable Layouts podemos configurar as propriedades ItemsSource e ItemTemplate nesses Layouts e teremos uma interface do usuário criada para todos os dados no ItemsSource que serão adicionadas como filho.

Dessa forma, para preencher com dados um layout vinculável basta definir sua propriedade ItemsSource para qualquer coleção que implemente IEnumerable e anexá-la a uma classe derivada de Layout<T>:

Ex: <Grid BindableLayout.ItemsSource="{Binding Items}" />

Vejamos a seguir alguns exemplo de como usar Bindable Layouts.

recursos usados:

Criando o projeto Xamarin Forms

Vamos criar um novo projeto Xamarin Forms no VS 2019 Community com o nome XF_BindableLayouts1.

Você pode ver como criar um projeto no Xamarin Forms neste link: Criar Projeto Xamarin Forms

1- Usando um StackLayout

Neste exemplo vamos usar o StackLayout com o recurso Bindable Layouts para repetir Labels coloridas com o nome da cor.

Crie no projeto compartilhado as pastas : Models, ViewModels e Views

Na pasta Models cria a classe Cor:

    public class Cor
    {
        public Color MinhaCor { get; set; }
        public string NomeCor { get; set; }
    }

Na pasta ViewModels crie a classe CoresViewModel:

using System.Collections.ObjectModel;
using System.Drawing;
using XF_BindableLayouts.Models;
namespace XF_BindableLayouts.ViewModels
{
    public class CoresViewModel
    {
        public CoresViewModel()
        {
            Cores = new ObservableCollection<Cor>() {
                new Cor { NomeCor = "Rosa", MinhaCor = Color.DeepPink },
                new Cor { NomeCor = "Vermelho", MinhaCor = Color.Red },
                new Cor { NomeCor = "Crimson", MinhaCor = Color.Crimson },
                new Cor { NomeCor = "Aqua", MinhaCor = Color.Aqua },
                new Cor { NomeCor = "Azul", MinhaCor = Color.DeepSkyBlue },
                new Cor { NomeCor = "Amarelo", MinhaCor = Color.Yellow },
                new Cor { NomeCor = "BurlyWood", MinhaCor = Color.BurlyWood }, 
            };
        }
        public ObservableCollection<Cor> Cores { get; set; }
    }
}

No arquivo MainPage.xaml vamos definir a interface com o usuário aplicando o recurso Bindable Layouts ao StackLayout:

<?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:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="XF_BindableLayouts.MainPage"
             BackgroundColor="AntiqueWhite">
    <ScrollView>
        <StackLayout BindableLayout.ItemsSource="{Binding Cores}">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <Label BackgroundColor="{Binding MinhaCor}"
                       Text="{Binding NomeCor}"
                       FontAttributes="Italic"
                       FontSize="20"
                       VerticalTextAlignment="Center"
                       HorizontalTextAlignment="Center"
                       HeightRequest="105"
                       Margin="25" />
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>
    </ScrollView>
</ContentPage>

Aplicamos o BindableLayout definindo a propriedade ItemsSource que representa a nossa coleção de cores.

A seguir definimos o ItemTemplate e DataTemplate onde vamos usar o controle Label e suas propriedades.

Depois usamos o Data Binding vinculando as propriedades MinhaCor e NomeCor às propriedades da Label.

Observe que envolvemos o StackLayout com um ScrollView para poder rolar a tela.

No arquivo MainPage.xaml.cs inclua o código para definir o BindingContext:

using System.ComponentModel;
using Xamarin.Forms;
using XF_BindableLayouts.ViewModels;
namespace XF_BindableLayouts
{
    [DesignTimeVisible(false)]
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            this.BindingContext = new CoresViewModel();
        }
    }
}

Executando o projeto teremos o resultado abaixo usando o emulador Android:

Conclusão

Os layouts vinculáveis são um recurso interessante mas devem ser usados apenas quando a coleção de itens a ser exibida for pequena e a rolagem e a seleção não forem necessárias.

Embora a rolagem possa ser fornecida envolvendo um layout vinculável em um ScrollView, isso não é recomendado, pois os layouts vinculáveis não possuem virtualização da interface do usuário o que pode trazer problemas de desempenho.

Assim, quando a rolagem for necessária, é mais recomendado usar um ListView ou CollectionView que inclui a virtualização da interface do usuário.

Nota: Embora seja tecnicamente possível anexar um layout vinculável a qualquer classe de layout derivada da classe Layout, isso nem sempre é prático, principalmente para as classes AbsoluteLayout, Grid e RelativeLayout. (da documentação)

Pegue o código do projeto compartilhado aqui :    XF_BindableLayouts.zip

"Se o mundo vos odeia, sabei que, primeiro do que a vós, me odiou a mim.
Se vós fôsseis do mundo, o mundo amaria o que era seu, mas porque não sois do mundo, antes eu vos escolhi do mundo, por isso é que o mundo vos odeia."
João 15:18,19

Referências:

José Carlos Macoratti