.NET MAUI – Styles

This is the third article in the recently started series titled Developer Tips, which offers concise hints to enhance productivity. All the articles in the series can be accessed from here.

A style is characterized by a collection of interrelated properties that aim to improve resource management within the application. It is defined as a list of Setters. A Setter has a property and a value.

Styles can be incorporated into the Resources property, of type ResourceDictionary, defined at the VisualElement level.

With a notable exception for the Application type, despite inheriting from Element, the Resources property is explicitly defined to accommodate global styles.

A ResourceDictionary can be defined as an independent entity, allowing for the grouping of related style definitions. It can then be imported at suitable locations.

Styles can be defined at four levels:

• Globally at the App level
• At the Page level
• In any of the Parent such as Layouts
• Locally

The style specified nearby always takes precedence. Therefore, a style property defined at the control level always overrides others.

Based on the definition, Styles can be categorized into two types:

• Implicit
  • The one defined without the x:Key attribute
• Explicit
  • The one defined with the x:Key attribute

Both types of styles necessitate the definition of a control type using the TargetType property to which the style is applicable.

The implicit style applies to all the control types within its scope. For example, an implicit style defined at the App level, global scope, is applied to that control type across the application unless overridden at other levels.

<Style TargetType="StackLayout">
    <Setter Property="Spacing" Value="10" />
</Style>

On the contrary, explicit styling is limited to the control to which it is applied. At the control level, the style can be specified by defining the Style property.

Definition:

<Style x:Key="BoldText" TargetType="Label">
    <Setter Property="FontAttributes" Value="Bold" />
</Style>

Usage:

<Label Style="{StaticResource BoldText}" Text="{Binding Result}" />

Styles can be referenced using StaticResource or DynamicResource. The distinction lies in the fact that the former applies only once, whereas the latter saves a reference and adapts to theme changes.

When dealing with styles that do not adapt to theme changes, it is recommended to utilize StaticResource, as it helps to optimize the app’s performance.

Style Inheritance:

Supported in two variants. The first involves applying the same set of properties to all the derivatives of that control type, while the other entails overriding the style properties or defining new properties from the existing definition referenced by the BasedOn property. The former is used with the Implicit styles whereas the latter is mostly used with the Explicit styles.

Note: An implicit style can be derived from an explicit style, but not the other way around, as the implicit style lacks an identifier.

Code Samples:

Implicit Style:

<Style TargetType="StackBase" ApplyToDerivedTypes="True">
    <Setter Property="Spacing" Value="10" />
</Style>

The value assigned to the Spacing property will be applied across all the controls inherited from StackBase such as StackLayout, HorizontalStackLayout, VerticalStackLayout, …

Explicit Style:

A base style is identified with the Key named Action.

<Style x:Key="Action" TargetType="Button">
    <Setter Property="BackgroundColor" Value="White" />
    <Setter Property="FontFamily" Value="OpenSans400" />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="Padding" Value="14,10" />
    <Setter Property="TextColor" Value="Black" />
</Style>

A style inherited from the base style with some of the base properties overridden. The other properties from the base apply too.

<Style x:Key="DeleteAction" BasedOn="{StaticResource Action}" TargetType="Button">
    <Setter Property="BackgroundColor" Value="Red" />
    <Setter Property="TextColor" Value="White" />
</Style>

A style inherited from the base style with some of the base properties overridden and another property newly defined. The other properties from the base apply too.

<Style x:Key="PrimaryAction" BasedOn="{StaticResource Action}" TargetType="Button">
    <Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
    <Setter Property="FontAttributes" Value="Bold" />
    <Setter Property="TextColor" Value="White" />
</Style>

In summary, the definition of styles facilitates enhanced resource reusability, and any modifications made in one location will propagate to all associated references.

There is another topic known as Theming, which is closely associated with Styling and will be covered in a separate article.

If you would like to recognize the work, kindly consider sponsoring on the GitHub Sponsor page or Buy Me a Coffee page. Thanks in advance.

Happy coding. Stay connected as we continue to learn and share the experiences from this exciting journey of being a .NET developer.