Estilos explícitos em Xamarin.Forms
Um estilo explícito é aquele que é aplicado seletivamente aos controles definindo suas propriedades Style.
Criar um estilo explícito em XAML
Para declarar a Style
no nível da página, a ResourceDictionary
deve ser adicionado à página e, em seguida, uma ou mais Style
declarações podem ser incluídas no ResourceDictionary
. Um Style
é tornado explícito dando à sua declaração um atributo x:Key
, o que lhe dá uma chave descritiva no ResourceDictionary
. Os estilos explícitos devem ser aplicados a elementos visuais específicos, definindo suas propriedades Style
.
O exemplo de código a seguir mostra estilos explícitos Label
declarados ResourceDictionary
em XAML em uma página e aplicados às instâncias da página:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.ExplicitStylesPage" Title="Explicit" IconImageSource="xaml.png">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="labelRedStyle" TargetType="Label">
<Setter Property="HorizontalOptions"
Value="Center" />
<Setter Property="VerticalOptions"
Value="CenterAndExpand" />
<Setter Property="FontSize" Value="Large" />
<Setter Property="TextColor" Value="Red" />
</Style>
<Style x:Key="labelGreenStyle" TargetType="Label">
...
<Setter Property="TextColor" Value="Green" />
</Style>
<Style x:Key="labelBlueStyle" TargetType="Label">
...
<Setter Property="TextColor" Value="Blue" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Padding="0,20,0,0">
<Label Text="These labels"
Style="{StaticResource labelRedStyle}" />
<Label Text="are demonstrating"
Style="{StaticResource labelGreenStyle}" />
<Label Text="explicit styles,"
Style="{StaticResource labelBlueStyle}" />
<Label Text="and an explicit style override"
Style="{StaticResource labelBlueStyle}"
TextColor="Teal" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
O ResourceDictionary
define três estilos explícitos Label
que são aplicados às instâncias da página. Cada um Style
é usado para exibir o texto em uma cor diferente, ao mesmo tempo em que define o tamanho da fonte e as opções de layout horizontal e vertical. Cada Style
é aplicado a um Label
diferente definindo suas propriedades Style
usando a extensão de marcação StaticResource
. Isso resulta na aparência mostrada nas capturas de tela seguir:
Além disso, o final Label
tem um Style
aplicado a ele, mas também substitui a TextColor
propriedade por um valor diferente Color
.
Criar um estilo explícito no nível de controle
Além de criar estilos explícitos no nível da página, eles também podem ser criados no nível do controle, conforme mostrado no exemplo de código a seguir:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.ExplicitStylesPage" Title="Explicit" IconImageSource="xaml.png">
<ContentPage.Content>
<StackLayout Padding="0,20,0,0">
<StackLayout.Resources>
<ResourceDictionary>
<Style x:Key="labelRedStyle" TargetType="Label">
...
</Style>
...
</ResourceDictionary>
</StackLayout.Resources>
<Label Text="These labels" Style="{StaticResource labelRedStyle}" />
...
</StackLayout>
</ContentPage.Content>
</ContentPage>
Neste exemplo, as instâncias explícitas Style
são atribuídas à Resources
coleção do StackLayout
controle. Os estilos podem ser aplicados ao controle e seus filhos.
Para obter informações sobre como criar estilos no ResourceDictionary
, consulte Estilos globais.
Criar um estilo explícito em C#
Style
instâncias podem ser adicionadas à coleção de Resources
uma página em C# criando um novo ResourceDictionary
e, em seguida, adicionando as Style
instâncias ao ResourceDictionary
, conforme mostrado no exemplo de código a seguir:
public class ExplicitStylesPageCS : ContentPage
{
public ExplicitStylesPageCS ()
{
var labelRedStyle = new Style (typeof(Label)) {
Setters = {
...
new Setter { Property = Label.TextColorProperty, Value = Color.Red }
}
};
var labelGreenStyle = new Style (typeof(Label)) {
Setters = {
...
new Setter { Property = Label.TextColorProperty, Value = Color.Green }
}
};
var labelBlueStyle = new Style (typeof(Label)) {
Setters = {
...
new Setter { Property = Label.TextColorProperty, Value = Color.Blue }
}
};
Resources = new ResourceDictionary ();
Resources.Add ("labelRedStyle", labelRedStyle);
Resources.Add ("labelGreenStyle", labelGreenStyle);
Resources.Add ("labelBlueStyle", labelBlueStyle);
...
Content = new StackLayout {
Children = {
new Label { Text = "These labels",
Style = (Style)Resources ["labelRedStyle"] },
new Label { Text = "are demonstrating",
Style = (Style)Resources ["labelGreenStyle"] },
new Label { Text = "explicit styles,",
Style = (Style)Resources ["labelBlueStyle"] },
new Label { Text = "and an explicit style override",
Style = (Style)Resources ["labelBlueStyle"], TextColor = Color.Teal }
}
};
}
}
O construtor define três estilos explícitos Label
que são aplicados às instâncias da página. Cada explícito Style
é adicionado ao ResourceDictionary
método using the Add
, especificando uma key
string para se referir à Style
instância. Cada um Style
é aplicado a um diferente Label
, definindo suas Style
propriedades.
No entanto, não há vantagem em usar um ResourceDictionary
aqui. Em vez disso, Style
as Style
instâncias podem ser atribuídas diretamente às propriedades dos elementos visuais necessários e podem ResourceDictionary
ser removidas, conforme mostrado no exemplo de código a seguir:
public class ExplicitStylesPageCS : ContentPage
{
public ExplicitStylesPageCS ()
{
var labelRedStyle = new Style (typeof(Label)) {
...
};
var labelGreenStyle = new Style (typeof(Label)) {
...
};
var labelBlueStyle = new Style (typeof(Label)) {
...
};
...
Content = new StackLayout {
Children = {
new Label { Text = "These labels", Style = labelRedStyle },
new Label { Text = "are demonstrating", Style = labelGreenStyle },
new Label { Text = "explicit styles,", Style = labelBlueStyle },
new Label { Text = "and an explicit style override", Style = labelBlueStyle,
TextColor = Color.Teal }
}
};
}
}
O construtor define três estilos explícitos Label
que são aplicados às instâncias da página. Cada um Style
é usado para exibir o texto em uma cor diferente, ao mesmo tempo em que define o tamanho da fonte e as opções de layout horizontal e vertical. Cada um Style
é aplicado a um diferente Label
, definindo suas Style
propriedades. Além disso, o final Label
tem um Style
aplicado a ele, mas também substitui a TextColor
propriedade por um valor diferente Color
.