Introduction

Completed

Using the same fonts and colors across your entire UI creates a consistent look and feel. .NET MAUI provides a way to define these values in one place and look them up everywhere they're used. Reusing values guarantees consistency across your app and makes updates simple.

Suppose you're building a mobile application called TipCalculator. The app is used in the hospitality industry and allows attendants to quickly calculate the gratuity for any service. Your company recently changed the look of its corporate brand. Your job is to update the app's UI to match the new look. You need to change fonts, text colors, and background colors. You want to make this kind of update easy because there are sure to be more branding changes as your company grows.

In this module, you learn how to define and apply a resource both in code and in XAML. You also see how to group multiple settings into a style so you can apply them all at once.

Note

This module requires Visual Studio 2022. You can use either Windows or a Mac. If you're running on Windows, make sure you have the Mobile development with .NET workload installed. Refer to the documentation if you need to add it to your installation. If you're running on a Mac, the standard Visual Studio for Mac installation includes everything you need to build apps with .NET MAUI.

Learning objectives

In this module, you learn how to:

  • Create and use static resources in a MAUI XAML user interface.
  • Create and use dynamic resources.
  • Create a consistent user interface by using styles.
  • Create and use application-wide resources.
  • Apply user accessibility choices by using built-in styles.

Prerequisites

  • Visual Studio 2022 with the .NET MAUI workload installed.
  • Optional: Visual Studio Code with the .NET MAUI Extension and .NET SDK with the .NET MAUI workload installed.
  • Familiarity with C# and .NET.

Requirements for .NET MAUI development

To create .NET MAUI apps with .NET 8, you need to install Visual Studio version 17.8 or newer with the following workload installed:

  • .NET Multi-Platform App UI development

Additionally, if you want to build .NET MAUI Blazor apps, you must install the ASP.NET and web development workload.

See the documentation for a walkthrough of setup.

Development with Visual Studio Code

If you're developing on macOS or Linux, you'll need to install Visual Studio Code and the .NET MAUI Extension along with the .NET SDK and .NET MAUI Workload. See the documentation for a walkthrough of setup.