Clases de estilos en Xamarin.Forms

Se ha hablado largo y tendido sobre estilos en Xamarin.Forms, pero pocas son las referencias que he encontrado a las StyleClass.

La gran ventaja del uso de StyleClass es que se pueden aplicar varias clases de estilos a un mismo control, lo que nos permite separar las distintas apariencias de un control en clases y aplicar una o varia al control dependiendo del aspecto final que deseemos aplicarle.

La mejor forma de entender este funcionamiento es con un sencillo ejemplo. Para ello, he creado una aplicación sencilla que muestra dos BoxView y aplico distintos StyleClass a cada uno de ellos.

 

A continuación se muestra la manera en la que he creado el estilo básico del BoxView y los distintos StyleClass que uso en la aplicación

<Style TargetType="BoxView">
    <Setter Property="BackgroundColor" Value="Blue" />
    <Setter Property="HorizontalOptions" Value="Center" />
    <Setter Property="VerticalOptions" Value="Center" />
</Style>

<Style TargetType="BoxView" Class="BigBox">
    <Setter Property="HeightRequest" Value="100" />
    <Setter Property="WidthRequest" Value="100" />
</Style>
<Style TargetType="BoxView" Class="SmallBox">
    <Setter Property="HeightRequest" Value="50" />
    <Setter Property="WidthRequest" Value="50" />
</Style>
<Style TargetType="BoxView" Class="HighlightBox">
    <Setter Property="BackgroundColor" Value="Orange" />
</Style>
<Style TargetType="BoxView" Class="RoundedBox">
    <Setter Property="CornerRadius" Value="10" />
</Style>
<Style TargetType="BoxView" Class="RotatedBox">
    <Setter Property="RotationX" Value="45" />
</Style>

En el siguiente XAML enseño cómo aplicar los StyleClass a cada uno de los BoxView. Para aplicar varias clases de estilos hay que asignarlos a la propiedad StyleClass, separados por comas.

<StackLayout Orientation="Vertical"
                HorizontalOptions="Center" VerticalOptions="Center">
    <BoxView StyleClass="BigBox, HighlightBox, RoundedBox" />

    <BoxView StyleClass="SmallBox, RotatedBox" />
</StackLayout>

Hay que tener en cuenta que si hay dos clases que establecen un valor para la misma propiedad, el valor efectivo será el de la ultima clase asignada a la propiedad StyleClass.

Como es habitual, he creado un proyecto en GitHub para ofrecer más detalles de la implementación que he realizado. Espero que os sea de ayuda https://github.com/jorgediegocrespo/XamarinStyleClass