Estilos de dispositivo enXamarin.FormsDevice Styles in Xamarin.Forms

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

Xamarin.Formsincluye seis estilos dinámicos, conocidos como estilos de dispositivo, en la clase Device. Styles.Xamarin.Forms includes six dynamic styles, known as device styles, in the Device.Styles class.

Los estilos de dispositivo son los siguientes:The device styles are:

Los seis estilos solo se pueden aplicar a Label las instancias de.All six styles can only be applied to Label instances. Por ejemplo, un Label que muestra el cuerpo de un párrafo podría establecer su Style propiedad en BodyStyle .For example, a Label that's displaying the body of a paragraph might set its Style property to BodyStyle.

En el ejemplo de código siguiente se muestra cómo usar los estilos de dispositivo en una página XAML:The following code example demonstrates using the device styles in a XAML page:

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

Los estilos del dispositivo se enlazan al uso de la DynamicResource extensión de marcado.The device styles are bound to using the DynamicResource markup extension. La naturaleza dinámica de los estilos puede verse en iOS cambiando la configuración de accesibilidad para el tamaño del texto.The dynamic nature of the styles can be seen in iOS by changing the Accessibility settings for text size. La apariencia de los estilos de dispositivo es diferente en cada plataforma, como se muestra en las siguientes capturas de pantallas:The appearance of the device styles is different on each platform, as shown in the following screenshots:

Estilos de dispositivo en cada plataforma

Los estilos de dispositivo también se pueden derivar mediante el establecimiento de la BaseResourceKey propiedad en el nombre de clave para el estilo de dispositivo.Device styles can also be derived from by setting the BaseResourceKey property to the key name for the device style. En el ejemplo de código anterior, myBodyStyle hereda de BodyStyle y establece un color de texto acentuado.In the code example above, myBodyStyle inherits from BodyStyle and sets an accented text color. Para obtener más información sobre la herencia de estilo dinámico, consulte herencia de estilo dinámico.For more information about dynamic style inheritance, see Dynamic Style Inheritance.

En el ejemplo de código siguiente se muestra la página equivalente en C#:The following code example demonstrates the equivalent page in C#:

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 }
            }
        };
    }
}

La Style propiedad de cada Label instancia se establece en la propiedad adecuada de la Devices.Styles clase.The Style property of each Label instance is set to the appropriate property from the Devices.Styles class.

AccesibilidadAccessibility

Los estilos de dispositivo respetan las preferencias de accesibilidad, por lo que los tamaños de fuente cambian a medida que se modifican las preferencias de accesibilidad en cada plataforma.The device styles respect accessibility preferences, so font sizes will change as the accessibility preferences are altered on each platform. Por lo tanto, para admitir texto accesible, asegúrese de que los estilos de dispositivo se usan como base para cualquier estilo de texto dentro de la aplicación.Therefore, to support accessible text, ensure that the device styles are used as the basis for any text styles within your application.

Las capturas de pantallas siguientes muestran los estilos de dispositivo en cada plataforma, con el tamaño de fuente accesible más pequeño:The following screenshots demonstrate the device styles on each platform, with the smallest accessible font size:

Estilos de dispositivo pequeño accesible en cada plataformaAccessible Small Device Styles on Each Platform

Las capturas de pantallas siguientes muestran los estilos de dispositivo en cada plataforma, con el tamaño de fuente accesible más grande:The following screenshots demonstrate the device styles on each platform, with the largest accessible font size:

Estilos de dispositivo grande accesible en cada plataforma