Compartir vía


Estilos de texto de Xamarin.Forms

Aplicar estilo al texto en Xamarin.Forms

Los estilos se pueden usar para ajustar la apariencia de las etiquetas, las entradas y los editores. Los estilos se pueden definir una vez y usarse en muchas vistas, pero un estilo solo se puede usar con vistas de un tipo. A los estilos se les puede dar Key y aplicar de forma selectiva mediante la propiedad Style de un control específico.

Estilos integrados

Xamarin.Forms incluye varios estilos integrados para escenarios comunes:

  • BodyStyle
  • CaptionStyle
  • ListItemDetailTextStyle
  • ListItemTextStyle
  • SubtitleStyle
  • TitleStyle

Para aplicar uno de los estilos integrados, use la extensión de marcado DynamicResource para especificar el estilo:

<Label Text="I'm a Title" Style="{DynamicResource TitleStyle}"/>

En C#, los estilos integrados se seleccionan de Device.Styles:

label.Style = Device.Styles.TitleStyle;

Ejemplo de estilos de dispositivo

Estilos personalizados

Los estilos constan de establecedores y los establecedores constan de propiedades y los valores en los que se establecerán las propiedades.

En C#, un estilo personalizado para una etiqueta con texto rojo de tamaño 30 se definiría de la siguiente manera:

var LabelStyle = new Style (typeof(Label)) {
    Setters = {
        new Setter {Property = Label.TextColorProperty, Value = Color.Red},
        new Setter {Property = Label.FontSizeProperty, Value = 30}
    }
};

var label = new Label { Text = "Check out my style.", Style = LabelStyle };

En XAML:

<ContentPage.Resources>
    <ResourceDictionary>
        <Style x:Key="LabelStyle" TargetType="Label">
            <Setter Property="TextColor" Value="Red"/>
            <Setter Property="FontSize" Value="30"/>
        </Style>
    </ResourceDictionary>
</ContentPage.Resources>

<ContentPage.Content>
    <StackLayout>
        <Label Text="Check out my style." Style="{StaticResource LabelStyle}" />
    </StackLayout>
</ContentPage.Content>

Tenga en cuenta que los recursos (incluidos todos los estilos) se definen en ContentPage.Resources, que es un elemento relacionado del elemento ContentPage.Content más conocido.

Ejemplo de estilos personalizados

Aplicar estilos

Una vez creado un estilo, se puede aplicar a cualquier vista que coincida con su TargetType.

En XAML, los estilos personalizados se aplican a las vistas proporcionando su propiedad Style con una extensión de marcado StaticResource que hace referencia al estilo deseado:

<Label Text="Check out my style." Style="{StaticResource LabelStyle}" />

En C#, los estilos se pueden aplicar directamente a una vista o agregarse y recuperarse de ResourceDictionary de una página. Para agregar directamente:

var label = new Label { Text = "Check out my style.", Style = LabelStyle };

Para agregar y recuperar desde ResourceDictionary de la página:

this.Resources.Add ("LabelStyle", LabelStyle);
label.Style = (Style)Resources["LabelStyle"];

Los estilos integrados se aplican de forma diferente, ya que necesitan responder a la configuración de accesibilidad. Para aplicar estilos integrados en XAML, se usa la extensión de marcado DynamicResource:

<Label Text="I'm a Title" Style="{DynamicResource TitleStyle}"/>

En C#, los estilos integrados se seleccionan de Device.Styles:

label.Style = Device.Styles.TitleStyle;

Accesibilidad

Existen estilos integrados para facilitar el respeto de las preferencias de accesibilidad. Al usar cualquiera de los estilos integrados, los tamaños de fuente aumentarán automáticamente si un usuario establece sus preferencias de accesibilidad en consecuencia.

Considere el ejemplo siguiente de la misma página de vistas con estilo con los estilos integrados con la configuración de accesibilidad habilitada y deshabilitada:

Deshabilitado:

Estilos de dispositivo con accesibilidad deshabilitado

Habilitado:

Estilos de dispositivo con accesibilidad habilitada

Para garantizar la accesibilidad, asegúrese de que los estilos integrados se usan como base para cualquier estilo relacionado con texto dentro de la aplicación y de que usa estilos de forma coherente. Consulte Estilos para obtener más información sobre cómo ampliar y trabajar con estilos en general.