Clases de estilo de Xamarin.FormsXamarin.Forms Style Classes

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

Las clases de estilo de Xamarin. Forms permiten aplicar varios estilos a un control, sin tener que recurrir a la herencia de estilo.Xamarin.Forms style classes enable multiple styles to be applied to a control, without resorting to style inheritance.

Crear clases de estiloCreate style classes

Se puede crear una clase de estilo estableciendo la Class propiedad de en Style un string que representa el nombre de clase.A style class can be created by setting the Class property on a Style to a string that represents the class name. La ventaja que ofrece esto, a través de la definición de un estilo explícito mediante el x:Key atributo, es que se pueden aplicar varias clases de estilo a VisualElement .The advantage this offers, over defining an explicit style using the x:Key attribute, is that multiple style classes can be applied to a VisualElement.

Importante

Varios estilos pueden compartir el mismo nombre de clase, siempre que tengan como destino tipos diferentes.Multiple styles can share the same class name, provided they target different types. Esto permite que varias clases de estilo, que tienen un nombre idéntico, tengan como destino tipos diferentes.This enables multiple style classes, that are identically named, to target different types.

En el ejemplo siguiente se muestran tres BoxView clases de estilo y una VisualElement clase de estilo:The following example shows three BoxView style classes, and a VisualElement style class:

<ContentPage ...>
    <ContentPage.Resources>
        <Style TargetType="BoxView"
               Class="Separator">
            <Setter Property="BackgroundColor"
                    Value="#CCCCCC" />
            <Setter Property="HeightRequest"
                    Value="1" />
        </Style>

        <Style TargetType="BoxView"
               Class="Rounded">
            <Setter Property="BackgroundColor"
                    Value="#1FAECE" />
            <Setter Property="HorizontalOptions"
                    Value="Start" />
            <Setter Property="CornerRadius"
                    Value="10" />
        </Style>    

        <Style TargetType="BoxView"
               Class="Circle">
            <Setter Property="BackgroundColor"
                    Value="#1FAECE" />
            <Setter Property="WidthRequest"
                    Value="100" />
            <Setter Property="HeightRequest"
                    Value="100" />
            <Setter Property="HorizontalOptions"
                    Value="Start" />
            <Setter Property="CornerRadius"
                    Value="50" />
        </Style>

        <Style TargetType="VisualElement"
               Class="Rotated"
               ApplyToDerivedTypes="true">
            <Setter Property="Rotation"
                    Value="45" />
        </Style>        
    </ContentPage.Resources>
</ContentPage>

Las Separator Rounded clases de estilo, y Circle establecen BoxView las propiedades en valores específicos.The Separator, Rounded, and Circle style classes each set BoxView properties to specific values.

La Rotated clase de estilo tiene un TargetType de VisualElement , lo que significa que solo se puede aplicar a VisualElement las instancias de.The Rotated style class has a TargetType of VisualElement, which means it can only be applied to VisualElement instances. Sin embargo, su ApplyToDerivedTypes propiedad se establece en true , lo que garantiza que se puede aplicar a los controles que derivan de VisualElement , como BoxView .However, its ApplyToDerivedTypes property is set to true, which ensures that it can be applied to any controls that derive from VisualElement, such as BoxView. Para obtener más información sobre cómo aplicar un estilo a un tipo derivado, vea aplicar un estilo a los tipos derivados.For more information about applying a style to a derived type, see Apply a style to derived types.

El código de C# equivalente es el siguiente:The equivalent C# code is:

var separatorBoxViewStyle = new Style(typeof(BoxView))
{
    Class = "Separator",
    Setters =
    {
        new Setter
        {
            Property = VisualElement.BackgroundColorProperty,
            Value = Color.FromHex("#CCCCCC")
        },
        new Setter
        {
            Property = VisualElement.HeightRequestProperty,
            Value = 1
        }
    }
};

var roundedBoxViewStyle = new Style(typeof(BoxView))
{
    Class = "Rounded",
    Setters =
    {
        new Setter
        {
            Property = VisualElement.BackgroundColorProperty,
            Value = Color.FromHex("#1FAECE")
        },
        new Setter
        {
            Property = View.HorizontalOptionsProperty,
            Value = LayoutOptions.Start
        },
        new Setter
        {
            Property = BoxView.CornerRadiusProperty,
            Value = 10
        }
    }
};

var circleBoxViewStyle = new Style(typeof(BoxView))
{
    Class = "Circle",
    Setters =
    {
        new Setter
        {
            Property = VisualElement.BackgroundColorProperty,
            Value = Color.FromHex("#1FAECE")
        },
        new Setter
        {
            Property = VisualElement.WidthRequestProperty,
            Value = 100
        },
        new Setter
        {
            Property = VisualElement.HeightRequestProperty,
            Value = 100
        },
        new Setter
        {
            Property = View.HorizontalOptionsProperty,
            Value = LayoutOptions.Start
        },
        new Setter
        {
            Property = BoxView.CornerRadiusProperty,
            Value = 50
        }
    }
};

var rotatedVisualElementStyle = new Style(typeof(VisualElement))
{
    Class = "Rotated",
    ApplyToDerivedTypes = true,
    Setters =
    {
        new Setter
        {
            Property = VisualElement.RotationProperty,
            Value = 45
        }
    }
};

Resources = new ResourceDictionary
{
    separatorBoxViewStyle,
    roundedBoxViewStyle,
    circleBoxViewStyle,
    rotatedVisualElementStyle
};

Usar clases de estiloConsume style classes

Las clases de estilo se pueden utilizar estableciendo la StyleClass propiedad del control, que es de tipo IList<string> , en una lista de nombres de clase de estilo.Style classes can be consumed by setting the StyleClass property of the control, which is of type IList<string>, to a list of style class names. Se aplicarán las clases de estilo, siempre que el tipo del control coincida con el TargetType de las clases de estilo.The style classes will be applied, provided that the type of the control matches the TargetType of the style classes.

En el ejemplo siguiente se muestran tres BoxView instancias, cada una de ellas establecida en clases de estilo diferentes:The following example shows three BoxView instances, each set to different style classes:

<ContentPage ...>
    <ContentPage.Resources>
        ...
    </ContentPage.Resources>
    <StackLayout Margin="20">
        <BoxView StyleClass="Separator" />       
        <BoxView WidthRequest="100"
                 HeightRequest="100"
                 HorizontalOptions="Center"
                 StyleClass="Rounded, Rotated" />
        <BoxView HorizontalOptions="Center"
                 StyleClass="Circle" />
    </StackLayout>
</ContentPage>    

En este ejemplo, el primero BoxView tiene el estilo de un separador de línea, mientras que el tercero BoxView es circular.In this example, the first BoxView is styled to be a line separator, while the third BoxView is circular. La segunda BoxView tiene dos clases de estilo aplicadas, que proporcionan esquinas redondeadas y giran 45 grados:The second BoxView has two style classes applied to it, which give it rounded corners and rotate it 45 degrees:

BoxViews con estilo de clases de estilo

Importante

Se pueden aplicar varias clases de estilo a un control porque la StyleClass propiedad es de tipo IList<string> .Multiple style classes can be applied to a control because the StyleClass property is of type IList<string>. Cuando esto ocurre, las clases de estilo se aplican en orden de lista ascendente.When this occurs, style classes are applied in ascending list order. Por lo tanto, cuando varias clases de estilo establecen propiedades idénticas, la propiedad de la clase de estilo que se encuentra en la posición de la lista más alta tendrá prioridad.Therefore, when multiple style classes set identical properties, the property in the style class that's in the highest list position will take precedence.

El código de C# equivalente es el siguiente:The equivalent C# code is:

...
Content = new StackLayout
{
    Children =
    {
        new BoxView { StyleClass = new [] { "Separator" } },
        new BoxView { WidthRequest = 100, HeightRequest = 100, HorizontalOptions = LayoutOptions.Center, StyleClass = new [] { "Rounded", "Rotated" } },
        new BoxView { HorizontalOptions = LayoutOptions.Center, StyleClass = new [] { "Circle" } }
    }
};