Del via

Xamarin.Forms Text Styles

Styling text in Xamarin.Forms

Styles can be used to adjust the appearance of labels, entries, and editors. Styles can be defined once and used by many views, but a style can only be used with views of one type. Styles can be given a Key and applied selectively using a specific control's Style property.

Built-In Styles

Xamarin.Forms includes several built-in styles for common scenarios:

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

To apply one of the built-in styles, use the DynamicResource markup extension to specify the style:

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

In C#, built-in styles are selected from Device.Styles:

label.Style = Device.Styles.TitleStyle;

Device Styles Example

Custom Styles

Styles consist of setters and setters consist of properties and the values the properties will be set to.

In C#, a custom style for a label with red text of size 30 would be defined as follows:

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

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

Note that resources (including all styles) are defined within ContentPage.Resources, which is a sibling of the more familiar ContentPage.Content element.

Custom Styles Example

Applying Styles

Once a style has been created, it can be applied to any view matching its TargetType.

In XAML, custom styles are applied to views by supplying their Style property with a StaticResource markup extension referencing the desired style:

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

In C#, styles can either be applied directly to a view or added to and retrieved from a page's ResourceDictionary. To add directly:

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

To add and retrieve from the page's ResourceDictionary:

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

Built-in styles are applied differently, because they need to respond to accessibility settings. To apply built-in styles in XAML, the DynamicResource markup extension is used:

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

In C#, built-in styles are selected from Device.Styles:

label.Style = Device.Styles.TitleStyle;

Accessibility

The built-in styles exist to make it easier to respect accessibility preferences. When using any of the built-in styles, font sizes will automatically increase if a user sets their accessibility preferences accordingly.

Consider the following example of the same page of views styled with the built-in styles with accessibility settings enabled and disabled:

Disabled:

Device Styles with Accessibility Disabled

Enabled:

Device Styles with Accessibility Enabled

To ensure accessibility, make sure that built-in styles are used as the basis for any text-related styles within your app, and that you are using styles consistently. See Styles for more details on extending and working with styles in general.

  • Last updated on