Add Aesthetically Appealing Material Design to Your Windows Presentation Framework Applications
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.
Then, 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. Markedly, this NuGet package has a dependency on another NuGet package, MaterialDesignColors. We use this package when selecting the theme colors for the application. At present, the current version of MaterialDesignThemes is 3.1.1
Step 3: Include the Theme Resources in App.xaml
Two 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.
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
Code language: HTML, XML (xml)
Then, we need to decide if our app will use a light or dark theme as well as the primary and secondary colors. The simplest option is to use one of the built-in themes provided by the BundledTheme
resource dictionary. We will add the appropriate resource dictionary for the theme and merge it with the previous dictionary we added.
The BundledTheme
resource dictionary is included in the materialDesign
xlmns:
<Application x:Class="Example.App"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:materialDesign="https://materialdesigninxaml.net/winfx/xaml/themes"
StartupUri="MainWindow.xaml">
Code language: HTML, XML (xml)
Add the resource dictionary and choose colors:
<ResourceDictionary.MergedDictionaries>
<materialDesign:BundledTheme BaseTheme="Light" PrimaryColor="DeepPurple" SecondaryColor="Lime" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
</ResourceDictionary.MergedDictionaries>
Code language: HTML, XML (xml)
Finally, when done the complete App.xaml should look something like this:
<Application x:Class="Example.App"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:materialDesign="https://materialdesigninxaml.net/winfx/xaml/themes"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<materialDesign:BundledTheme BaseTheme="Light" PrimaryColor="DeepPurple" SecondaryColor="Lime" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
Code language: HTML, XML (xml)
If you would prefer to use your own custom colors for the theme, you can do this with the CustomColorTheme
resource dictionary (also included in the materialDesign
xlmns). A final App.xaml should look something like this:
<Application x:Class="Example.App"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:materialDesign="https://materialdesigninxaml.net/winfx/xaml/themes"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<materialDesign:CustomColorTheme BaseTheme="Light" PrimaryColor="Aqua" SecondaryColor="DarkGreen" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
Code language: HTML, XML (xml)
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. Additionally, both of these should use DynamicResource so they automatically update if the theme changes.
<Window x:Class="MaterialDesignColors.WpfExample.MainWindow"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
Background="{DynamicResource MaterialDesignPaper}"
TextElement.Foreground="{DynamicResource MaterialDesignBody}">
...
</Window>
Code language: HTML, XML (xml)
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. Also, you can 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 the display. We can quickly change it to use one of the other theme colors.

Style keys from left to right: MaterialDesignRaisedLightButton, MaterialDesignRaisedButton, MaterialDesignRaisedDarkButton, MaterialDesignRaisedAccentButton.
Let’s change the button to use the accent color.
Most importantly, we must include these styles because they are not automatically referenced in the XAML. To clarify, this, in general, 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..xaml”. The complete list is on GitHub
First, we include the additional button styles by merging the resource dictionary.
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
Code language: HTML, XML (xml)
Now we can set the style of the button to use the MaterialDesignRaisedAccentButton style.
<Button
Style="{StaticResource MaterialDesignRaisedAccentButton}"
Width="100"
Content="ACCENT"/>
Code language: HTML, XML (xml)

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 About Material Design WPF
Why is there no style for the TabControl?
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 on GitHub.
What about window styles and customizations?
This library integrates with MahApps to support some of the advanced windowing solutions. You can see an example of integrating the two libraries on GitHub.
Where can I get additional help?
There are several resources available. There is a wiki, gitter chat room, and as always, Stack Overflow (with tag material-design-in-xaml). Additionally, I maintain a repository with lots of small example projects. Let me know what examples you would like to see.
Want More?
Check out my blog Material Design in XAML – How to make sense of the Dialog Host.

Does Your Organization Need a Custom Solution?
Let’s chat about how we can help you achieve excellence on your next project!
Hi,
I am not sure my question is right as I am new to the technology.
My question is, Does it support Accessibility?
Thanks,
Saro
Hi Saro,
Good question. This library does not set any of the accessibility properties on the controls, it merely provides a different look and feel for them. To provide accessibility you will still need to set the appropriate properties on the controls. See this documentation page for more details: https://docs.microsoft.com/accessibility-tools-docs/items/wpf/button_isexpandcollapsepatternavailable
If you run into any accessibility issues with the library, please log issues for them on the repository.
~Kevin
Hi what you said here
“Most importantly, we must include these styles because they are not automatically referenced in the XAML.”
I actually tried to remove the
“” in App.xaml but actually it still provide the styles of the button. Im on version 4.4.0 of MaterialDesignThemes maybe it is automatically referenced in the XAML as of now? What are your thoughts.
Hi Alvin,
You are correct. The default (implicit) style for all of the controls get pulled in from the reference in App.xaml to the MaterialDesignTheme.Defaults.xaml resource dictionary. It now contains references to most of the control resource dictionaries, so you likely can omit the specific includes to each of the control specific resource dictionaries. You can see the complete list of which resource dictionaries are merged in here: https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/blob/master/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Defaults.xaml.
Hi
How to add the ResourceDictionary Source in the .net core WPF application, below is not working.
Hi Pramod. I am not sure I understand the question. However you can find a simple example of doing this with .NET Core in WPF here: https://github.com/Keboo/MaterialDesignInXaml.Examples/blob/master/RadioButton/RadioButton.Colors/RadioButton.Colors.csproj
Hi, I really want to know how to display the Material Design In XAML Toolkit window In the last step of the tutorial, I have been unable to display this window.I see it is very convenient for you to use, I am eager to know how to bring up this window, thank you.
Hi MinGuo sorry for the long reply. That window is the demo application that can be found as part of each release. https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/releases
Hi,
How to run this screen? I tried to open it the toolkit in visual studio 2017, but no idea how to run it…
/wp-content/uploads/2018/07/MDIXUsingStyleExample.gif
Please provide some example how to start to use this toolkit.
Thanks
Hi Patty,
That is the demo application. You can download a pre-compiled copy of it from the releases page: https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/releases
Once you run it you will see view very similar to that example.
Hi Kev,
Thank you so much for pointing me to the right direction to run the toolkit.
Can you tell me what control in Material Design (WPF) can input only number (price) bro?
Thank so much!
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
Thanks for this quick yet comprehensive intro.
Thank you, much appreciated…love the library, love the results!!!