Xamarin Forms - Layouts elegantes

  Hoje vou apresentar como criar um layout simples e elegante no Xamarin Forms.

Se você não conhece o Xamarin Forms visite a seção Xamarin Forms do site onde vai encontrar dezenas de artigos apresentando os principais recursos dessa tecnologia.

Se você é um desenvolvedor .NET o Xamarin Forms permite que você utilize a sua experiência com a plataforma e com a linguagem C# para criar aplicações multiplataforms usando o Xamarin Forms.

Assim você cria uma aplicação que pode rodar tanto no Android como no iOS escrevendo apenas um código.

Hoje vou apresentar um layout elegante feito no Xamarin Forms para mostrar as possibilidades desta ferramenta.

Vamos exibir uma tela de apresentação de uma cafeteria com imagens e texto usando os layouts:

Então vamos à parte prática...

Recursos usados:

Criando o projeto no Visual Studio 2017 Community

Abra o  VS 2017 Community e clique em New Project e a seguir escolha Cross Platform -> Mobile App (Xamarin.Forms) e informe o nome XF_Layouts;

A seguir selecione a Plataforma (eu marquei somente Android) e escolha a estratégia de compartilhamento que será .NET Standard.

Clique no botão OK.

Pronto, nosso projeto já esta criado.

Preparando a imagem para ser exibida no Android

Para exibir imagens locais os arquivos de imagens locais possuem pastas específicas da plataforma em seus respectivos projetos. O Android :

Então vamos incluir na pasta Resources/drawable do projeto Android a imagem que vamos usar no Layout. Eu vou usar a imagem cafe2.jpg mas fique a vontade para usar a imagem que você desejar.

Definindo o código da página MainPage

Abra o arquivo MainPage.xaml e inclua o código abaixo:

<?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:local="clr-namespace:XF_Layouts1"
             x:Class="XF_Layouts1.MainPage">

    <AbsoluteLayout x:Name="ViewLayout">
        <Image Source="cafe2.jpg" Aspect="AspectFill" AbsoluteLayout.LayoutBounds="1,1,1,1"
               AbsoluteLayout.LayoutFlags="All" />
        <AbsoluteLayout x:Name="ViewControls" AbsoluteLayout.LayoutBounds="1,1,1,.50"
                        AbsoluteLayout.LayoutFlags="All" BackgroundColor="#66000000" Margin="10,10,10,10">
            <StackLayout Orientation="Vertical" Margin="20,20,10,10" BackgroundColor="Transparent"
                         AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1">
                <Grid Margin="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Label Text="Mocha Caramelo Frappuccino" TextColor="White"             
                            HorizontalOptions="CenterAndExpand"
                           VerticalTextAlignment="Center" Grid.Column="0" Grid.ColumnSpan="3" Grid.RowSpan="2" />
                    <Button Text="Creme" BackgroundColor="#77000000" BorderRadius="4" BorderColor="White"
                            BorderWidth="2" TextColor="White" FontSize="10" Grid.Row="0" Grid.Column="3" />
                    <Button Text="Chantili" FontSize="10" BackgroundColor="#77000000" BorderRadius="4"
                            BorderColor="White"
                            BorderWidth="2" TextColor="White" Grid.Row="1" Grid.Column="3" />
                </Grid>
                <Grid Margin="1">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Button Text="Grande" FontSize="Small" BackgroundColor="#77000000" BorderRadius="4"
                            BorderColor="White"
                            BorderWidth="2" TextColor="White" HorizontalOptions="FillAndExpand" Grid.Column="0" />
                    <Button Text="Médio"  FontSize="Small" BackgroundColor="#77000000" BorderRadius="4"
                            BorderColor="White"
                            BorderWidth="2" TextColor="White" HorizontalOptions="FillAndExpand" Grid.Column="1" />
                    <Button Text="Pequeno"  FontSize="Small" BackgroundColor="#77000000" BorderRadius="4"
                             BorderColor="White"
                            BorderWidth="2" TextColor="White" HorizontalOptions="FillAndExpand" Grid.Column="2" />
                </Grid>
            </StackLayout>
        </AbsoluteLayout>
    </AbsoluteLayout>

</ContentPage>

Abaixo vemos o resultado da exibição do projeto executado no emulador Android:

Nada mal.

E isso é apenas um layout bem simples, mas podemos criar layouts mais sofisticados no Xamarin Forms e vou continuar a mostrar isso em outro artigo.

Pegue o projeto compartilhado aqui: XF_Layouts1.zip

(disse Jesus)"Aquele que tem os meus mandamentos e os guarda esse é o que me ama; e aquele que me ama será amado de meu Pai, e eu o amarei, e me manifestarei a ele."
João 14:21

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