Modern Design with MAUI Styles and Themes

.NET MAUI (Multi-platform App UI) offers great convenience for those who want to develop modern and cross-platform applications. To give your applications a professional and consistent look with MAUI, Styles and Themes play an important role. In this article, we will discuss the concepts and advantages of MAUI Styles and Themes, and how to implement them, with examples.

What are MAUI Styles? How to Use Them?

MAUI Styles are XAML-based structures used to give user interface elements a consistent appearance. When multiple controls need to have the same look, styles reduce code duplication and lower maintenance costs. A simple Style definition is as follows:

<ContentPage.Resources>
    <Style TargetType="Button">
        <Setter Property="BackgroundColor" Value="DeepSkyBlue" />
        <Setter Property="TextColor" Value="White" />
        <Setter Property="CornerRadius" Value="12" />
    </Style>
</ContentPage.Resources>

A style defined in this way is automatically applied to all <Button> controls on the page. It is also possible to give a style a name and reuse it across various controls.

Using Dynamic and Static Resources

Defining styles dynamically or statically allows customization according to the circumstances of the application. For example, colors can be defined globally via App.xaml:

<Application.Resources>
    <Color x:Key="PrimaryColor">#512bd4</Color>
    <Style x:Key="PrimaryButton" TargetType="Button">
        <Setter Property="BackgroundColor" Value="{StaticResource PrimaryColor}" />
        <Setter Property="TextColor" Value="White" />
    </Style>
</Application.Resources>

Appearance and Color Change with MAUI Themes

With MAUI Themes, you can easily switch between Dark/Light modes in your application. Themes are structured as Resource Dictionaries that change the general appearance of the application. For example, a dark theme can be defined as follows:

<ResourceDictionary x:Key="DarkTheme">
    <Color x:Key="PageBackgroundColor">#1a1a1a</Color>
    <Color x:Key="MainTextColor">#ffffff</Color>
</ResourceDictionary>

To switch between themes, you can change the relevant theme in code through App.Current.Resources.MergedDictionaries.

Theme Switching Code Example

void ChangeTheme(ResourceDictionary theme)
{
    Application.Current.Resources.MergedDictionaries.Clear();
    Application.Current.Resources.MergedDictionaries.Add(theme);
}

With this method, it is possible to switch between night or day modes according to the user's request. Thanks to the use of MAUI Styles and Themes, you can create designs that are both consistent and user-oriented.

Conclusion: Advantages of MAUI Styles and Themes

In summary, with MAUI Styles and Themes you can manage the appearance of your application centrally and design modern interfaces quickly and easily. It is recommended to use these tools effectively to minimize code duplication and develop up-to-date and sustainable projects. In modern applications, MAUI Styles and Themes are indispensable.