👁 Image
MaterialDesignThemes.MahApps 5.3.2

Material Design In XAML Toolkit

👁 NuGet-Themes
👁 NuGet-Colors

👁 NuGet-Themes-CI
👁 NuGet-Colors-CI

👁 Backers on Open Collective
👁 Sponsors on Open Collective
👁 Chat
👁 Issues

Comprehensive and easy to use Material Design theme and control library for the Windows desktop (WPF).

• Material Design styles for all major WPF Framework controls
• Additional controls to support the theme, including Multi Action Button, Cards, Dialogs, Clock
• Easy configuration of palette (at design and runtime), according to Google's guidelines
• Full Material Design Icons icon pack
• Easy transition effects
• Compatible with Dragablz, MahApps
• Demo applications included in the source project

See screenshots

<details> <summary>Table of contents</summary>

• Getting started
• Building the source
• Screenshots
• More examples
• FAQ
• Contributing
• Mentions
• Backers
• Sponsors

</details>

Getting started

This quick guide assumes you have already created a WPF project and are using Microsoft Visual Studio 2022.

• Install the toolkit through the visual NuGet package manager in Visual Studio or use the following command:

Install-Package MaterialDesignThemes

• Alter your App.xaml

<Application 
 x:Class="Example.App"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:materialDesign="http://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/MaterialDesign2.Defaults.xaml" /> 
 </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>
 </Application.Resources>
</Application>

• If you want to target Material Design 3, alter the ResourceDictionary line in the snippet above to use MaterialDesign3.Defaults.xaml.

• Alter your MainWindow.xaml

<Window [...]
 Style="{StaticResource MaterialDesignWindow}"
 [...] >

XML Namespaces

The toolkit exposes two XML namespaces for use in XAML:

To use the internal namespace in XAML:

<Window ...
 xmlns:materialDesignInternal="http://materialdesigninxaml.net/winfx/xaml/themes-internal">

Building the source

To build the project, following is required:

• Microsoft Visual Studio 2022
• .NET desktop development workload

This repository also contains 3 different demo applications:

• MaterialDesignDemo - Reference WPF app with Material Design 2 styling, this contains all controls and is a recommended tool when developing apps with this library
• MaterialDesign3Demo - Reference WPF app with Material Design 3 styling, under development
• MahAppsDragablzDemo - Demo app for combining with Dragablz and MahApps

Screenshots

<details> <summary>Material Design 3 demo app screenshots</summary>

</details>

<details>

<summary>Material Design 2 demo app screenshots</summary>

</details>

More examples

• Keboo/MaterialDesign.Examples
• Motion List

FAQ

Contributing

Before contributing code read the

• GitHub issues are for bugs and feature requests.
• For questions, help and chat in general, please use the GitHub discussion tab or the Discord server.
• Stack Overflow tag: material-design-in-xaml

Want to say thanks? 🙏🏻

• Hit the ⭐ star ⭐ button
• If you'd like to make a very much appreciated financial donation please visit <a href='https://opencollective.com/materialdesigninxaml'>open collective</a>

This project exists thanks to all the people who contribute.

<a href="https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/graphs/contributors"> <img src="https://contrib.rocks/image?repo=MaterialDesignInXAML/MaterialDesignInXamlToolkit" /> </a>

Mentions

• James Willock 👁 Twitter
  - Founder of the project
• Kevin Bost 👁 Twitter
  - Maintainer of the repository
• Snalty 👁 Twitter
  - Designer of the logo
• Icon pack sourced from Material Design Icons
• ControlzEx - Library used in MaterialDesignInXAML
• Ignace Maes - Whose Material Skin project inspired the original material design theme for Dragablz, which in turn led James Willock start this project
• Material Design Extensions - A community repository based on this library that provides additional controls and features.
• Contributors - A big thank you to all the contributors of the project!

Backers

Thank you to all our backers! 🙏 Become a backer.

<a href="https://opencollective.com/materialdesigninxaml#backers" target="_blank"><img src="https://opencollective.com/materialdesigninxaml/backers.svg?width=890"></a>

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. Become a sponsor.

<a href="https://opencollective.com/materialdesigninxaml/sponsor/0/website" target="_blank"><img src="https://opencollective.com/materialdesigninxaml/sponsor/0/avatar.svg"></a> <a href="https://opencollective.com/materialdesigninxaml/sponsor/1/website" target="_blank"><img src="https://opencollective.com/materialdesigninxaml/sponsor/1/avatar.svg"></a> <a href="https://opencollective.com/materialdesigninxaml/sponsor/2/website" target="_blank"><img src="https://opencollective.com/materialdesigninxaml/sponsor/2/avatar.svg"></a> <a href="https://opencollective.com/materialdesigninxaml/sponsor/3/website" target="_blank"><img src="https://opencollective.com/materialdesigninxaml/sponsor/3/avatar.svg"></a> <a href="https://opencollective.com/materialdesigninxaml/sponsor/4/website" target="_blank"><img src="https://opencollective.com/materialdesigninxaml/sponsor/4/avatar.svg"></a> <a href="https://opencollective.com/materialdesigninxaml/sponsor/5/website" target="_blank"><img src="https://opencollective.com/materialdesigninxaml/sponsor/5/avatar.svg"></a> <a href="https://opencollective.com/materialdesigninxaml/sponsor/6/website" target="_blank"><img src="https://opencollective.com/materialdesigninxaml/sponsor/6/avatar.svg"></a> <a href="https://opencollective.com/materialdesigninxaml/sponsor/7/website" target="_blank"><img src="https://opencollective.com/materialdesigninxaml/sponsor/7/avatar.svg"></a> <a href="https://opencollective.com/materialdesigninxaml/sponsor/8/website" target="_blank"><img src="https://opencollective.com/materialdesigninxaml/sponsor/8/avatar.svg"></a> <a href="https://opencollective.com/materialdesigninxaml/sponsor/9/website" target="_blank"><img src="https://opencollective.com/materialdesigninxaml/sponsor/9/avatar.svg"></a>