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>
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:
<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.