Partilhar via

Herança de estilo em Xamarin.Forms

Os estilos podem herdar de outros estilos para reduzir a duplicação e permitir a reutilização.

Herança de estilo em XAML

A herança de estilo é executada definindo a Style.BasedOn propriedade como um Style. Em XAML, isso é feito definindo a BasedOn propriedade como uma StaticResource extensão de marcação que faz referência a um Stylearquivo . Em C#, isso é obtido definindo a BasedOn propriedade como uma Style instância.

Os estilos que herdam de um estilo base podem incluir Setter instâncias para novas propriedades ou usá-las para substituir estilos do estilo base. Além disso, os estilos que herdam de um estilo base devem ter como destino o mesmo tipo ou um tipo que deriva do tipo direcionado pelo estilo base. Por exemplo, se um estilo base for direcionado a View instâncias, os estilos baseados no estilo base poderão ser direcionados View a instâncias ou tipos derivados da View classe, como Label instâncias e Button .

O código a seguir demonstra a herança de estilo explícito em uma página XAML:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.StyleInheritancePage" Title="Inheritance" IconImageSource="xaml.png">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="baseStyle" TargetType="View">
                <Setter Property="HorizontalOptions"
                        Value="Center" />
                <Setter Property="VerticalOptions"
                        Value="CenterAndExpand" />
            </Style>
            <Style x:Key="labelStyle" TargetType="Label"
                   BasedOn="{StaticResource baseStyle}">
                ...
                <Setter Property="TextColor" Value="Teal" />
            </Style>
            <Style x:Key="buttonStyle" TargetType="Button"
                   BasedOn="{StaticResource baseStyle}">
                <Setter Property="BorderColor" Value="Lime" />
                ...
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <Label Text="These labels"
                   Style="{StaticResource labelStyle}" />
            ...
            <Button Text="So is the button"
                    Style="{StaticResource buttonStyle}" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

As baseStyle instâncias de destino View e define as HorizontalOptions propriedades and VerticalOptions . O baseStyle não é definido diretamente em nenhum controle. Em vez disso, labelStyle e buttonStyle herdam dele, definindo valores de propriedade associáveis adicionais. Os labelStyle e buttonStyle são então aplicados às instâncias e Button instânciasLabel, definindo suas Style propriedades. Isso resulta na aparência mostrada nas capturas de tela seguir:

Captura de tela de herança de estilo

Observação

Um estilo implícito pode ser derivado de um estilo explícito, mas um estilo explícito não pode ser derivado de um estilo implícito.

Respeitando a cadeia de herança

Um estilo só pode herdar de estilos no mesmo nível ou acima na hierarquia de exibição. Isso significa que:

  • Um recurso de nível de aplicativo só pode herdar de outros recursos de nível de aplicativo.
  • Um recurso de nível de página pode herdar de recursos de nível de aplicativo e outros recursos de nível de página.
  • Um recurso de nível de controle pode herdar de recursos de nível de aplicativo, recursos de nível de página e outros recursos de nível de controle.

Essa cadeia de herança é demonstrada 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.StyleInheritancePage" Title="Inheritance" IconImageSource="xaml.png">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="baseStyle" TargetType="View">
              ...
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <StackLayout.Resources>
                <ResourceDictionary>
                    <Style x:Key="labelStyle" TargetType="Label" BasedOn="{StaticResource baseStyle}">
                      ...
                    </Style>
                    <Style x:Key="buttonStyle" TargetType="Button" BasedOn="{StaticResource baseStyle}">
                      ...
                    </Style>
                </ResourceDictionary>
            </StackLayout.Resources>
            ...
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Neste exemplo, labelStyle and buttonStyle são recursos de nível de controle, while baseStyle é um recurso de nível de página. No entanto, while labelStyle e buttonStyle inherit from , não é possível baseStyle herdar de labelStyle ou buttonStyle, devido às suas respectivas localizações na hierarquia de baseStyleexibição.

Herança de estilo em C#

A página C# equivalente, em que Style as Style instâncias são atribuídas diretamente às propriedades dos controles necessários, é mostrada no seguinte exemplo de código:

public class StyleInheritancePageCS : ContentPage
{
    public StyleInheritancePageCS ()
    {
        var baseStyle = new Style (typeof(View)) {
            Setters = {
                new Setter {
                    Property = View.HorizontalOptionsProperty, Value = LayoutOptions.Center    },
                ...
            }
        };

        var labelStyle = new Style (typeof(Label)) {
            BasedOn = baseStyle,
            Setters = {
                ...
                new Setter { Property = Label.TextColorProperty, Value = Color.Teal    }
            }
        };

        var buttonStyle = new Style (typeof(Button)) {
            BasedOn = baseStyle,
            Setters = {
                new Setter { Property = Button.BorderColorProperty, Value =    Color.Lime },
                ...
            }
        };
        ...

        Content = new StackLayout {
            Children = {
                new Label { Text = "These labels", Style = labelStyle },
                ...
                new Button { Text = "So is the button", Style = buttonStyle }
            }
        };
    }
}

As baseStyle instâncias de destino View e define as HorizontalOptions propriedades and VerticalOptions . O baseStyle não é definido diretamente em nenhum controle. Em vez disso, labelStyle e buttonStyle herdam dele, definindo valores de propriedade associáveis adicionais. Os labelStyle e buttonStyle são então aplicados às instâncias e Button instânciasLabel, definindo suas Style propriedades.

  • Last updated on