| name | materialdesigninxaml-wpf-toolkit |
| description | Google's Material Design theme and control library for WPF applications in C# and VB.Net |
| triggers | ["how do I add Material Design to my WPF app","setup Material Design themes in XAML","use Material Design controls in WPF","configure Material Design color palette","create Material Design dialogs in WPF","implement Material Design cards and buttons","style WPF app with Material Design","add Material Design icons to XAML"] |
MaterialDesignInXamlToolkit
Skill by ara.so — Design Skills collection.
Comprehensive Material Design theme and control library for Windows desktop WPF applications. Provides Material Design styles for all major WPF controls, additional custom controls (cards, dialogs, chips, etc.), easy palette configuration, full Material Design Icons pack, and transition effects.
Installation
Install via NuGet Package Manager or Package Manager Console:
Install-Package MaterialDesignThemes
Or via .NET CLI:
dotnet add package MaterialDesignThemes
Initial Setup
App.xaml Configuration
Configure the base theme in your App.xaml:
<Application
x:Class="YourApp.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>
Window Setup
Apply Material Design style to your main window:
<Window x:Class="YourApp.MainWindow"
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"
Style="{StaticResource MaterialDesignWindow}"
Height="450" Width="800">
</Window>
Theme Configuration
Available Color Palettes
Primary and Secondary colors can be set to:
- Red, Pink, Purple, DeepPurple, Indigo, Blue, LightBlue, Cyan, Teal, Green, LightGreen, Lime, Yellow, Amber, Orange, DeepOrange, Brown, Grey, BlueGrey
Dark Theme
<materialDesign:BundledTheme
BaseTheme="Dark"
PrimaryColor="Indigo"
SecondaryColor="Cyan" />
Runtime Theme Switching
In C#:
using MaterialDesignThemes.Wpf;
using MaterialDesignColors;
var paletteHelper = new PaletteHelper();
ITheme theme = paletteHelper.GetTheme();
theme.SetBaseTheme(Theme.Dark);
paletteHelper.SetTheme(theme);
theme.SetPrimaryColor(Colors.Blue);
paletteHelper.SetTheme(theme);
theme.SetSecondaryColor(Colors.Lime);
paletteHelper.SetTheme(theme);
Common Controls
Buttons
<Button Style="{StaticResource MaterialDesignRaisedButton}"
Content="Raised Button" />
<Button Style="{StaticResource MaterialDesignOutlinedButton}"
Content="Outlined Button" />
<Button Style="{StaticResource MaterialDesignFlatButton}"
Content="Flat Button" />
<Button Style="{StaticResource MaterialDesignIconButton}"
ToolTip="Delete">
<materialDesign:PackIcon Kind="Delete" />
</Button>
<Button Style="{StaticResource MaterialDesignFloatingActionButton}"
ToolTip="Add">
<materialDesign:PackIcon Kind="Plus" />
</Button>
<Button Style="{StaticResource MaterialDesignFloatingActionMiniButton}">
<materialDesign:PackIcon = />
Cards
<materialDesign:Card Padding="16" Margin="8">
<StackPanel>
<TextBlock Style="{StaticResource MaterialDesignHeadline6TextBlock}"
Text="Card Title" />
<TextBlock Style="{StaticResource MaterialDesignBody2TextBlock}"
TextWrapping="Wrap"
Text="Card content goes here. Cards contain content and actions about a single subject." />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,16,0,0">
<Button Style="{StaticResource MaterialDesignFlatButton}"
Content="ACTION 1" />
<Button Style="{StaticResource MaterialDesignFlatButton}"
Content="ACTION 2" />
</StackPanel>
</StackPanel>
</materialDesign:Card>
Text Fields
<TextBox materialDesign:HintAssist.Hint="Email"
Style="{StaticResource MaterialDesignFilledTextBox}" />
<TextBox materialDesign:HintAssist.Hint="Name"
Style="{StaticResource MaterialDesignOutlinedTextBox}" />
<TextBox materialDesign:HintAssist.Hint="Username"
materialDesign:HintAssist.HelperText="Choose a unique username"
Style="{StaticResource MaterialDesignFilledTextBox}" />
<TextBox materialDesign:HintAssist.Hint="Description"
materialDesign:TextFieldAssist.CharacterCounterVisibility="Visible"
MaxLength="100"
Style="{StaticResource MaterialDesignOutlinedTextBox}" />
<PasswordBox materialDesign:HintAssist.Hint="Password"
Style="{StaticResource MaterialDesignFilledPasswordBox}" />
Icons
Using Material Design Icons pack:
<materialDesign:PackIcon Kind="Home" />
<materialDesign:PackIcon Kind="Account" Width="24" Height="24" />
<materialDesign:PackIcon Kind="Heart" Foreground="Red" Width="32" Height="32" />
<Button>
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Delete" Margin="0,0,8,0" />
<TextBlock Text="Delete" />
</StackPanel>
</Button>
Browse all icons at: https://materialdesignicons.com/
Chips
<materialDesign:Chip Content="Basic Chip" />
<materialDesign:Chip Content="Deletable"
IsDeletable="True"
DeleteClick="Chip_DeleteClick" />
<materialDesign:Chip>
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Account" />
<TextBlock Text="User Chip" Margin="8,0,0,0" />
</StackPanel>
</materialDesign:Chip>
<materialDesign:ChipGroup>
<materialDesign:Chip Content="Choice 1" />
<materialDesign:Chip Content="Choice 2" />
<materialDesign:Chip Content="Choice 3" />
</materialDesign:ChipGroup>
Dialogs
In XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinations>
<materialDesign:DialogHost Identifier="RootDialog" Grid.RowSpan="2">
<Grid>
<Button Content="Open Dialog" Click="OpenDialog_Click" />
</Grid>
</materialDesign:DialogHost>
</Grid>
In C#:
using MaterialDesignThemes.Wpf;
private async void OpenDialog_Click(object sender, RoutedEventArgs e)
{
await DialogHost.Show(new TextBlock
{
Text = "This is a dialog",
Margin = new Thickness(16)
}, "RootDialog");
}
private async void OpenCustomDialog_Click(object sender, RoutedEventArgs e)
{
var view = new SampleDialogView();
var result = await DialogHost.Show(view, "RootDialog");
if (result is bool boolResult && boolResult)
{
}
}
private void CloseDialog_Click(object sender, RoutedEventArgs e)
{
DialogHost.Close("RootDialog", true);
}
Full dialog with custom content:
<StackPanel Margin="16">
<TextBlock Style="{StaticResource MaterialDesignHeadline6TextBlock}"
Text="Confirm Action" />
<TextBlock Margin="0,16"
Text="Are you sure you want to proceed?" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Style="{StaticResource MaterialDesignFlatButton}"
Content="CANCEL"
Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}">
<Button.CommandParameter>
<system:Boolean>False</system:Boolean>
</Button.CommandParameter>
</Button>
<Button Style="{StaticResource MaterialDesignFlatButton}"
Content="OK"
Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}">
<Button.CommandParameter>
<>True
Snackbar
In XAML:
<materialDesign:Snackbar x:Name="MainSnackbar"
MessageQueue="{materialDesign:MessageQueue}" />
In C#:
using MaterialDesignThemes.Wpf;
public partial class MainWindow : Window
{
private SnackbarMessageQueue _messageQueue;
public MainWindow()
{
InitializeComponent();
_messageQueue = new SnackbarMessageQueue(TimeSpan.FromSeconds(3));
MainSnackbar.MessageQueue = _messageQueue;
}
private void ShowSnackbar_Click(object sender, RoutedEventArgs e)
{
_messageQueue.Enqueue("Item added to cart");
}
private void ShowSnackbarWithAction_Click(object sender, RoutedEventArgs e)
{
_messageQueue.Enqueue(
"Item deleted",
"UNDO",
() => { },
null,
false,
true);
}
}
Progress Indicators
<ProgressBar Style="{StaticResource MaterialDesignCircularProgressBar}"
IsIndeterminate="True" />
<ProgressBar Style="{StaticResource MaterialDesignCircularProgressBar}"
Value="65"
Maximum="100" />
<ProgressBar Style="{StaticResource MaterialDesignLinearProgressBar}"
IsIndeterminate="True" />
<ProgressBar Style="{StaticResource MaterialDesignLinearProgressBar}"
Value="45"
Maximum="100" />
DatePicker and TimePicker
<DatePicker materialDesign:HintAssist.Hint="Select Date"
Style="{StaticResource MaterialDesignFilledDatePicker}" />
<materialDesign:TimePicker materialDesign:HintAssist.Hint="Select Time"
Style="{StaticResource MaterialDesignFilledTimePicker}" />
<materialDesign:Clock />
ComboBox
<ComboBox materialDesign:HintAssist.Hint="Select Option"
Style="{StaticResource MaterialDesignFilledComboBox}">
<ComboBoxItem Content="Option 1" />
<ComboBoxItem Content="Option 2" />
<ComboBoxItem Content="Option 3" />
</ComboBox>
<ComboBox materialDesign:HintAssist.Hint="Country"
Style="{StaticResource MaterialDesignOutlinedComboBox}"
ItemsSource="{Binding Countries}"
DisplayMemberPath="Name" />
CheckBox and RadioButton
<CheckBox Content="Accept terms and conditions" />
<StackPanel>
<RadioButton Content="Option A" GroupName="Options" />
<RadioButton Content="Option B" GroupName="Options" />
<RadioButton Content="Option C" GroupName="Options" />
</StackPanel>
<ToggleButton Style="{StaticResource MaterialDesignSwitchToggleButton}"
ToolTip="Enable notifications" />
ListBox and ListView
<ListBox>
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Account" VerticalAlignment="Center" />
<TextBlock Text="User Profile" Margin="16,0,0,0" />
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Settings" VerticalAlignment="Center" />
<TextBlock Text="Settings" Margin="16,0,0,0" />
</StackPanel>
</ListBoxItem>
</ListBox>
DataGrid
<DataGrid ItemsSource="{Binding Users}"
CanUserAddRows="False"
AutoGenerateColumns="False"
materialDesign:DataGridAssist.CellPadding="13 8 8 8"
materialDesign:DataGridAssist.ColumnHeaderPadding="8">
<DataGrid.Columns>
<DataGridTextColumn Header="Name" Binding="{Binding Name}" />
<DataGridTextColumn Header="Email" Binding="{Binding Email}" />
<DataGridCheckBoxColumn Header="Active" Binding="{Binding IsActive}" />
</DataGrid.Columns>
</DataGrid>
Advanced Features
Color Zones
<materialDesign:ColorZone Mode="PrimaryLight" Padding="16">
<TextBlock Text="Primary Light" />
</materialDesign:ColorZone>
<materialDesign:ColorZone Mode="SecondaryMid" Padding="16">
<TextBlock Text="Secondary Mid" />
</materialDesign:ColorZone>
<materialDesign:ColorZone Mode="Dark" Padding="16">
<TextBlock Text="Dark Zone" />
</materialDesign:ColorZone>
Modes: Standard, Inverted, PrimaryLight, PrimaryMid, PrimaryDark, Accent, Light, Dark, SecondaryLight, SecondaryMid, SecondaryDark
DrawerHost (Navigation Drawer)
<materialDesign:DrawerHost IsLeftDrawerOpen="{Binding IsDrawerOpen}">
<materialDesign:DrawerHost.LeftDrawerContent>
<StackPanel Margin="16">
<TextBlock Text="Navigation"
Style="{StaticResource MaterialDesignHeadline6TextBlock}" />
<ListBox>
<ListBoxItem Content="Home" />
<ListBoxItem Content="Profile" />
<ListBoxItem Content="Settings" />
</ListBox>
</StackPanel>
</materialDesign:DrawerHost.LeftDrawerContent>
<Grid>
<Button Content="Open Drawer"
Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
CommandParameter="{x:Static Dock.Left}" />
</Grid>
</materialDesign:DrawerHost>
Elevation (Shadows)
<Border Background="White"
materialDesign:ElevationAssist.Elevation="Dp4"
Padding="16">
<TextBlock Text="Card with Dp4 elevation" />
</Border>
Elevation values: Dp0, Dp1, Dp2, Dp3, Dp4, Dp5, Dp6, Dp8, Dp9, Dp12, Dp16, Dp24
Transitions
<materialDesign:Transitioner SelectedIndex="{Binding SelectedIndex}">
<materialDesign:TransitionerSlide>
<Grid>
<TextBlock Text="First Slide" />
</Grid>
</materialDesign:TransitionerSlide>
<materialDesign:TransitionerSlide>
<Grid>
<TextBlock Text="Second Slide" />
</Grid>
</materialDesign:TransitionerSlide>
</materialDesign:Transitioner>
Navigate programmatically:
materialDesignTransitioner.MoveNextCommand.Execute(null);
materialDesignTransitioner.MovePreviousCommand.Execute(null);
SelectedIndex = 1;
MVVM Pattern Integration
ViewModel Example
using System.Windows.Input;
using MaterialDesignThemes.Wpf;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
public partial class MainViewModel : ObservableObject
{
[ObservableProperty]
private string _userName;
[ObservableProperty]
private bool _isDarkTheme;
private readonly PaletteHelper _paletteHelper;
private readonly SnackbarMessageQueue _messageQueue;
public MainViewModel()
{
_paletteHelper = new PaletteHelper();
_messageQueue = new SnackbarMessageQueue();
}
public SnackbarMessageQueue MessageQueue => _messageQueue;
[RelayCommand]
private void ToggleTheme()
{
ITheme theme = _paletteHelper.GetTheme();
theme.SetBaseTheme(IsDarkTheme ? Theme.Dark : Theme.Light);
_paletteHelper.SetTheme(theme);
_messageQueue.Enqueue($"Theme changed to {(IsDarkTheme ? "Dark" : "Light")}");
}
[RelayCommand]
private async Task ShowDialog()
{
var view = new ConfirmDialogView();
var result = await DialogHost.Show(view, "RootDialog");
(result boolResult && boolResult)
{
_messageQueue.Enqueue();
}
}
}
View Binding
<Window x:Class="YourApp.MainWindow"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes">
<Grid>
<StackPanel>
<TextBox Text="{Binding UserName, UpdateSourceTrigger=PropertyChanged}"
materialDesign:HintAssist.Hint="Username"
Style="{StaticResource MaterialDesignOutlinedTextBox}" />
<ToggleButton IsChecked="{Binding IsDarkTheme}"
Command="{Binding ToggleThemeCommand}"
Style="{StaticResource MaterialDesignSwitchToggleButton}"
Content="Dark Theme" />
<Button Content="Show Dialog"
Command="{Binding ShowDialogCommand}"
Style="{StaticResource MaterialDesignRaisedButton}" />
<materialDesign:Snackbar MessageQueue="{Binding MessageQueue}" />
</StackPanel>
</Grid>
</Window>
Common Patterns
Theme Switcher Component
<UserControl x:Class="YourApp.Controls.ThemeSwitch"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="WeatherNight" VerticalAlignment="Center" />
<ToggleButton x:Name="ThemeToggle"
Style="{StaticResource MaterialDesignSwitchToggleButton}"
Margin="8,0"
Checked="ThemeToggle_Checked"
Unchecked="ThemeToggle_Unchecked" />
<materialDesign:PackIcon Kind="WeatherSunny" VerticalAlignment="Center" />
</StackPanel>
</UserControl>
using MaterialDesignThemes.Wpf;
public partial class ThemeSwitch : UserControl
{
private readonly PaletteHelper _paletteHelper = new PaletteHelper();
public ThemeSwitch()
{
InitializeComponent();
ITheme theme = _paletteHelper.GetTheme();
ThemeToggle.IsChecked = theme.GetBaseTheme() == BaseTheme.Dark;
}
private void ThemeToggle_Checked(object sender, RoutedEventArgs e)
{
ITheme theme = _paletteHelper.GetTheme();
theme.SetBaseTheme(Theme.Dark);
_paletteHelper.SetTheme(theme);
}
private void ThemeToggle_Unchecked(object sender, RoutedEventArgs e)
{
ITheme theme = _paletteHelper.GetTheme();
theme.SetBaseTheme(Theme.Light);
_paletteHelper.SetTheme(theme);
}
}
Confirm Delete Dialog
<StackPanel Margin="16">
<StackPanel Orientation="Horizontal" Margin="0,0,0,16">
<materialDesign:PackIcon Kind="AlertCircle"
Foreground="{DynamicResource MaterialDesignValidationErrorBrush}"
Width="24" Height="24"
VerticalAlignment="Center" />
<TextBlock Text="Confirm Delete"
Style="{StaticResource MaterialDesignHeadline6TextBlock}"
Margin="8,0,0,0" />
</StackPanel>
<TextBlock TextWrapping="Wrap"
Text="Are you sure you want to delete this item? This action cannot be undone." />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,16,0,0">
<Button Style="{StaticResource MaterialDesignFlatButton}"
Content=
=>
False
True
Loading Overlay
<Grid>
<ContentControl Content="{Binding MainContent}" />
<Grid Visibility="{Binding IsLoading, Converter={StaticResource BooleanToVisibilityConverter}}"
Background="#80000000">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<ProgressBar Style="{StaticResource MaterialDesignCircularProgressBar}"
IsIndeterminate="True"
Width="48" Height="48" />
<TextBlock Text="Loading..."
Foreground="White"
Margin="0,16,0,0"
HorizontalAlignment="Center" />
</StackPanel>
</Grid>
</Grid>
Troubleshooting
Icons Not Showing
Ensure you've installed the package and added the resource dictionary:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<materialDesign:BundledTheme BaseTheme="Light" PrimaryColor="Blue" SecondaryColor="Lime" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign2.Defaults.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Theme Not Applying
- Verify the
Style="{StaticResource MaterialDesignWindow}" is set on your Window
- Check that BundledTheme is correctly referenced in App.xaml
- Ensure no conflicting styles are overriding Material Design styles
Performance Issues
For better rendering performance:
<Window TextOptions.TextFormattingMode="Ideal"
TextOptions.TextRenderingMode="Auto"
RenderOptions.BitmapScalingMode="HighQuality">
Or in code:
RenderOptions.SetBitmapScalingMode(this, BitmapScalingMode.HighQuality);
TextOptions.SetTextFormattingMode(this, TextFormattingMode.Ideal);
TextOptions.SetTextRenderingMode(this, TextRenderingMode.Auto);
Dialog Not Showing
Ensure DialogHost has an Identifier and you're using the correct identifier when showing:
<materialDesign:DialogHost Identifier="MainDialog">
await DialogHost.Show(content, "MainDialog");
Custom Colors Not Working
Use PaletteHelper to modify colors at runtime:
var paletteHelper = new PaletteHelper();
ITheme theme = paletteHelper.GetTheme();
var primaryColor = Color.FromRgb(33, 150, 243);
theme.SetPrimaryColor(primaryColor);
var secondaryColor = Color.FromRgb(255, 193, 7);
theme.SetSecondaryColor(secondaryColor);
paletteHelper.SetTheme(theme);
Additional Resources