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”.
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>