Estilos de dispositivo en Xamarin Forms

Xamarin-logo-aepi

Hola, un placer verte por aquí de nuevo,  este articulo de hoy es la continuación del anterior artículo sobre los estilos implícitos y explícitos, si no lo has leído aun puedes hacerlo aquí.

Como decía, hoy vamos  a hacer un repaso a los estilos de dispositivo que podemos crear en nuestras aplicaciones de Xamarin Forms y así poder personalizar nuestras interfaces de usuario en base a cada dispositivo en concreto.

Xamarin.Forms incluye seis estilos dinámicos, conocidos como estilos de dispositivo, en la clase Device.Styles.

Los estilos de dispositivo son:

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

Estos estilos puede aplicarse únicamente a las etiquetas. Por ejemplo, una Label que muestra el cuerpo de un párrafo puede establecer su Style a la propiedad BodyStyle .

En el siguiente ejemplo mostramos cómo utilizar los estilos de dispositivo en una página XAML:

 

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.DeviceStylesPage" Title="Device" IconImageSource="xaml.png">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="myBodyStyle" TargetType="Label"
BaseResourceKey="BodyStyle">
<Setter Property="TextColor" Value="Accent" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
  <StackLayout Padding="0,20,0,0">
    <Label Text="Title style" Style="{DynamicResource TitleStyle}" />
    <Label Text="Subtitle text style" Style="{DynamicResource SubtitleStyle}" />
    <Label Text="Body style" Style="{DynamicResource BodyStyle}" />
    <Label Text="Caption style" Style="{DynamicResource CaptionStyle}" />
    <Label Text="List item detail text style" Style="{DynamicResource ListItemDetailTextStyle}" />
    <Label Text="List item text style" Style="{DynamicResource ListItemTextStyle}" />
    <Label Text="No style" />
    <Label Text="My body style" Style="{StaticResource myBodyStyle}" />
  </StackLayout>
</ContentPage.Content>
</ContentPage>

De igual manera podemos aplicar estos mismo estilos mediante código C#, como podemos ver a continuación:

public class DeviceStylesPageCS : ContentPage
{
    public DeviceStylesPageCS ()
    {
        var myBodyStyle = new Style (typeof(Label)) {
            BaseResourceKey = Device.Styles.BodyStyleKey,
            Setters = {
                new Setter {
                    Property = Label.TextColorProperty,
                    Value = Color.Accent
                }
            }
        };

        Title = "Device";
        IconImageSource = "csharp.png";
        Padding = new Thickness (0, 20, 0, 0);

        Content = new StackLayout {
            Children = {
                new Label { Text = "Title style", Style = Device.Styles.TitleStyle },
                new Label { Text = "Subtitle style", Style = Device.Styles.SubtitleStyle },
                new Label { Text = "Body style", Style = Device.Styles.BodyStyle },
                new Label { Text = "Caption style", Style = Device.Styles.CaptionStyle },
                new Label { Text = "List item detail text style",
                  Style = Device.Styles.ListItemDetailTextStyle },
                new Label { Text = "List item text style", Style = Device.Styles.ListItemTextStyle },
                new Label { Text = "No style" },
                new Label { Text = "My body style", Style = myBodyStyle }
            }
        };
    }
}

Si te ha gustado este artículo, recuerda compartirlo, nos ayudas mucho!!

Un saludo

Jesús Jiménez

  • Share:

Deja un comentario

Your email address will not be published.

Enviar un mensaje




Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies
Call Now Button