Xamarin.Forms -  Aplicando estilos - II
Neste artigo vou mostrar como criar e aplicar estilos usando o conceito de estilos em aplicações Xamarin Forms.   

No artigo anterior apresentei, de forma bem resumida, o conceito de estilos em aplicações Xamarin Forms e neste artigo vou mostrar como usar na prática este recurso.



 Criando e consumindo Estilos - StaticResource

Abra o Visual Studio Community 2017 e clique em New Project;

Selecione Visual C# -> Cross-Platform e o template Cross Plataform App (Xamarin);

Informe o nome XF_Estilos e clique no botão OK;

A seguir marque o template Blank App e as opções Xamarin.Forms e Portable Class Library(PCL) e clique em OK;

Aplicando estilos

Vamos supor que o código da página MainPage.xaml possua o seguinte código :

<?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_Estilos"
             x:Class="XF_Estilos.MainPage">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Nome" BackgroundColor="White" TextColor="Blue" FontSize="20" />
            <Entry BackgroundColor="White" TextColor="Blue" />
            <Label Text="Sobrenome" BackgroundColor="White" TextColor="Blue" FontSize="20" />
            <Entry BackgroundColor="White" TextColor="Blue" />
            <Label Text="Endereco" BackgroundColor="White" TextColor="Blue" FontSize="20" />
            <Entry BackgroundColor="White" TextColor="Blue" />
            <Label Text="Cidade" BackgroundColor="White" TextColor="Blue" FontSize="20" />
            <Entry BackgroundColor="White" TextColor="Blue" />
            <Label Text="Estado" BackgroundColor="White" TextColor="Blue" FontSize="20" />
            <Entry BackgroundColor="White" TextColor="Blue" />
            <Label Text="Email" BackgroundColor="White" TextColor="Blue" FontSize="20" />
            <Entry BackgroundColor="White" TextColor="Blue" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>
  

 

Observe que temos muitas propriedades com valores repetidos, e vamos definir um estilo e aplicar o estilo usando um ResourceDictionary a nível de página, para aplicar os valores a todas as views da página.

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

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XF_Estilos.App">
<Application.Resources>
           <!-- Application resource dictionary -->
            <ResourceDictionary>
               <Style x:Key="labelStyle" TargetType="Label">
                   <Setter Property="BackgroundColor" Value="White" />
                   <Setter Property="FontSize" Value="20" />
                   <Setter Property="TextColor" Value="Blue" />
               </Style>
           </ResourceDictionary>
    </Application.Resources>
</Application>

 

Definimos um estilo definindo as propriedades BackgroundColor, FontSize e TextColor usando o identificador labelStyle para ser aplicado a Label. Note que definimos o estilo usando um ResourceDictionary.

Vamos agora aplicar o estilo ao nosso código no arquivo MainPage.xaml conforme mostrado a seguir:

<?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_Estilos"
             x:Class="XF_Estilos.MainPage">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Nome" Style="{StaticResource labelStyle}" />
            <Entry BackgroundColor="White" TextColor="Blue" />
            <Label Text="Sobrenome" Style="{StaticResource labelStyle}" />
            <Entry BackgroundColor="White" TextColor="Blue" />
            <Label Text="Endereco" Style="{StaticResource labelStyle}" />
            <Entry BackgroundColor="White" TextColor="Blue" />
            <Label Text="Cidade" Style="{StaticResource labelStyle}" />
            <Entry BackgroundColor="White" TextColor="Blue" />
            <Label Text="Estado" Style="{StaticResource labelStyle}" />
            <Entry BackgroundColor="White" TextColor="Blue" />
            <Label Text="Email" Style="{StaticResource labelStyle}" />
            <Entry BackgroundColor="White" TextColor="Blue" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Melhorou um pouco mas podemos melhorar ainda mais...

Vamos criar um estilo para as views Entry e alterar o código do arquivo App.xaml conforme abaixo:

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XF_Estilos.App">
	<Application.Resources>
         <!-- Application resource dictionary -->
        <ResourceDictionary>
            <Style TargetType="Label">
                <Setter Property="BackgroundColor" Value="White" />
                <Setter Property="FontSize" Value="20" />
                <Setter Property="TextColor" Value="Blue" />
            </Style>
            <Style TargetType="Entry">
                <Setter Property="BackgroundColor" Value="Yellow" />
                <Setter Property="FontAttributes" Value="Italic" />
                <Setter Property="TextColor" Value="Blue" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

 

Observe que agora estamos usando estilos implícitos onde definimos apenas o TargetType e não estamos definindo um identificador (x:key) para os estilos.

Agora basta alterar o código do arquivo MainPage.xaml conforme a seguir:

<?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_Estilos"
             x:Class="XF_Estilos.MainPage">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Nome"  />
            <Entry />
            <Label Text="Sobrenome" />
            <Entry />
            <Label Text="Endereco"  />
            <Entry  />
            <Label Text="Cidade"  />
            <Entry  />
            <Label Text="Estado"  />
            <Entry  />
            <Label Text="Email"  />
            <Entry />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Agora sim, vemos que o código XAML ficou muito mais simples.

Na próxima parte do artigo veremos como usar estilos com o recurso DynamicResource.

Porque Deus enviou o seu Filho ao mundo, não para que condenasse o mundo, mas para que o mundo fosse salvo por ele. Quem crê nele não é condenado; mas quem não crê já está condenado, porquanto não crê no nome do unigênito Filho de Deus.
João 3:17,18


Referências:

José Carlos Macoratti