MaterialDesignInXamlToolkit
Google's Material Design in XAML & WPF, for C# & VB.Net.
Top Related Projects
Develop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The most popular .NET UI client technology
A framework that allows developers to cobble together a better UI for their own WPF applications with minimal effort.
Dragable and tearable tab control for WPF
Modern UI for WPF
Theming .NET WinForms, C# or VB.Net, to Google's Material Design Principles.
Modern styles and controls for your WPF applications
Quick Overview
MaterialDesignInXamlToolkit is a comprehensive library for implementing Google's Material Design in WPF applications. It provides a rich set of controls, styles, and themes that adhere to Material Design principles, allowing developers to create modern and visually appealing user interfaces with ease.
Pros
- Extensive collection of Material Design-compliant controls and styles
- Regular updates and active community support
- Seamless integration with existing WPF projects
- Customizable themes and color schemes
Cons
- Learning curve for developers new to Material Design concepts
- Some advanced customizations may require in-depth knowledge of the library
- Potential performance impact on large-scale applications with heavy use of animations
Code Examples
- Setting up the Material Design theme in App.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>
- Creating a Material Design button with an icon:
<Button Style="{StaticResource MaterialDesignRaisedButton}"
Content="SUBMIT"
ToolTip="Submit the form">
<Button.Icon>
<materialDesign:PackIcon Kind="Send" />
</Button.Icon>
</Button>
- Implementing a Material Design card:
<materialDesign:Card Padding="32" Margin="16">
<StackPanel>
<TextBlock Style="{DynamicResource MaterialDesignHeadline6TextBlock}">
Card Title
</TextBlock>
<TextBlock Style="{DynamicResource MaterialDesignBody2TextBlock}" Margin="0 8 0 0">
Card content goes here.
</TextBlock>
</StackPanel>
</materialDesign:Card>
Getting Started
-
Install the NuGet package:
Install-Package MaterialDesignThemes -
Add the following to your App.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> -
Add the namespace to your XAML files:
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes" -
Start using Material Design controls and styles in your WPF application!
Competitor Comparisons
Develop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The most popular .NET UI client technology
Pros of Avalonia
- Cross-platform support for Windows, macOS, Linux, iOS, Android, and WebAssembly
- Modern, flexible UI framework with XAML-based design
- Active development and growing community
Cons of Avalonia
- Steeper learning curve for developers new to XAML-based frameworks
- Smaller ecosystem and fewer third-party controls compared to WPF
Code Comparison
MaterialDesignInXamlToolkit (XAML):
<Button Style="{StaticResource MaterialDesignRaisedButton}"
Content="ACCEPT" />
Avalonia (XAML):
<Button Classes="accent"
Content="ACCEPT" />
Both frameworks use XAML for UI design, but Avalonia's syntax is more streamlined and platform-agnostic. MaterialDesignInXamlToolkit focuses on providing Material Design-styled controls for WPF applications, while Avalonia offers a complete cross-platform UI framework with its own styling system.
Avalonia's main advantage is its cross-platform capabilities, allowing developers to create applications that run on multiple operating systems and devices. However, MaterialDesignInXamlToolkit excels in providing a comprehensive set of Material Design controls and themes specifically for WPF applications, which may be preferable for Windows-focused projects.
Developers choosing between these frameworks should consider their target platforms, design requirements, and existing expertise in XAML-based technologies.
A framework that allows developers to cobble together a better UI for their own WPF applications with minimal effort.
Pros of MahApps.Metro
- More established and mature project with a longer history
- Wider range of controls and features out-of-the-box
- Better integration with Windows-specific UI elements
Cons of MahApps.Metro
- Less adherence to Material Design principles
- Slower adoption of modern design trends
- More complex theming system compared to MaterialDesignInXamlToolkit
Code Comparison
MahApps.Metro:
<Controls:MetroWindow x:Class="MainWindow"
xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
Title="MahApps.Metro Window" Height="600" Width="800">
<Controls:MetroWindow.RightWindowCommands>
<Controls:WindowCommands>
<Button Content="Settings" />
</Controls:WindowCommands>
</Controls:MetroWindow.RightWindowCommands>
</Controls:MetroWindow>
MaterialDesignInXamlToolkit:
<Window x:Class="MainWindow"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
Title="Material Design Window" Height="600" Width="800">
<materialDesign:Card Padding="32" Margin="16">
<TextBlock Style="{DynamicResource MaterialDesignHeadline6TextBlock}">
Hello, Material Design!
</TextBlock>
</materialDesign:Card>
</Window>
Dragable and tearable tab control for WPF
Pros of Dragablz
- Focused on providing advanced tab control functionality, including docking and layout features
- Lightweight and specialized, making it easier to integrate for specific tab-related needs
- Offers unique features like tab tearing and docking that are not present in MaterialDesignInXamlToolkit
Cons of Dragablz
- Limited scope compared to MaterialDesignInXamlToolkit, which offers a comprehensive Material Design implementation
- Less active development and community support
- Requires more custom styling to achieve a cohesive Material Design look
Code Comparison
Dragablz tab control implementation:
<dragablz:TabablzControl>
<dragablz:TabablzControl.InterTabController>
<dragablz:InterTabController />
</dragablz:TabablzControl.InterTabController>
<TabItem Header="Tab No. 1" IsSelected="True">
<TextBlock>Hello World</TextBlock>
</TabItem>
</dragablz:TabablzControl>
MaterialDesignInXamlToolkit tab control implementation:
<materialDesign:Card>
<TabControl Style="{StaticResource MaterialDesignTabControl}">
<TabItem Header="Tab No. 1">
<TextBlock>Hello World</TextBlock>
</TabItem>
</TabControl>
</materialDesign:Card>
Both libraries offer unique features and cater to different needs. Dragablz excels in advanced tab control functionality, while MaterialDesignInXamlToolkit provides a comprehensive Material Design implementation for WPF applications.
Modern UI for WPF
Pros of MUI
- Lightweight and minimalistic design, focusing on core Material Design principles
- Easier to customize and extend due to its simpler architecture
- Better performance for smaller applications with fewer components
Cons of MUI
- Less comprehensive component library compared to MaterialDesignInXamlToolkit
- Fewer built-in themes and color options
- Less active community and fewer updates
Code Comparison
MUI:
<mui:ModernWindow x:Class="MainWindow"
xmlns:mui="http://firstfloorsoftware.com/ModernUI"
Title="MUI Example" Style="{StaticResource BlankWindow}">
<mui:ModernFrame Source="/Pages/Home.xaml" />
</mui:ModernWindow>
MaterialDesignInXamlToolkit:
<Window x:Class="MainWindow"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
Background="{DynamicResource MaterialDesignPaper}">
<materialDesign:Card Padding="32" Margin="16">
<TextBlock Style="{DynamicResource MaterialDesignHeadline6TextBlock}">
Hello, Material Design!
</TextBlock>
</materialDesign:Card>
</Window>
Both libraries offer Material Design-inspired components for WPF applications, but MaterialDesignInXamlToolkit provides a more extensive set of controls and styling options. MUI is better suited for simpler projects or those requiring a lighter footprint, while MaterialDesignInXamlToolkit is ideal for larger applications needing a wide range of pre-built components and theming capabilities.
Theming .NET WinForms, C# or VB.Net, to Google's Material Design Principles.
Pros of MaterialSkin
- Simpler implementation for basic Material Design elements
- Lightweight and easy to integrate into existing WinForms projects
- Faster rendering performance for simpler UI components
Cons of MaterialSkin
- Limited to Windows Forms applications
- Fewer customization options compared to MaterialDesignInXamlToolkit
- Less frequent updates and smaller community support
Code Comparison
MaterialSkin:
MaterialSkinManager.Instance.AddFormToManage(this);
MaterialSkinManager.Instance.Theme = MaterialSkinManager.Themes.LIGHT;
MaterialSkinManager.Instance.ColorScheme = new ColorScheme(Primary.Blue400, Primary.Blue500, Primary.Blue500, Accent.LightBlue200, TextShade.WHITE);
MaterialDesignInXamlToolkit:
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
MaterialDesignInXamlToolkit offers more extensive theming options and is designed for WPF applications, while MaterialSkin provides a simpler approach for Windows Forms projects. The code comparison shows the different setup processes, with MaterialSkin using C# for configuration and MaterialDesignInXamlToolkit utilizing XAML resources.
Modern styles and controls for your WPF applications
Pros of ModernWpf
- Focuses on providing a modern Windows 10/11 look and feel, closely mimicking native UI
- Lighter weight and potentially easier to integrate into existing projects
- Includes built-in support for dark mode and high contrast themes
Cons of ModernWpf
- Less extensive component library compared to MaterialDesignInXamlToolkit
- May not be as suitable for projects requiring a more customized or branded appearance
- Less active community and fewer contributors
Code Comparison
MaterialDesignInXamlToolkit:
<Button Style="{StaticResource MaterialDesignRaisedButton}"
Content="ACCEPT" />
ModernWpf:
<Button Style="{StaticResource AccentButtonStyle}"
Content="Accept" />
Both libraries offer custom styles for common WPF controls, but MaterialDesignInXamlToolkit tends to use more descriptive style names, while ModernWpf often aligns closer to default WPF naming conventions with a focus on Windows 10/11 styling.
MaterialDesignInXamlToolkit provides a wider range of pre-built components and more extensive customization options, making it suitable for projects requiring a distinct Material Design look. ModernWpf, on the other hand, excels at providing a native Windows 10/11 appearance with minimal setup, making it ideal for applications that aim to blend seamlessly with the operating system's UI.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
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
Table of contents
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
ResourceDictionaryline 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
Material Design 3 demo app screenshots

Material Design 2 demo app screenshots
[!WARNING] The screenshots below are taken from the Material Design 2 demo app. Material Design 3 is the latest version, so the UI shown here may differ from the latest design.

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 open collective
This project exists thanks to all the people who contribute.
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.
Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. Become a sponsor.
Top Related Projects
Develop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The most popular .NET UI client technology
A framework that allows developers to cobble together a better UI for their own WPF applications with minimal effort.
Dragable and tearable tab control for WPF
Modern UI for WPF
Theming .NET WinForms, C# or VB.Net, to Google's Material Design Principles.
Modern styles and controls for your WPF applications
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot