Introdução aos Xamarin.Forms estilos
Os estilos permitem que a aparência dos elementos visuais seja personalizada. Os estilos são definidos para um tipo específico e contêm valores para as propriedades disponíveis nesse tipo.
Xamarin.Forms os aplicativos geralmente contêm vários controles que têm uma aparência idêntica. Por exemplo, um aplicativo pode ter várias Label instâncias que têm as mesmas opções de fonte e opções de layout, conforme mostrado no exemplo de código XAML a seguir:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Styles.NoStylesPage"
Title="No Styles"
IconImageSource="xaml.png">
<ContentPage.Content>
<StackLayout Padding="0,20,0,0">
<Label Text="These labels"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
FontSize="Large" />
<Label Text="are not"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
FontSize="Large" />
<Label Text="using styles"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
FontSize="Large" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
O exemplo de código a seguir mostra a página equivalente criada em C#:
public class NoStylesPageCS : ContentPage
{
public NoStylesPageCS ()
{
Title = "No Styles";
IconImageSource = "csharp.png";
Padding = new Thickness (0, 20, 0, 0);
Content = new StackLayout {
Children = {
new Label {
Text = "These labels",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.CenterAndExpand,
FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
},
new Label {
Text = "are not",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.CenterAndExpand,
FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
},
new Label {
Text = "using styles",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.CenterAndExpand,
FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
}
}
};
}
}
Cada Label instância tem valores de propriedade idênticos para controlar a aparência do texto exibido pelo Label. Isso resulta na aparência mostrada nas capturas de tela seguir:
Definir a aparência de cada controle individual pode ser repetitivo e propenso a erros. Em vez disso, um estilo pode ser criado que define a aparência e, em seguida, aplicado aos controles necessários.
Criar um estilo
A classe Style agrupa uma coleção de valores de propriedade em um objeto que pode ser aplicado a várias instâncias de elementos visuais. Isso ajuda a reduzir a marcação repetitiva e permite que uma aparência de aplicativos seja alterada com mais facilidade.
Embora os estilos tenham sido projetados principalmente para aplicativos baseados em XAML, eles também podem ser criados em C#:
StyleAs instâncias criadas em XAML normalmente são definidas em umResourceDictionaryatribuído àResourcescoleção de um controle, página ou àResourcescoleção do aplicativo.StyleAs instâncias criadas em C# normalmente são definidas na classe da página ou em uma classe que pode ser acessada globalmente.
Escolher em que local definir um Style afeta o local em que ele pode ser usado:
Styleinstâncias definidas no nível de controle só podem ser aplicadas ao controle e aos filhos.Styleas instâncias definidas no nível da página só podem ser aplicadas à página e aos filhos.- As instâncias
Styledefinidas no nível do aplicativo podem ser aplicadas em todo o aplicativo.
Cada instância de Style contém uma coleção de um ou mais objetos Setter, com cada Setter tendo Property e Value. O Property é o nome da propriedade vinculável do elemento ao qual o estilo é aplicado e o Value é o valor aplicado à propriedade.
Cada Style instância pode ser explícita ou implícita:
- Uma instância explícita
Styleé definida especificando um e umTargetTypex:Keyvalor e definindo a propriedade do elemento deStyledestino como referênciax:Key. Para obter mais informações sobre estilos explícitos , consulte Estilos explícitos. - Uma instância implícita
Styleé definida especificando apenas umTargetType. EmStyleseguida, a instância será aplicada automaticamente a todos os elementos desse tipo. Observe que as subclasses doTargetTypenão têmStyleo aplicado automaticamente. Para obter mais informações sobre estilos implícitos , consulte Estilos implícitos.
Ao criar um Style, a propriedade TargetType é sempre necessária. O exemplo de código a seguir mostra um estilo explícito (observe o x:Key) criado em XAML:
<Style x:Key="labelStyle" TargetType="Label">
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
<Setter Property="FontSize" Value="Large" />
</Style>
Para aplicar um Style, o objeto de destino deve ser um VisualElement que corresponda ao TargetType valor da propriedade do Style, conforme mostrado no seguinte exemplo de código XAML:
<Label Text="Demonstrating an explicit style" Style="{StaticResource labelStyle}" />
Estilos mais baixos na hierarquia de exibição têm precedência sobre aqueles definidos mais acima. Por exemplo, definir um Style que define Label.TextColor como Red no nível do aplicativo será substituído por um estilo de nível de página que define Label.TextColor como Green. Da mesma forma, um estilo de nível de página será substituído por um estilo de nível de controle. Além disso, se Label.TextColor for definido diretamente em uma propriedade de controle, isso terá precedência sobre qualquer estilo.
Os artigos nesta seção demonstram e explicam como criar e aplicar estilos explícitos e implícitos , como criar estilos globais, herança de estilo, como responder a alterações de estilo no runtime e como usar os estilos internos incluídos no Xamarin.Forms.
Observação
O que é StyleId?
Antes da Xamarin.Forms 2.2, a StyleId propriedade era usada para identificar elementos individuais em um aplicativo para identificação em testes de interface do usuário e em mecanismos de tema como o Pixate. No entanto, Xamarin.Forms a 2.2 introduziu a AutomationId propriedade , que substituiu a StyleId propriedade .