Introducción a los Xamarin.Forms estilos

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

Xamarin.Forms Las aplicaciones suelen contener varios controles que tienen una apariencia idéntica. Por ejemplo, una aplicación puede tener varias Label instancias que tienen las mismas opciones de fuente y opciones 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 Label instancia tiene valores de propiedad idénticos para controlar la apariencia del texto mostrado por .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 repetitivo y propenso a errores. En su lugar, se puede crear un estilo que defina la apariencia y, a continuación, se aplique 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#:

  • Style Las instancias creadas en XAML normalmente se definen en un ResourceDictionary que se asigna a la Resources colección de un control, una página o a la Resources colección de la aplicación.
  • Style Las instancias creadas en C# normalmente se definen en la clase de la página o en una clase a la que se puede acceder globalmente.

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

  • Style Las instancias definidas en el nivel de control solo se pueden aplicar al control y a sus elementos secundarios.
  • Style Las instancias 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 Style instancia puede ser explícita o implícita:

  • Una instancia explícitaStyle se define especificando y TargetType un x:Key valor, y estableciendo la propiedad del Style elemento de destino en la x:Key referencia. Para obtener más información sobre los estilos explícitos , vea Estilos explícitos.
  • Una instancia implícitaStyle se define especificando solo un .TargetType A continuación, la Style instancia se aplicará automáticamente a todos los elementos de ese tipo. Tenga en cuenta que las subclases de TargetType no tienen Style aplicadas automáticamente. Para obtener más información sobre los estilos implícitos , vea 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 que VisualElement coincida con el TargetType valor de propiedad de Style, como se muestra en el ejemplo de código XAML siguiente:

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

Los estilos inferiores en la jerarquía de vistas tienen prioridad sobre los definidos más arriba. Por ejemplo, si se establece en Label.TextColorStyleRed en el nivel de aplicación, un estilo de nivel de página que establece en .Label.TextColorGreen Del mismo modo, un estilo de nivel de página se invalidará mediante un estilo de nivel de control. Además, si Label.TextColor se establece directamente en una propiedad de control, esto tiene prioridad sobre cualquier estilo.

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

Nota

¿Qué es StyleId?

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