5 Steps to Getting Started with Material Design In XAML

,

Material Design in XAML. A Simple 5-Step Tutorial

Material Design In XAML (MDIX) is a beautiful theme library that brings Google’s Material Design to your Windows Presentation Framework (WPF) applications. In this tutorial, we look at how easy it is to get started and add some beautiful material design to your application.

 

If you have an existing WPF project, you can skip to step two.

Step 1: Create a WPF project

From Visual Studio, select File > New > Project.
Under the Installed category, expand either the Visual C# or Visual Basic node and then select Windows Classic Desktop.
Select the WPF App (.NET Framework) template, give the project a name then select OK.

 

Step 2: Add the Material Design in XAML NuGet

Open the Package Manager and add the MaterialDesignThemes NuGet package to the WPF project. This NuGet package has a dependency on another NuGet package, MaterialDesignColors. We use this package later when selecting the theme colors for the application. At present, the current version of MaterialDesignThemes is 2.4.0.

 

Step 3: Include the theme resources in App.xaml

Four required resource dictionaries need to be merged into the Application ResourceDictionary.

Let’s start with the resource dictionary that provides styles for most of the default WPF controls and custom controls.

We need to decide if our app will use the light or dark theme, and add the appropriate resource dictionary.

Or

Now, we must select the primary and accent colors our app will use. You can find a list of primary and accent color resource dictionaries in the GitHub repository here and here. For this example, let’s use blue for the primary color and purple for the accent color.

Please note, unlike the first two resource dictionaries, these color themes come from the MaterialDesingColors package and not MaterialDesignThemes.

When done, the complete App.xaml should look something like this:

 

Step 4: Setup the defaults

Most controls in your application pick up the style and color themes from the MDIX library. However, to make the window render the correct colors, we need to set some default properties (you can see an example of this in the demo application). Set the Background property to the resource MaterialDesignPaper, and TextElement.Foreground to the resource MaterialDesignBody. Both of these should use DynamicResource so they automatically update if the theme changes.

 

Step 5 (optional): Beyond the default styles

Many of the controls in the MDIX library have additional styles beyond the defaults. There is a demo application in the repository with examples of the various styles and controls that are available. Click the button () next to the element to view the corresponding code for it. You can also find pre-compiled versions of the demo application on the releases page.

Let’s use a button as an example. By default, buttons use the primary color theme for display. We can quickly change it to use one of the other theme colors.

Material Design in XAML button styles
Style keys from left to right: MaterialDesignRaisedLightButton, MaterialDesignRaisedButton, MaterialDesignRaisedDarkButton, MaterialDesignRaisedAccentButton.

Let’s change the button to use the accent color.
We must include these styles because they are not automatically referenced in the XAML. In general, this is done at the root of your XAML (typically a Window, UserControl, or ResourceDictionary). All of the additional styles are located in the MaterialDesignThemes package under “/Themes/MaterialDesignTheme.<control type>.xaml”. Here is a complete list.

First, we include the additional button styles by merging the resource dictionary.

 

Now we can set the style of the button to use the MaterialDesignRaisedAccentButton style.

 

Including Material Design in XAML button style in WPF application.

 

In this tutorial, we saw how easy it is to integrate Material Design in XAML into a WPF application. I have been working with, and contributing to this library for over a year and have loved the results.

 

FAQ

Q: Why is there no style for the TabControl?
A: There is a separate library, Dragablz, from the same author that provides a tab control along with the additional functionality for moving the tabs around as well. You can see an example of integrating the two libraries in an example app in the GitHub repository here.

Q: What about window styles and customizations?
A: This library integrates with MahApps to support some of the advanced windowing solutions. You can see an example of integrating the two libraries here.

Q: Where can I get additional help?
A: There are several resources available. There is a wiki, gitter chat room, and as always, Stack Overflow (with tag material-design-in-xaml). In addition, I maintain a repository with lots of small example projects. Let me know what examples you would like to see.

Share this story

4 responses to “5 Steps to Getting Started with Material Design In XAML

    1. There is not a built-in control to do this inside of the library. You can implement this yourself using a behavior. There is a nice example of doing this here: https://github.com/punker76/TextBoxInputMaskBehavior

      There is an outstanding PR in the ControlzEx library (which this library somewhat uses) when that gets merged in I may attempt to include it in MDIX since this feature has been requested before.
      https://github.com/ControlzEx/ControlzEx/issues/45

Leave a Reply

Your email address will not be published. Required fields are marked *