Reusable Styles in .NET MAUI

Reusable Styles in .NET MAUI — A Complete Guide for Scalable and Maintainable UI Design

Introduction

In today’s world of mobile app development, user experience (UX) and user interface (UI) consistency play a critical role in making your application stand out. Especially when building large-scale applications in .NET MAUI (Multi-platform App UI), managing UI consistency across hundreds of pages, controls, and components becomes a challenging task.

Join our exclusive WhatsApp group for Xamarin and .NET MAUI developers to connect with experts, share insights, and get help with your projects. Whether you're a beginner or an experienced developer, this group is the perfect place to enhance your skills and collaborate with the community.

Please, support my blog by clicking on our sponsors ad!

This is where the concept of Reusable Styles comes into the picture.

What are Styles in .NET MAUI?

Styles in .NET MAUI allow developers to define a set of property values for a specific control type or multiple controls. Instead of setting properties like FontSize, TextColor, BackgroundColor, CornerRadius directly on each control, you can group them into a style and apply it globally or locally.

Benefits:

Uniformity across the app.
Centralized management of UI changes.
Improved maintainability.
Cleaner and more readable XAML.
Easy theming support (Light/Dark Mode).

Types of Styles in .NET MAUI

1. Inline Style


<Button Text="Submit"
        BackgroundColor="Green"
        TextColor="White"
        CornerRadius="10"
        FontSize="16" />

Disadvantages:

Hard to maintain.
Duplicated code.
Not scalable.

2. Explicit Style (With x:Key)


<Application.Resources>
    <Style x:Key="PrimaryButtonStyle" TargetType="Button">
        <Setter Property="BackgroundColor" Value="#1976D2" />
        <Setter Property="TextColor" Value="White" />
        <Setter Property="CornerRadius" Value="8" />
        <Setter Property="FontSize" Value="16" />
    </Style>
</Application.Resources>

Table of Contents for .Net Maui

Usage:


<Button Text="Login"
        Style="{StaticResource PrimaryButtonStyle}" />

3. Implicit Style (Without x:Key)


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

4. BasedOn Style (Style Inheritance)


<Style x:Key="BaseButtonStyle" TargetType="Button">
    <Setter Property="FontSize" Value="14" />
    <Setter Property="CornerRadius" Value="8" />
</Style>

<Style x:Key="SuccessButtonStyle"
       TargetType="Button"
       BasedOn="{StaticResource BaseButtonStyle}">
    <Setter Property="BackgroundColor" Value="Green" />
    <Setter Property="TextColor" Value="White" />
</Style>

Nested Styles in .NET MAUI


<Style x:Key="CardContainerStyle" TargetType="Frame">
    <Setter Property="Padding" Value="12" />
    <Setter Property="CornerRadius" Value="10" />
    <Setter Property="BackgroundColor" Value="White" />
    <Setter Property="HasShadow" Value="True" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="Opacity" Value="1" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="Opacity" Value="0.5" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

Organizing Styles for Large Projects


Resources/
 └── Styles/
     ├── Colors.xaml
     ├── Fonts.xaml
     ├── Buttons.xaml
     ├── Labels.xaml
     ├── Layouts.xaml
     └── AppTheme.xaml

Reusable Themes (Light/Dark Mode)


if (App.Current.RequestedTheme == AppTheme.Dark)
{
    Application.Current.Resources.MergedDictionaries.Clear();
    Application.Current.Resources.MergedDictionaries.Add(new DarkTheme());
}
else
{
    Application.Current.Resources.MergedDictionaries.Clear();
    Application.Current.Resources.MergedDictionaries.Add(new LightTheme());
}

Best Practices for Styling in .NET MAUI

Centralize your colors, fonts, and dimensions.
Use BasedOn to avoid duplication.
Always prefer DynamicResource for theme-dependent values.
Avoid hardcoded styles — use reusable styles everywhere.
Split styles into manageable files.
Follow naming conventions like PrimaryButtonStyle, TitleLabelStyle.

Conclusion

Reusable Styles in .NET MAUI are one of the most powerful features that help you write cleaner, maintainable, and scalable UI code. Whether you are building a small app or a large enterprise-grade product, investing time in creating a solid styling architecture upfront will save hundreds of development hours in the long run.

Previous Next