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