Awesome
<!-- omit in toc -->Material Design In XAML Toolkit
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
- Getting started
- Building the source
- Screenshots
- More examples
- FAQ
- Contributing
- Mentions
- Backers
- Sponsors
Getting started
[!NOTE] See the full starting guide for more in-depth information.
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 useMaterialDesign3.Defaults.xaml
. -
Alter your
MainWindow.xaml
<Window [...]
Style="{StaticResource MaterialDesignWindow}"
[...] >
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 libraryMaterialDesign3Demo
- Reference WPF app with Material Design 3 styling, under developmentMahAppsDragablzDemo
- Demo app for combining with Dragablz and MahApps
Screenshots
<details> <summary>Show images</summary>[!WARNING] The screenshots below are taken from the Material Design 2 demo app. It is possible that these are out of date. Run the demo app from latest source to see the latest version.
</details>
More examples
FAQ
Contributing
Before contributing code read the Contribution Guidelines
- 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: star :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 - Founder of the project
- Kevin Bost - Maintainer of the repository
- Snalty - 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>