An Introduction to Material Themes for WPF Applications

The ComponentOne WPF Edition supports several built-in themes for .NET 6 and .NET 8 applications, including light and dark Material themes. Applying a material theme in your WPF application is as easy as:

1. Add Package Reference to C1.WPF.Themes.Material
2. Apply the Material Theme with Two Lines of Code
3. (Optional) Customize the Material Theme Colors in XAML

And that’s it! In this blog, we'll walk you through each of these steps to apply and customize a Material theme in a WPF .NET 8 application. Plus, explore the Material Theme Builder to help you design a brilliant color scheme.

What is a WPF Material Theme

We designed our material theme following best practices defined by Material.io. Material themes are not bound by a single color scheme, so we’ve made our WPF Material theme customizable in the easiest way possible: by simply defining colors in XAML.

By customizing our WPF material theme, you can choose a light or dark background and add a pop of accent color to match your application or company branding. Our WPF material theme even supports standard .NET controls.

Ready to Create Your Own Custom Theme? Download ComponentOne Today!

Add Package Reference to C1.WPF.Themes.Material

First, decide if you want a light or dark background.

Then, add the latest 8.0* package C1.WPF.Themes.Material from nuget.org for the light material theme base. Or get the C1.WPF.Themes.MaterialDark package for the dark theme base.

Note that this 8.0* package supports .NET 8, .NET 7, and .NET 6 WPF applications. If you need a .NET Framework, look for the C1.Xaml.WPF.Themes.Material package.

Apply the Material Theme with Two Lines of Code

Open your MainWindow code behind, instantiate the C1Theme, and use the Apply method to theme any specific FrameworkElement (i.e., a single control) or the entire Window using the code below.

C1.WPF.Themes.C1ThemeMaterial myTheme = new C1.WPF.Themes.C1ThemeMaterial();
myTheme.Apply(this); // applies theme to entire window

That’s it! You can also apply a theme to your entire application in one place. Read our previous blog, How to Add WPF Themes to Style Your Desktop Applications, to learn more.

How to Customize the Material Theme Colors in XAML

Next, you can choose to modify the color scheme of the material theme. Add a Resource Dictionary XAML file and name it something like CustomTheme.xaml.

In this file, we will override key brushes by names such as PrimaryColor, BackgroundColor, OnSurfaceColor, and others specific to menus, hyperlinks, and alternate colors. This is how we can easily customize the existing theme. Set the build action of the dictionary to Embedded Resource and copy in the XAML below as a starting point.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <!-- Color & Brush used to build Base brushes -->
    <Color x:Key="PrimaryColor">#a31688</Color>
    <Color x:Key="BackgroundColor">#1688a3</Color>
    <Color x:Key="OnSurfaceColor">White</Color>
    <SolidColorBrush x:Key="MenuHighlightBrush" Color="{StaticResource PrimaryColor}" Opacity="0.04"/>
    <SolidColorBrush x:Key="SubtotalBackground" Color="#0d5060" />
    <Color x:Key="SelectedColor">#026a81</Color>

    <!-- C1HyperLinkButton Foreground-->
    <SolidColorBrush x:Key="HyperLinkForeground" Color="#dafdf7" />
    <SolidColorBrush x:Key="IndicatorBrush" Color="#93edf1" />

    <SolidColorBrush x:Key="SliderThumb.Pressed.Background" Color="#026a81"/>
    <SolidColorBrush x:Key="SliderThumb.Pressed.Border" Color="#93edf1"/>

    <SolidColorBrush x:Key="FocusBrush" Color="{StaticResource SelectedColor}"/>
    <SolidColorBrush x:Key="AccentBrush" Color="{StaticResource PrimaryColor}"/>

</ResourceDictionary>

The brush names are based on the material.io color system. If you need to customize more, you can find more brushes in the source XAML of our Material theme (installed to C:\Program Files (x86)\MESCIUS\ComponentOne\WPF\Resources\v8\C1WPFThemesMaterial)

Lastly, modify the code from above with a new overload that passes this CustomTheme.xaml file. You must pass in the assembly type and file name with a full namespace. In our sample called “MyProject” it would look like this below:

myTheme = new C1ThemeMaterial(typeof(MyProject.App).Assembly, "MyProject.CustomTheme.xaml");

And that’s it! You can download the full sample here on GitHub.

How to Design a Good Material Design Color Scheme

If you are not a designer - do not worry! You can take advantage of the material.io Theme Builder to help.

Build a custom color scheme to map dynamic colors, use them as fallback colors, or implement a branded theme. The color system automatically handles critical adjustments that provide accessible color contrast. Use the colors output here as your primary and secondary on surface brushes.

Ready to Create Your Own Custom Theme? Download ComponentOne Today!