.NET MAUI Styles and Resources

.NET MAUI Styles and Resources

In .NET MAUI (2026), Styles and Resources are the primary mechanism for creating consistent, reusable user interfaces across Android, iOS, macOS, and Windows. By grouping property values into a single object, you can reduce repetitive markup and manage global appearance changes from a single location.

1. MAUI Resources

Resources are reusable objects stored in a ResourceDictionary. They can include colors, brushes, fonts, numbers (e.g., Thickness), and most importantly, styles.

Resource Scopes

Where you define a resource determines its availability:

• Application Level: Defined in App.xaml. These are accessible throughout the entire app.
• Page Level: Defined within a <ContentPage.Resources> tag. Only accessible on that specific page.
• Control Level: Defined within a specific control (like a Layout). Only accessible to that control and its children.

Static vs. Dynamic Resources

• StaticResource: A one-time lookup at runtime. If the resource value changes later, the UI does not update.
• DynamicResource: Maintains a link to the resource key. If the resource is replaced (e.g., during a theme change), the UI updates automatically.

Example

<Application.Resources>
    <Color x:Key="PrimaryColor">#3498db</Color>
    <FontFamily x:Key="AppFont">OpenSans-Regular</FontFamily>
</Application.Resources>

<Label Text="Hello MAUI!"
       TextColor="{StaticResource PrimaryColor}"
       FontFamily="{StaticResource AppFont}" />

2. MAUI Styles

A Style consists of a TargetType and one or more Setters, each assigning a Value to a specific Property. A Style is a collection of property setters that can be applied to controls to keep UI consistent.

• Implicit Styles: Defined by specifying only a TargetType. These automatically apply to all controls of that type within the scope.
• Explicit Styles: Defined with an x:Key. These must be manually applied to a control using the Style property.
• Style Inheritance (BasedOn): Styles can inherit and override properties from other styles using the BasedOn property.
• Style Classes: Multiple styles can be applied to a single control using the StyleClass property.

Basic Style Example

<Application.Resources>
    <Style TargetType="Label">
        <Setter Property="TextColor" Value="DarkBlue" />
        <Setter Property="FontSize" Value="18" />
    </Style>
</Application.Resources>

<Label Text="This label uses the default style" />

Here, all Label controls automatically use the defined style.

3. Advanced Styling Features

• Cascading Style Sheets (CSS): .NET MAUI supports styling with CSS files.
• Merged Dictionaries: Split resources into multiple XAML files and merge them into App.xaml.
• Device-Specific Styling: Use OnPlatform and OnIdiom markup extensions.

⚡ Explicit vs Implicit Styles

• Implicit Style: Applied automatically to all controls of the target type.
• Explicit Style: Applied only when referenced by key.

Explicit Style Example

<Application.Resources>
    <Style x:Key="TitleLabelStyle" TargetType="Label">
        <Setter Property="FontSize" Value="24" />
        <Setter Property="TextColor" Value="Red" />
    </Style>
</Application.Resources>

<Label Text="Title" Style="{StaticResource TitleLabelStyle}" />

🧩 Resource Dictionaries

For large projects, you can split resources into separate files.

Example

Colors.xaml

<ResourceDictionary>
    <Color x:Key="PrimaryColor">#2ecc71</Color>
</ResourceDictionary>

App.xaml

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Colors.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

🚀 Advanced Concepts

• DynamicResource: Useful for theming (light/dark mode).
• OnPlatform / OnIdiom: Platform-specific or device-specific resources.
• App Themes: Switch resources dynamically based on system theme.
• Control Templates: Define reusable UI structures.
• Data Templates: Define how data is displayed in lists.

DynamicResource Example (Theme Switching)

<Application.Resources>
    <Color x:Key="BackgroundColorLight">White</Color>
    <Color x:Key="BackgroundColorDark">Black</Color>
</Application.Resources>

<ContentPage BackgroundColor="{DynamicResource BackgroundColorLight}" />

You can swap the resource dictionary at runtime to switch themes.

✅ Best Practices

• Keep styles in separate resource dictionaries for maintainability.
• Use implicit styles for consistency across controls.
• Use explicit styles for special cases.
• Prefer DynamicResource for theme-aware apps.
• Avoid hardcoding values—always use resources for colors, fonts, spacing.

⚠️ Pitfalls

• Overusing explicit styles → reduces consistency.
• Forgetting to merge dictionaries → resources not found.
• Using StaticResource when you need runtime updates → theme won’t change.
• Large resource dictionaries without organization → hard to maintain.

👉 In Short

• Resources: Reusable values.
• Styles: Reusable property sets for controls.
• Resource Dictionaries: Organized collections of resources.
• Advanced features: Theming, templates, platform-specific resources.