Xamarin Forms - Apresentando o FlexLayout - III

 Neste artigo vou apresentar os conceitos sobre o FlexLayout que foi  introduzido na versão 3.0 do Xamarin Forms.

Continuando a segunda parte do artigo vamos continuar abordando os recursos do FlexLayout.

Veremos agora um layout padrão conhecido como Santo graal (um leiaute de 3 colunas) que consiste em uma cabeçalho na parte superior da página e rodapé na parte inferior, ambos estendendo a largura total da página.

Ocupando o centro da página esta o conteúdo principal, geralmente com um menu em colunas à esquerda das informações de conteúdo, informações suplementares à direita.

Veremos um implementação simples deste leiaute usando o FlexLayout aninhado com outro FlexLayout.

  • Recursos Usados

    Usando o projeto Xamarin.Forms

    Vamos usar o projeto  XF_FlexLayout1 criado no artigo anterior e incluir uma nova Content Page com o nome FlexLayoutPage2.xaml. Para poder exibir esta página basta alterar o código do arquivo App.xaml.cs conforme abaixo:

    ....
	public App ()
	{
		InitializeComponent();
		MainPage = new FlexLayoutPage2();
	}
...

    Usando o Layout de página com o FlexLayout

    O código XAML abaixo define o leaiute básico conhecido como Santo Graal:

    A navegação de itens e a área lateral são renderizados em uma view BoxView à esquerda e à direita.(barras laterais azul e verde)

     <!-- Navigation items-->
    <BoxView FlexLayout.Basis="50"
    FlexLayout.Order="-1"
    Color="Blue" />

    <!-- Aside items -->
    <BoxView FlexLayout.Basis="50" Color="Green" />

    O primeiro FlexLayout no arquivo XAML possui um eixo principal vertical e contém três filhos (Label(Header), FlexLayout e Label(Footer)) organizados em uma coluna :  <FlexLayout Direction="Column">

    A seguir usamos 3 propriedades vinculáveis (bindable) :

    1. Grow - A propriedade Grow é definida no Layout aninhado (Body) e, na Label filha(CONTENT) que representa o conteúdo.
      Essa propriedade é do tipo float e tem um valor padrão igual a 0. Quando definida para um valor positivo, todo o espaço restante no eixo principal é alocado para esse item e para os irmãos com valores positivos de Grow. O espaço é alocado proporcionalmente para os valores.
       

    2. Order - A propriedade Order esta definida no primeiro BoxView. Esta propriedade é um inteiro com um valor padrão igual a 0. Você pode usar essa propriedade para alterar a ordem de layout.
      Definindo a propriedade Order na primeira BoxView para um valor menor do que seus outros irmãos, faz com que ela seja exibida como o primeiro item na linha. Da mesma forma, você pode garantir que um item seja exibido por último, definindo o valor de Order para um valor maior do que seus irmãos.
       

    3. Basis - A propriedade Basis é definida nos dois BoxView para fornecer a eles uma largura de 50 pixels. Essa propriedade é do tipo FlexBasis, uma estrutura que define uma propriedade estática do tipo FlexBasis denominado Auto, que é o valor padrão.
      Você pode usar Basis para especificar um tamanho de pixel ou uma porcentagem que indica quanto espaço o item ocupa no eixo principal. Ele é chamado basis porque especifica um tamanho do item que é a base de todo o layout subsequente.

    Na próxima parte do artigo vou continuar a tratar do leiaute FlexLayout.

    Pegue o código aqui: XF_FlexLayout3.zip

    "Respondeu Jesus: O meu reino não é deste mundo; se o meu reino fosse deste mundo, pelejariam os meus servos, para que eu não fosse entregue aos judeus; mas agora o meu reino não é daqui."
    João 18:36

    Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

    Quer migrar para o VB .NET ?

    Quer aprender C# ??

    Quer aprender os conceitos da Programação Orientada a objetos ?

    Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

      Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

    Referências:

    José Carlos Macoratti