Discovering StyleClass in .NET MAUI

As developers, we’ve all faced the tedious task of styling user interfaces in .NET MAUI. For many, the StaticResource and DynamicResource helpers are well-known go-to options for applying styles. But did you know there’s a hidden gem in .NET MAUI that can make your life easier, more modular, and (bonus!) less crash-prone?

The usual suspects, StaticResource and x:Key

Before diving into StyleClass, let’s revisit the traditional way of applying styles:

<ResourceDictionary>
  <Style x:Key="HeaderStyle" TargetType="Label">
    <Setter Property="FontSize" Value="24" />
    <Setter Property="FontAttributes" Value="Bold" />
  </Style>
</ResourceDictionary>

<Label Style="{StaticResource HeaderStyle}" Text="Welcome to .NET MAUI!" />

Here, the style is applied using the x:Key property and a StaticResource reference. While this approach works, it has a couple of downsides:

• Stricter validation: If HeaderStyle is not found in the resource dictionary, your app could crash with a runtime error. That’s never pretty.
• Single use: The style is explicitly tied to the StaticResource, meaning no reuse across components without re-referencing.

Enter StyleClass and Class

What if I told you that you could write modular, reusable styles without worrying about crashing your app? That’s where StyleClass comes in. Let’s look at our earlier sample, but rewritting to use StyleClass.

<ResourceDictionary>
  <Style TargetType="Label" Class="header">
    <Setter Property="FontSize" Value="24" />
    <Setter Property="FontAttributes" Value="Bold" />
  </Style>
</ResourceDictionary>

<Label StyleClass="header" Text="Welcome to .NET MAUI!" />

Here, we define a style using the Class attribute to name it. The StyleClass attribute applies the style to an element, and it behaves just like CSS classes would.

• You can define multiple styles for a single control by adding more StyleClass values in a comma-separated format.
• If the Class isn’t defined in your resource dictionary, the app doesn’t crash; it simply skips applying the non-existent style.

Why StyleClass is awesome

What makes it truly awesome is the fact that you can define reusable style rules and mix them, allowing for greater Cirque de Soleil-like flexibility. Sure, the regular Style mechanism does allow for inheritance through e.g. the BasedOn attribute, however, the additive approach of StyleClass is superior in my book.

<Style TargetType="Label" Class="important">
    <Setter Property="TextColor" Value="Red" />
</Style>

Apply multiple classes:

```xml
<Label Style Class="header,important" Text="Critical Information!" />

It’s CSS-like! If you’re coming from web development or are comfortable with Tailwind or Bootstrap-style class systems, this feels way more natural and easier to maintain. Ok, maybe not Tailwind. That stuff can be fairly overwhelming when you go down that rabbithole.

Wrapping up

While StaticResource has been the de facto method for applying styles in .NET MAUI, StyleClass is an eye opener for developers looking for more flexibility. At the very least it opened up my mind enough to redo the entire style guide for the app I was building 😄