Styling UI Components

Learn how to apply styling to UI components of a .NET MAUI app.

To make a UI look good, we need to apply styling to it. In .NET MAUI, there are two ways we can do it: via XAML and via CSS. This lesson will cover both of these approaches. We'll do this with the help of the following project, which has examples of both types of styling.

<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiGraphicsDemo"
             x:Class="MauiGraphicsDemo.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>
.NET MAUI project that demonstrates MAUI styling

Using XAML to style MAUI pages

The first way of styling XAML elements that we'll look at is using XAML itself. We can apply styling to individual elements by using brushes and color. But we can also define styles globally. Global styles are defined in the App.xaml file in the Application.Resources section that we have on lines 6–13. It looks as follows:

Press + to interact
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>

This section contains a ResourceDictionary section. We can also reference multiple XAML files and merge their content together into a single ...

Get hands-on with 1400+ tech skills courses.