Xamarin Forms - Apresentando o FlexLayout - IV

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

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

Veremos agora como exibir um catálogo de itens usando o FlexLayout inseridos dentro de um Frame que estará inserido em um ScrollView.

Vamos definir neste exemplo um arquivo de recursos(Resources) onde iremos definir algumas configurações das views (Label, Image e Button) usadas na página.

Neste projeto as imagens exibidas foram colocadas na pasta Resources/drawable do projeto Android.

  • 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 FlexLayoutPage3.xaml. Para poder exibir esta página basta alterar o código do arquivo App.xaml.cs conforme abaixo:

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

    Exibindo itens de catálogo com o FlexLayout

    Vamos iniciar definindo as configurações que iremos aplicar em cada view usando um Resources:

     <ContentPage.Resources>
        <Style TargetType="Frame">
            <Setter Property="BackgroundColor" Value="LightYellow" />
            <Setter Property="BorderColor" Value="Blue" />
            <Setter Property="Margin" Value="10" />
            <Setter Property="CornerRadius" Value="15" />
        </Style>
            <Style TargetType="Label">
            <Setter Property="Margin" Value="0, 4" />
        </Style>
            <Style x:Key="headerLabel" TargetType="Label">
            <Setter Property="Margin" Value="0, 8" />
            <Setter Property="FontSize" Value="Large" />
            <Setter Property="TextColor" Value="Blue" />
        </Style>
            <Style TargetType="Image">
            <Setter Property="FlexLayout.Order" Value="-1" />
            <Setter Property="FlexLayout.AlignSelf" Value="Center" />
        </Style>
            <Style TargetType="Button">
            <Setter Property="Text" Value="Aprenda Mais" />
            <Setter Property="FontSize" Value="Large" />
            <Setter Property="TextColor" Value="White" />
            <Setter Property="BackgroundColor" Value="Green" />
            <Setter Property="BorderRadius" Value="20" />
        </Style>
    </ContentPage.Resources>

    O estilo implícito para a view Image inclui as configurações de duas propriedades vinculáveis anexadas de Flexlayout:

    <Style TargetType="Image">
    <Setter Property="FlexLayout.Order" Value="-1" />
    <Setter Property="FlexLayout.AlignSelf" Value="Center" />
    </Style>

    A configuração de Order com valor igual a –1 faz com que a imagem seja exibida primeiro em cada uma dos FlexLayout aninhados, independentemente de sua posição dentro da coleção de filhos.

    A propriedade AlignSelf igual a Center faz com que a imagem seja centralizada dentro de FlexLayout. Isso substitui a configuração da propriedade AlignItems que tem um valor padrão de Stretch, o que significa que as views Label e Button filhas são ampliadas para a largura total do FlexLayout.

    A seguir o código que cria exibe 3 paneis roláveis  com texto e imagens dos macacos:

    <ScrollView Orientation="Both">
        <FlexLayout>
            <Frame WidthRequest="300"  HeightRequest="480">
                    <FlexLayout Direction="Column">
                    <Label Text="Macaco Sentado"
                           Style="{StaticResource headerLabel}" />
                    <Label Text="Este macaco esta descontraído e relaxado, e gosta de ver o mundo passar." />
                    <Label Text="  &#x2022; Não faz muito barulho" />
                    <Label Text="  &#x2022; Sorri misteriosamente com frequência" />
                    <Label Text="  &#x2022; Dorme sentado" />
                    <Image Source="SeatedMonkey.jpg"
                           WidthRequest="180"
                           HeightRequest="180" />
                    <Label FlexLayout.Grow="1" />
                    <Button />
                </FlexLayout>
            </Frame>
                <Frame WidthRequest="300"   HeightRequest="480">
                    <FlexLayout Direction="Column">
                    <Label Text="Banana de Macaco"
                           Style="{StaticResource headerLabel}" />
                    <Label Text="Observe este macaco comer esta banana gigante." />
                    <Label Text="  &#x2022; Mais divertido que um barril de macacos" />
                    <Label Text="  &#x2022; A banana não esta inclusa" />
                    <Image Source="Banana.jpg"
                           WidthRequest="240"
                           HeightRequest="180" />
                    <Label FlexLayout.Grow="1" />
                    <Button />
                </FlexLayout>
            </Frame>
                <Frame WidthRequest="300" HeightRequest="480">
                    <FlexLayout Direction="Column">
                    <Label Text="Macaco de Face"
                           Style="{StaticResource headerLabel}" />
                    <Label Text="Este macaco reage apropriadamente a afirmações e ações ridículas." />
                    <Label Text="  &#x2022; Cínico mas não inamistoso" />
                    <Label Text="  &#x2022; Sete variedade de caretas" />
                    <Label Text="  &#x2022; Não ria de suas piadas" />
                    <Image Source="FacePalm.jpg"
                           WidthRequest="180"
                           HeightRequest="180" />
                    <Label FlexLayout.Grow="1" />
                    <Button />
                </FlexLayout>

            </Frame>
        </FlexLayout>
    </ScrollView>

    Temos um leaiute FlexLayout definido dentro de um ScrollView.  A seguir temos 3 Frames cada um contendo um FlexLayout que exibem a imagem e o texto para cada macaco.

    Cada macaco esta em um FlexLayout em um Frame que possui uma altura e largura explicita e que também é filho de um FlexLayout.  

    Executando o projeto e rolando verticalmente a página teremos:

    Pegue o código aqui: XF_FlexLayout4.zip

    "E também todos os que piamente querem viver em Cristo Jesus padecerão perseguições.
    Mas os homens maus e enganadores irão de mal para pior, enganando e sendo enganados."
    2 Timóteo 3:12,13

    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