• GitHub
  • Twitter
  • Blog
  • Dragablz
  • MahApps
Material Design In XAML Toolkit
The quickest, easiest way to bring Material Design to your desktop WPF applications.

An open source library to providing the Material Design palette, plenty of control themes, and new custom controls to bring this popular design language to your desktop applications.

Take a look around at the video and screen shots, then follow the easy Get Started guide to give your app a makeover.

Included are themes for (almost) all standard .Net Framework controls, plus some added extras including the easy to use Card, TimePicker and ColorZone controls.

We integrate nicely

Integrates seamlessly with MahApps and Dragablz to help bring the richest possible experience to the desktop.

Open source

Benefit from the work going on the open source community, learn some more about WPF & XAML, use the themes as a springboard for your own Material Designs.

Visit the GitHub homepagechevron_right

Get Started

To familiarise yourself, be sure to try out the test projects included in the main source code on GitHub. Once you've done that, try it out in a new WPF project.

Install from NuGet. From the Package Manager Console in Visual Studio type:

PM> Install-Package MaterialDesignThemes

You need to configure your app.xaml. For now let's assume your are not using MahApps. A Material Design palette consists of a primary colour and an accent colour. You can also adjust the hues of each colour, but that's not necessary to start. The demo project contains a palette selector, but to get started, just copy the XAML from the test application into your app.xaml.

You can copy the app.xaml content from here.

Now, in your MainWindow.xaml add a few attributes to the root to configure the the colours and Roboto font:

    TextElement.Foreground="{DynamicResource MaterialDesignBody}"
    Background="{DynamicResource MaterialDesignPaper}"

And you're ready to start adding controls: add a couple, say a Button and CheckBox. Run up the project and they should appear in the new theme.

You can go back and adjust the palette (and light/dark mode) in the App.xaml, it is clearly marked where to adjust the primary and accent colour. Note the palette can be adjusted at runtime using PaletteHelper.

Congratulations, you have taken the first steps to a sweet looking desktop app!