Styling UI Components
Explore how to apply styling to .NET MAUI user interfaces using both XAML and CSS methods. Understand defining global styles, using brushes and colors, and managing visual states to create visually appealing and responsive app components.
We'll cover the following...
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>
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:
This section contains a ResourceDictionary section. We can also reference multiple XAML files and merge their content together ...