Device Styles

Using the dynamic styles built into Xamarin.Forms

PDF for offline use
Sample Code:
Related Articles:
Related APIs:

Let us know how you feel about this


0/250

last updated: 2016-02

Xamarin.Forms includes six dynamic styles, known as device styles, in the Device.Styles class.

The device styles are:

All six styles can only be applied to Label instances. For example, a Label that's displaying the body of a paragraph might set its Style property to BodyStyle.

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" Icon="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 SubtitleTextStyle}" />
            <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>

The device styles are bound to using the DynamicResource markup extension. The dynamic nature of the styles can be seen in iOS by changing the Accessibility settings for text size. The appearance of the device styles is different on each platform, as shown in the following screenshots:

Device styles can also be derived from by setting the BaseResourceKey property to the key name for the device style. In the code example above, myBodyStyle inherits from BodyStyle and sets an accented text color. For more information about dynamic style inheritance, see Dynamic Style Inheritance.

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";
        Icon = "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 }
            }
        };
    }
}

The Style property of each Label instance is set to the appropriate property from the Devices.Styles class.

Accessibility

The device styles respect accessibility preferences, so font sizes will change as the accessibility preferences are altered on each platform. Therefore, in order to support accessible text, ensure that the device styles are used as the basis for any text styles within your application.

The following screenshots demonstrate the device styles on each platform, with the smallest accessible font size:

The following screenshots demonstrate the device styles on each platform, with the largest accessible font size:

Summary

Xamarin.Forms includes six dynamic styles, known as device styles, in the Devices.Styles class. All six styles can only be applied to Label instances.

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.