How to Implement Material Design 3 in a .NET MAUI Application

Material Design is a cross-platform system of guidelines developed by Google. Inspired by the textures of the physical world, it helps you craft visually captivating interfaces with balanced colors and enhanced usability (the objective is to focus attention on essential UI elements). The DevExpress .NET MAUI Suite includes 10 built-in Material Design 3 color themes — available in both dark and light variants. With the help of the ThemeColor markup extension and project templates, you can easily support Material Design 3 themes in applications using DevExpress or standard .NET MAUI controls.

Access the Material Design 3 Palette

Material Design 3 Palette is generated based on a given seed color. From this color, the Material Design 3 algorithm creates six tonal palettes. To support dark and light application appearance, the algorithm takes colors from tonal palettes and creates color schemes. Material Design 3 ensures color scheme colors have sufficient contrast and a consistent appearance. To use Material Design 3 colors in your application, simply bind controls directly to a color scheme’s colors. Refer to the Color Theme Anatomy section for more information.

To simplify bindings, we ship a ThemeManager class. This member allows you to generate a new theme based on a seed color and apply it to the application. This capability will be of value for those who wish to style applications based on brand colors.

using DevExpress.Maui;
using DevExpress.Maui.Core; 
using Microsoft.Maui.Graphics; 
// ... 
public static class MauiProgram { 
  public static MauiApp CreateMauiApp() { 
    ThemeManager.UseAndroidSystemColor = false; 
    ThemeManager.Theme = new Theme(Color.FromArgb("FF6200EE")); 
    var builder = MauiApp.CreateBuilder(); 
    builder 
      .UseDevExpress() 
      // ... 
      .UseMauiApp<App>(); 
    return builder.Build(); 
  } 
}

You can also use the APIs mentioned above to apply a predefined theme to your application:

using DevExpress.Maui; 
using DevExpress.Maui.Core; 
// ... 
public static class MauiProgram { 
  public static MauiApp CreateMauiApp() { 
    ThemeManager.UseAndroidSystemColor = false; 
    ThemeManager.Theme = new Theme(ThemeSeedColor.TealGreen); 
    var builder = MauiApp.CreateBuilder(); 
    builder 
      .UseDevExpress() 
      // ... 
      .UseMauiApp<App>(); 
    return builder.Build(); 
  } 
}

When you need to use a color scheme’s color, you can use the ThemeColor markup extension to pick a color by its token name.

To maintain application consistency with the appearance of a device, we also added the ThemeManager.UseAndroidSystemColor property. It takes the primary color of your Android device as a seed color, generates a new theme based on it, and applies the theme to the application.

Additionally, you can set a custom navigation bar’s background and foreground colors (available on Android OS), status bar background color (available on Android OS), and status bar foreground color (for both Android OS and iOS).

ThemeManager.Theme = new Theme(ThemeSeedColor.DarkGreen); 
ThemeManager.AndroidNavigationBarForeground = AppTheme.Light;

Refer to the following topic for additional guidance: Apply System Colors to System Bars

You can also visit the DevExpress .NET MAUI Demo Center GitHub repository to view our theme engine in action.

Use Predefined Material Design Styles

The default appearances of our .NET MAUI Controls meet Material Design 3 guideline requirements. Like Material Design 3, our controls support multiple types: Accent, Filled, Outlined, and Text.

When it comes to application appearance, design consistency of utmost importance. If you use both standard controls and DevExpress .NET MAUI Controls in a single solution, you can apply our color themes to standard controls to introduce consistency across your entire mobile project.

If you create a new application, you do not need to worry about extra code because we added styles for standard controls in our project templates. If you already have an application, you simply need to use our ThemeColor markup extension to bind standard controls to DevExpress .NET MAUI Color Themes.

Refer to the following topic for more information in this regard: Apply Color Theme to a Standard Control

To review sample code used to theme standard .NET MAUI controls: Apply Themes to Standard Controls

Summary

Material Design 3 principles help you deliver mobile solutions with a consistent, modern appearance. While Material Design 3 includes many rules and uses sophisticated algorithms for color calculation, our components and predefined project templates have been designed to style your app with relative ease.

Free DevExpress Products — Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We’ll be happy to follow-up.

Originally published at https://community.devexpress.com.