Compartilhar via

Introdução aos Xamarin.Forms estilos

  • Artigo

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:

Aparência do rótulo sem estilos

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 a aparência de um aplicativo 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#:

  • Style as instâncias criadas em XAML normalmente são definidas em um ResourceDictionary que é atribuído à Resources coleção de um controle, página ou à Resources coleção do aplicativo.
  • Style As 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:

  • Style As instâncias definidas no nível de controle só podem ser aplicadas ao controle e a seus filhos.
  • Style As instâncias definidas no nível da página só podem ser aplicadas à página e a seus filhos.
  • As instâncias Style definidas 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 a TargetType e um x:Key valor e definindo a propriedade do Style elemento de destino como a x:Key referência. Para obter mais informações sobre estilos explícitos , consulte Estilos explícitos.
  • Uma instância implícita Style é definida especificando apenas um TargetType. A Style instância será aplicada automaticamente a todos os elementos desse tipo. Observe que as TargetType subclasses do não têm o Style 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 , conforme mostrado no exemplo de Stylecódigo XAML a seguir:

<Label Text="Demonstrating an explicit style" Style="{StaticResource labelStyle}" />

Os estilos mais baixos na hierarquia de exibição têm precedência sobre aqueles definidos mais acima. Por exemplo, a configuração de um Style estilo de Red página definido Label.TextColor como no nível do aplicativo será substituída por um estilo de nível de página definido 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 todos os estilos.

Os artigos desta 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 em tempo de execução e como usar os estilos embutidos incluídos no Xamarin.Forms.

Observação

O que é StyleId?

Antes da Xamarin.Forms versão 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 2.2 introduziu a AutomationId propriedade, que substituiu a StyleId propriedade.