Compartir vía

Introducción a los estilos de Xamarin.Forms

  • Artículo

Los estilos permiten personalizar la apariencia de los elementos visuales. Los estilos se definen para un tipo específico y contienen valores para las propiedades disponibles en ese tipo.

Las aplicaciones de Xamarin.Forms suelen contener varios controles que tienen un aspecto idéntico. Por ejemplo, una aplicación puede tener varias instancias de Label que tengan las mismas opciones de fuente y de diseño, como se muestra en el ejemplo de código XAML siguiente:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="Styles.NoStylesPage"
    Title="No Styles"
    IconImageSource="xaml.png">
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <Label Text="These labels"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand"
                   FontSize="Large" />
            <Label Text="are not"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand"
                   FontSize="Large" />
            <Label Text="using styles"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand"
                   FontSize="Large" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

En el ejemplo de código siguiente se muestra la página equivalente creada en C#:

public class NoStylesPageCS : ContentPage
{
    public NoStylesPageCS ()
    {
        Title = "No Styles";
        IconImageSource = "csharp.png";
        Padding = new Thickness (0, 20, 0, 0);

        Content = new StackLayout {
            Children = {
                new Label {
                    Text = "These labels",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                },
                new Label {
                    Text = "are not",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                },
                new Label {
                    Text = "using styles",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                }
            }
        };
    }
}

Cada instancia de Label tiene valores de propiedad idénticos para controlar la apariencia del texto que muestra Label. El resultado es el aspecto que se muestra en las capturas de pantalla siguientes:

Apariencia de etiqueta sin estilos

Establecer la apariencia de cada control individual puede ser un proceso repetitivo y propenso a errores. En su lugar, se pueden crear estilos que definan la apariencia y, después, aplicarlos a los controles necesarios.

Crear un estilo

La clase Style agrupa una colección de valores de propiedad en un objeto que después se puede aplicar a varias instancias de elementos visuales. Esto ayuda a reducir el marcado repetitivo y permite cambiar más fácilmente la apariencia de las aplicaciones.

Aunque los estilos se diseñaron principalmente para aplicaciones basadas en XAML, también se pueden crear en C#:

  • Las instancias de Style creadas en XAML normalmente se definen en un ResourceDictionary que se asigna a la colección Resources de un control o página o a la colección Resources de la aplicación.
  • Las instancias de Style creadas en C# se suelen definir en la clase de la página o bien en una clase a la que se pueda acceder de forma global.

La elección de dónde se puede definir un elemento Style afecta a dónde se puede usar:

  • Las instancias de Style definidas en el nivel de control solo se pueden aplicar al control y a sus elementos secundarios.
  • Las instancias de Style definidas en el nivel de página solo se pueden aplicar a la página y a sus elementos secundarios.
  • Las instancias de Style definidas en el nivel de aplicación se pueden aplicar en toda la aplicación.

Cada instancia de Style contiene una colección de uno o varios objetos Setter, donde cada objeto Setter tiene un elemento Property y un elemento Value. Property es el nombre de la propiedad enlazable del elemento al que se aplica el estilo y Value es el valor que se aplica a la propiedad.

Cada instancia de Style puede ser explícita o implícita:

  • Una instancia explícita Style se define especificando un TargetType valor y x:Key y estableciendo la propiedad del elemento de Style destino en la x:Key referencia. Para obtener más información sobre los estilos explícitos, consulte Estilos explícitos.
  • Una instancia implícita Style se define especificando solo un TargetType. A continuación, la instancia de Style se aplicará automáticamente a todos los elementos de ese tipo. Tenga en cuenta que las subclases de TargetType no tienen aplicado automáticamente Style. Para obtener más información sobre los estilos implícitos, consulte Estilos implícitos.

Al crear un elemento Style, siempre se requiere la propiedad TargetType. En el ejemplo de código siguiente se muestra un estilo explícito (tenga en cuenta el x:Key) creado en XAML:

<Style x:Key="labelStyle" TargetType="Label">
    <Setter Property="HorizontalOptions" Value="Center" />
    <Setter Property="VerticalOptions" Value="CenterAndExpand" />
    <Setter Property="FontSize" Value="Large" />
</Style>

Para aplicar un Style, el objeto de destino debe ser un VisualElement que coincida con el valor de propiedad TargetType de Style, como se muestra en el ejemplo de código XAML siguiente:

<Label Text="Demonstrating an explicit style" Style="{StaticResource labelStyle}" />

Los estilos situados más abajo en la jerarquía de la vista tienen prioridad sobre los definidos más arriba. Por ejemplo, si se establece un Style que establece Label.TextColor en Red en el nivel de aplicación, se invalidará por un estilo de nivel de página que establezca Label.TextColor en Green. Del mismo modo, un estilo de nivel de página se invalidará por un estilo de nivel de control. Además, si Label.TextColor se establece directamente en una propiedad de control, tendrá prioridad sobre los estilos.

En los artículos de esta sección se muestra y explica cómo crear y aplicar estilos explícitos e implícitos, cómo crear estilos globales, herencia de estilos, cómo responder a cambios de estilo en tiempo de ejecución y cómo usar los estilos integrados incluidos en Xamarin.Forms.

Nota:

¿Qué es StyleId?

Antes de Xamarin.Forms 2.2, la propiedad StyleId se usaba para identificar elementos individuales en una aplicación para la identificación en pruebas de interfaz de usuario y en motores de temas como Pixate. Sin embargo, en Xamarin.Forms 2.2 se introdujo la propiedad AutomationId, que ha reemplazado la propiedad StyleId.