Chapter 8 Advanced UI Concepts

The repercussions of using fixed values can include text or content disappearing entirely from the application. Imagine that the text color switches to white in dark mode, with you having hardcoded to a white background of the overlay view, so the user would see no text on screen. This would result in a terrible user experience.

.NET MAUI provides the ability to handle the different modes that a device can run under.

AppThemeBinding

This is an extremely valuable concept. It allows you to define different values based on whether the device your application is running on is set to light or dark mode. Taking the example of the OverlayBorderStyle you previously created, you can modify the Setter for BackgroundColor to

<Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}" />

Now if a user is running in dark mode, the border overlay will be black and the text will be visible.

You only need to apply AppThemeBinding to properties that require a visual distinction between light and dark mode. This typically applies to all Brush/Color properties; however, you could conceivably decide to change the StrokeThickness of your Border control, for example.

Further Reading

It is worth noting that this book is limited to covering the styling options in XAML. However, .NET MAUI does provide support for CSS-based stylesheets. Go to https://docs.microsoft.com/dotnet/maui/userinterface/styles/css.

236