Herencia de estilo en:::no-loc(Xamarin.Forms):::Style Inheritance in :::no-loc(Xamarin.Forms):::

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

Los estilos pueden heredar de otros estilos para reducir la duplicación y habilitar la reutilización.Styles can inherit from other styles to reduce duplication and enable reuse.

Herencia de estilo en XAMLStyle inheritance in XAML

La herencia de estilo se realiza estableciendo la Style.BasedOn propiedad en un existente Style .Style inheritance is performed by setting the Style.BasedOn property to an existing Style. En XAML, esto se logra estableciendo la BasedOn propiedad en una StaticResource extensión de marcado que hace referencia a un creado previamente Style .In XAML, this is achieved by setting the BasedOn property to a StaticResource markup extension that references a previously created Style. En C#, esto se consigue estableciendo la BasedOn propiedad en una Style instancia de.In C#, this is achieved by setting the BasedOn property to a Style instance.

Los estilos que heredan de un estilo base pueden incluir Setter instancias de nuevas propiedades o usarse para invalidar estilos del estilo base.Styles that inherit from a base style can include Setter instances for new properties, or use them to override styles from the base style. 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.In addition, styles that inherit from a base style must target the same type, or a type that derives from the type targeted by the base style. Por ejemplo, si un estilo base tiene como View destino instancias, los estilos basados en el estilo base pueden tener como destino View instancias o tipos que derivan de la View clase, como Label instancias de y Button .For example, if a base style targets View instances, styles that are based on the base style can target View instances or types that derive from the View class, such as Label and Button instances.

En el código siguiente se muestra la herencia de estilo explícita en una página XAML:The following code demonstrates explicit style inheritance in a XAML page:

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

Las baseStyle instancias de destino View y establecen las HorizontalOptions VerticalOptions propiedades y.The baseStyle targets View instances, and sets the HorizontalOptions and VerticalOptions properties. baseStyleNo se establece directamente en ningún control.The baseStyle is not set directly on any controls. En su lugar, labelStyle y buttonStyle heredan de él y establecen valores de propiedades enlazables adicionales.Instead, labelStyle and buttonStyle inherit from it, setting additional bindable property values. labelStyleY buttonStyle se aplican a las Label instancias y la Button instancia, estableciendo sus Style propiedades.The labelStyle and buttonStyle are then applied to the Label instances and Button instance, by setting their Style properties. El resultado es el aspecto que se muestra en las capturas de pantalla siguientes:This results in the appearance shown in the following screenshots:

Captura de pantalla de herencia de estiloStyle inheritance screenshot

Nota

Un estilo implícito se puede derivar de un estilo explícito, pero no se puede derivar un estilo explícito de un estilo implícito.An implicit style can be derived from an explicit style, but an explicit style can't be derived from an implicit style.

Respetar la cadena de herenciaRespecting the inheritance chain

Un estilo solo puede heredar de estilos en el mismo nivel, o superior, en la jerarquía de vistas.A style can only inherit from styles at the same level, or above, in the view hierarchy. Esto significa que:This means that:

  • Un recurso de nivel de aplicación solo puede heredar de otros recursos de nivel de aplicación.An application level resource can only inherit from other application level resources.
  • Un recurso de nivel de página puede heredar de recursos de nivel de aplicación y otros recursos de nivel de página.A page level resource can inherit from application level resources, and other page level resources.
  • 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.A control level resource can inherit from application level resources, page level resources, and other control level resources.

Esta cadena de herencia se muestra en el ejemplo de código siguiente:This inheritance chain is demonstrated in the following code example:

<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 buttonStyle son recursos de nivel de control, mientras que baseStyle es un recurso de nivel de página.In this example, labelStyle and buttonStyle are control level resources, while baseStyle is a page level resource. Sin embargo, while labelStyle y buttonStyle heredan de baseStyle , no es posible baseStyle heredar de labelStyle o buttonStyle , debido a sus respectivas ubicaciones en la jerarquía de vistas.However, while labelStyle and buttonStyle inherit from baseStyle, it's not possible for baseStyle to inherit from labelStyle or buttonStyle, due to their respective locations in the view hierarchy.

Herencia de estilo en C#Style inheritance in C#

En el ejemplo de código siguiente se muestra la página de C# equivalente, donde Style las instancias se asignan directamente a las Style propiedades de los controles necesarios:The equivalent C# page, where Style instances are assigned directly to the Style properties of the required controls, is shown in the following code example:

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

Las baseStyle instancias de destino View y establecen las HorizontalOptions VerticalOptions propiedades y.The baseStyle targets View instances, and sets the HorizontalOptions and VerticalOptions properties. baseStyleNo se establece directamente en ningún control.The baseStyle is not set directly on any controls. En su lugar, labelStyle y buttonStyle heredan de él y establecen valores de propiedades enlazables adicionales.Instead, labelStyle and buttonStyle inherit from it, setting additional bindable property values. labelStyleY buttonStyle se aplican a las Label instancias y la Button instancia, estableciendo sus Style propiedades.The labelStyle and buttonStyle are then applied to the Label instances and Button instance, by setting their Style properties.