Estilos Globais – Xamarin.Forms

Olá, neste post irei demonstrar como você pode definir estilos globais em sua aplicação Xamarin.Forms.

“Qual a vantagem de definir estilos globais ?”
Algumas das vantagens são: Evitar a duplicação de estilos em páginas, padronizar as cores da aplicação e deixar o código mais “limpo” (tanto Xaml quanto C#).

A definição de estilos globais será feita no arquivo App.xaml, adicionando um ResourceDictionary dentro de “Application.Resources”.

<?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="Style.App">
<Application.Resources>
<ResourceDictionary>
</ResourceDictionary>
</Application.Resources>
</Application>

view raw
App.xaml
hosted with ❤ by GitHub

 

Cores

Adicione um “Color” e defina um nome para a propriedade x:Key. Vale lembrar que “x” está sendo referenciado de “http://schemas.microsoft.com/winfx/2009/xaml&#8221;.
O valor x:Key será utilizado para atribuir cores aos elementos desejados.
Dentro de “Color” insira a cor desejada em hexadecimal.

<?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="Style.App">
<Application.Resources>
<ResourceDictionary>
<Color x:Key="ColorText">#3030E8</Color>
<Color x:Key="ColorButton">#20E82A</Color>
</ResourceDictionary>
</Application.Resources>
</Application>

view raw
App.xaml
hosted with ❤ by GitHub

 

 

Tipo da Fonte

Defina tipos de fontes para cada plataforma utilizando o “OnPlatform”.

<?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="Style.App">
<Application.Resources>
<ResourceDictionary>
<!–Colors–>
<Color x:Key="ColorText">#3030E8</Color>
<Color x:Key="ColorButton">#20E82A</Color>
<!–Font Families–>
<OnPlatform x:TypeArguments="x:String" x:Key="RegularFontFamily">
<On Platform="Android">sans-serif</On>
<On Platform="iOS">HelveticaNeue</On>
</OnPlatform>
<OnPlatform x:TypeArguments="x:String" x:Key="MediumFontFamily">
<On Platform="Android">sans-serif-medium</On>
<On Platform="iOS">HelveticaNeue-Medium</On>
</OnPlatform>
</ResourceDictionary>
</Application.Resources>
</Application>

view raw
App.xaml
hosted with ❤ by GitHub

 

 

Estilos

Defina estilos a partir das cores e fontes criadas anteriormente utilizando o “Style”, para cada Setter adicionado no Style você pode referenciar utilizando StaticResource ou definir o valor desejado.
Observe que é adicionado um Setter para cada propriedade que deseja customizar.

<?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="DemoTimeLine.App">
<Application.Resources>
<ResourceDictionary>
<!–Colors–>
<Color x:Key="ColorText">#3030E8</Color>
<Color x:Key="ColorButton">#20E82A</Color>
<!–Font Families–>
<OnPlatform x:TypeArguments="x:String" x:Key="RegularFontFamily">
<On Platform="Android">sans-serif</On>
<On Platform="iOS">HelveticaNeue</On>
</OnPlatform>
<OnPlatform x:TypeArguments="x:String" x:Key="MediumFontFamily">
<On Platform="Android">sans-serif-medium</On>
<On Platform="iOS">HelveticaNeue-Medium</On>
</OnPlatform>
<!–Styles–>
<Style x:Key="TitleStyle" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource ColorText}" />
<Setter Property="Font" Value="{StaticResource MediumFontFamily}" />
</Style>
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="TextColor" Value="{StaticResource ColorText}" />
<Setter Property="Font" Value="{StaticResource RegularFontFamily}" />
<Setter Property="BackgroundColor" Value="{StaticResource ColorButton}"/>
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>

view raw
App.xaml
hosted with ❤ by GitHub

 

Aplicando o estilo no Xaml 

Observe a seguir como foi aplicado os estilos criados no arquivo anteriormente.

<?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:DemoTimeLine"
x:Class="Style.MainPage">
<StackLayout HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand">
<Label Text="Welcome to Xamarin.Forms!"
Style="{StaticResource TitleStyle}"/>
<Button Text="Save"
Style="{StaticResource ButtonStyle}"/>
</StackLayout>
</ContentPage>

view raw
MainPage.xaml
hosted with ❤ by GitHub

 

 

Resultado

Screenshot

 

Esse foi apenas um pequeno exemplo de como você pode aplicar estilos globais em suas aplicações Xamarin.Forms.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s