Chapter 8 Advanced UI Concepts

the BackgroundColor to white and a user switches on dark mode on their device, they would have a rather unpleasant experience. Figure 8-1 shows how the application currently looks and highlights the issue.

Figure 8-1.  The application showing the overlay with a poor user experience

Let’s look at how .NET MAUI provides the ability to style your applications, which includes supporting light and dark modes.

Styling

.NET MAUI provides the ability to style your applications. Styling in .NET MAUI offers many advantages:

230

Chapter 8 Advanced UI Concepts

•\ Style inheritance

Styles in .NET MAUI can be defined at many different levels and where they are defined is extremely important when understanding what impact they will have. The two key distinctions between where they are defined can be considered as

•\ Globally : These styles are added to the application’s resources. You can see an example of this if you open the App.xaml file. The line in bold shows that another file (Styles.xaml) containing the styles is loaded into the Application.Resources property. These styles apply to all controls in the application unless otherwise explicitly overridden.

<Application xmlns="http://schemas.microsoft.com/ dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/

winfx/2009/xaml" xmlns:local="clr-namespace:WidgetBoard" x:Class="WidgetBoard.App">

<Application.Resources>

<ResourceDictionary>

<ResourceDictionary.MergedDictionaries>

<ResourceDictionary

Source="Resources/Styles/Colors. xaml" />

<ResourceDictionary Source="Resources/ Styles/Styles.xaml" />

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

231