Xamarin.Forms – Usando layouts vinculáveis

 

Por Javier Suárez

Traduzido por Adriano D’lucca

 ⠀

Introdução

Em Xamarin.Forms, temos um tipo especial de View chamado Layout . Um Layout é um contêiner para outros elementos que permitem ajudar a posicionar e gerenciar o tamanho dos elementos que ele contém. Em Xamarin.Forms temos uma grande variedade de Layouts:

Layouts em Xamarin.Forms

Os mais usados ​​são o StackLayout e o Grid, e é comum fazer uma composição de vários, bem como usá-los para criar controles, etc. Por exemplo, às vezes, a combinação de ScrollView e StackLayout é usada junto com o ContentViews para criar uma pequena lista de elementos horizontais.

Layout Bindable

Com a chegada do Xamarin.Forms 3.5 pre2, o Layout Bindable chega . Em todas as classes derivadas de Layout <T>, agora temos as seguintes propriedades:

  • ItemsSource: do tipo  IEnumerable , suporta o link de uma coleta de dados.
  • ItemTemplate: Do tipo DataTemplate , permitirá definir a aparência visual de cada elemento.
  • ItemTemplateSelector: Do tipo  ItemTemplateSelector , permite escolher entre diferentes modelos para cada elemento com base em determinadas condições.

As propriedades são familiares conhecendo outros controles em Xamarin.Forms como o ListView.

Você se lembra do exemplo que mencionamos da listagem horizontal? . Usando Layout Bindable tudo é simplificado.

Uso básico

Da interface que estamos replicando, o caso mais simples é a lista de amigos.

 

 

 


O resultado:

Simples, certo?

Usando layout de ligação com DataTemplateSelector

Passamos para uma necessidade mais complexa, a galeria. Na galeria, precisamos mostrar elementos com tamanhos diferentes.

O que podemos fazer?

Vamos analisar o que precisamos:

  • Os elementos fazem embrulho.
  • Os elementos são organizados da esquerda para a direita.
  • Existem imagens de tamanhos diferentes.

O FlexLayout nos permitirá as duas opções. Nós definimos o controle:

 

 

Usamos um estilo para ativar o Wrapping, etc. Em seguida, usaremos o layout Bindable para evitar a definição de N imagens dentro do layout.

 

Tendo a necessidade de ter imagens de tamanhos diferentes na galeria, usaremos a propriedade ItemTemplateSelector para usar modelos diferentes:

 

O resultado:

Vamos ver o resultado completo:

Você pode encontrar o exemplo no GitHub:

Veja o GitHub

Fonte: javiersuarezruiz.wordpress.com/xamarin-forms-utilizando-bindable-layouts/

 

RelatedPost

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *