Herencia de estilo 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 estilos se realiza estableciendo la Style.BasedOn propiedad en un existente Style. En XAML, esto se logra estableciendo la BasedOn propiedad en una StaticResource extensión de marcado que hace referencia a un objeto creado Styleanteriormente. En C#, esto se logra estableciendo la BasedOn propiedad en una Style instancia de .

Los estilos que heredan de un estilo base pueden incluir Setter instancias de nuevas propiedades o usarlas para 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 derive del tipo de destino del estilo base. Por ejemplo, si un estilo base tiene como destino View instancias, los estilos basados en el estilo base pueden dirigirse View a instancias o tipos que derivan de la View clase , como Label e Button instancias.

En el código siguiente se 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>

Las baseStyle instancias de destino View y establecen las HorizontalOptions propiedades y VerticalOptions . No baseStyle se establece directamente en ningún control. En su lugar, labelStyle y buttonStyle heredan de él, estableciendo valores de propiedad enlazables adicionales. A labelStyle continuación, y buttonStyle se aplican a las instancias y Button a la Label instancia, 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 en el 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 los 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 buttonStyle son recursos de nivel de control, mientras baseStyle que es un recurso de nivel de página. Sin embargo, aunque 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.

Herencia de estilo en C #

La página de C# equivalente, donde Style las instancias se asignan directamente a las Style propiedades de los controles necesarios, se muestra en el ejemplo de código 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 }
            }
        };
    }
}

Las baseStyle instancias de destino View y establecen las HorizontalOptions propiedades y VerticalOptions . No baseStyle se establece directamente en ningún control. En su lugar, labelStyle y buttonStyle heredan de él, estableciendo valores de propiedad enlazables adicionales. A labelStyle continuación, y buttonStyle se aplican a las instancias y Button a la Label instancia, estableciendo sus Style propiedades.