Herencia de estilos en Xamarin.Forms

Download Sample Descargar el ejemplo

Los estilos pueden heredar de otros estilos para reducir la duplicación y habilitar la reutilización.

Herencia de estilos en XAML

La herencia de estilo se realiza estableciendo Style.BasedOn la propiedad en un Style existente. En XAML, esto se logra estableciendo la propiedad en una BasedOn extensión de marcado que hace referencia a un creado StaticResourceStyle previamente. En C#, esto se logra estableciendo la BasedOn propiedad en una instancia de Style .

Los estilos que heredan de un estilo base pueden incluir instancias de nuevas propiedades o usarlas para Setter invalidar estilos del estilo base. Además, los estilos que heredan de un estilo base deben tener como destino el mismo tipo o un tipo que se derive del tipo de destino del estilo base. Por ejemplo, si un estilo base tiene como destino instancias, los estilos basados en el estilo base pueden tener como destino instancias o tipos que derivan de la clase , como las ViewView instancias y ViewLabelButton .

El código siguiente muestra la herencia de estilo explícita en una 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>

tiene baseStyle como destino las instancias de y establece las propiedades y ViewHorizontalOptionsVerticalOptions . no baseStyle se establece directamente en ningún control. En su lugar, labelStyle y buttonStyle heredan de ella, estableciendo valores de propiedad enlazables adicionales. A labelStylebuttonStyle continuación, y se aplican a Label las instancias y a la instancia Button estableciendo sus Style propiedades. El resultado es el aspecto que se muestra en las capturas de pantalla siguientes:

Style inheritance screenshot

Nota

Un estilo implícito se puede derivar de un estilo explícito, pero un estilo explícito no se puede derivar de un estilo implícito.

Respetar la cadena de herencia

Un estilo solo puede heredar de estilos del mismo nivel, o superior, en la jerarquía de vistas. Esto significa que:

  • Un recurso de nivel de aplicación solo puede heredar de otros recursos de nivel de aplicación.
  • Un recurso de nivel de página puede heredar de recursos de nivel de aplicación y otros recursos de nivel de página.
  • Un recurso de nivel de control puede heredar de recursos de nivel de aplicación, recursos de nivel de página y otros recursos de nivel de control.

Esta cadena de herencia se muestra en el ejemplo de código siguiente:

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

En este ejemplo, labelStyle y son recursos de nivel de buttonStyle control, mientras que es un recurso baseStyle de nivel de página. Sin embargo, mientras que y heredan de , no es posible heredar de o , debido a sus respectivas labelStyle ubicaciones en la jerarquía de buttonStylebaseStylebaseStylelabelStylebuttonStyle vistas.

Herencia de estilos en C #

La página de C# equivalente, donde las instancias se asignan directamente a las propiedades de los controles necesarios, se Style muestra en el ejemplo de código Style siguiente:

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 }
            }
        };
    }
}

tiene baseStyle como destino las instancias de y establece las propiedades y ViewHorizontalOptionsVerticalOptions . no baseStyle se establece directamente en ningún control. En su lugar, labelStyle y buttonStyle heredan de ella, estableciendo valores de propiedad enlazables adicionales. A labelStylebuttonStyle continuación, y se aplican a Label las instancias y a la instancia Button estableciendo sus Style propiedades.