materialdesigninxaml-wpf-toolkit

# MaterialDesignInXamlToolkit > Skill by [ara.so](https://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: ```powershell Install-Package MaterialDesignThemes ``` Or via .NET CLI: ```bash dotnet add package MaterialDesignThemes ``` ## Initial Setup ### App.xaml Configuration Configure the base theme in your `App.xaml`: ```xml <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> <!-- Material Design 2 (Classic) --> <materialDesign:BundledTheme BaseTheme="Light" PrimaryColor="DeepPurple" SecondaryColor="Lime" /> <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign2.Defaults.xaml" /> <!-- OR Material Design 3 (Modern) --> <!-- <materialDesign:BundledTheme BaseTheme="Light" PrimaryColor="DeepPurple" SecondaryColor="Lime" /> <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign3.Defaults.xaml" /> --> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> </Application> ``` ### Window Setup Apply Material Design style to your main window: ```xml <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"> <!-- Your content here --> </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 ```xml <materialDesign:BundledTheme BaseTheme="Dark" PrimaryColor="Indigo" SecondaryColor="Cyan" /> ``` ### Runtime Theme Switching In C#: ```csharp using MaterialDesignThemes.Wpf; using MaterialDesignColors; // Switch to dark theme var paletteHelper = new PaletteHelper(); ITheme theme = paletteHelper.GetTheme(); theme.SetBaseTheme(Theme.Dark); paletteHelper.SetTheme(theme); // Change primary color theme.SetPrimaryColor(Colors.Blue); paletteHelper.SetTheme(theme); // Change secondary color theme.SetSecondaryColor(Colors.Lime); paletteHelper.SetTheme(theme); ``` ## Common Controls ### Buttons ```xml <!-- Contained Button (default) --> <Button Style="{StaticResource MaterialDesignRaisedButton}" Content="Raised Button" /> <!-- Outlined Button --> <Button Style="{StaticResource MaterialDesignOutlinedButton}" Content="Outlined Button" /> <!-- Text Button --> <Button Style="{StaticResource MaterialDesignFlatButton}" Content="Flat Button" /> <!-- Icon Button --> <Button Style="{StaticResource MaterialDesignIconButton}" ToolTip="Delete"> <materialDesign:PackIcon Kind="Delete" /> </Button> <!-- Floating Action Button (FAB) --> <Button Style="{StaticResource MaterialDesignFloatingActionButton}" ToolTip="Add"> <materialDesign:PackIcon Kind="Plus" /> </Button> <!-- Mini FAB --> <Button Style="{StaticResource MaterialDesignFloatingActionMiniButton}"> <materialDesign:PackIcon Kind="Pencil" /> </Button> ``` ### Cards ```xml <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 ```xml <!-- Filled TextField --> <TextBox materialDesign:HintAssist.Hint="Email" Style="{StaticResource MaterialDesignFilledTextBox}" /> <!-- Outlined TextField --> <TextBox materialDesign:HintAssist.Hint="Name" Style="{StaticResource MaterialDesignOutlinedTextBox}" /> <!-- With Helper Text --> <TextBox materialDesign:HintAssist.Hint="Username" materialDesign:HintAssist.HelperText="Choose a unique username" Style="{StaticResource MaterialDesignFilledTextBox}" /> <!-- With Character Counter --> <TextBox materialDesign:HintAssist.Hint="Description" materialDesign:TextFieldAssist.CharacterCounterVisibility="Visible" MaxLength="100" Style="{StaticResource MaterialDesignOutlinedTextBox}" /> <!-- Password Field --> <PasswordBox materialDesign:HintAssist.Hint="Password" Style="{StaticResource MaterialDesignFilledPasswordBox}" /> ``` ### Icons Using Material Design Icons pack: ```xml <!-- Simple Icon --> <materialDesign:PackIcon Kind="Home" /> <!-- Sized Icon --> <materialDesign:PackIcon Kind="Account" Width="24" Height="24" /> <!-- Colored Icon --> <materialDesign:PackIcon Kind="Heart" Foreground="Red" Width="32" Height="32" /> <!-- In Button --> <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 ```xml <!-- Basic Chip --> <materialDesign:Chip Content="Basic Chip" /> <!-- Deletable Chip --> <materialDesign:Chip Content="Deletable" IsDeletable="True" DeleteClick="Chip_DeleteClick" /> <!-- Chip with Icon --> <materialDesign:Chip> <StackPanel Orientation="Horizontal"> <materialDesign:PackIcon Kind="Account" /> <TextBlock Text="User Chip" Margin="8,0,0,0" /> </StackPanel> </materialDesign:Chip> <!-- Chip Group --> <materialDesign:ChipGroup> <materialDesign:Chip Content="Choice 1" /> <materialDesign:Chip Content="Choice 2" /> <materialDesign:Chip Content="Choice 3" /> </materialDesign:ChipGroup> ``` ### Dialogs In XAML: ```xml <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinations> <!-- Dialog Host Container --> <materialDesign:DialogHost Identifier="RootDialog" Grid.RowSpan="2"> <!-- Your main content --> <Grid> <Button Content="Open Dialog" Click="OpenDialog_Click" /> </Grid> </materialDesign:DialogHost> </Grid> ``` In C#: ```csharp using MaterialDesignThemes.Wpf; // Simple message dialog private async void OpenDialog_Click(object sender, RoutedEventArgs e) { await DialogHost.Show(new TextBlock { Text = "This is a dialog", Margin = new Thickness(16) }, "RootDialog"); } // Custom dialog content private async void OpenCustomDialog_Click(object sender, RoutedEventArgs e) { var view = new SampleDialogView(); // Your UserControl var result = await DialogHost.Show(view, "RootDialog"); if (result is bool boolResult && boolResult) { // User clicked OK/Accept } } // Close dialog from within dialog content private void CloseDialog_Click(object sender, RoutedEventArgs e) { DialogHost.Close("RootDialog", true); // Pass result } ``` Full dialog with custom content: ```xml <!-- SampleDialog.xaml --> <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> <system:Boolean>True</system:Boolean> </Button.CommandParameter> </Button> </StackPanel> </StackPanel> ``` ### Snackbar In XAML: ```xml <materialDesign:Snackbar x:Name="MainSnackbar" MessageQueue="{materialDesign:MessageQueue}" /> ``` In C#: ```csharp 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", () => { /* Undo action */ }, null, false, true); } } ``` ### Progress Indicators ```xml <!-- Circular Progress (Indeterminate) --> <ProgressBar Style="{StaticResource MaterialDesignCircularProgressBar}" IsIndeterminate="True" /> <!-- Circular Progress (Determinate) --> <ProgressBar Style="{StaticResource MaterialDesignCircularProgressBar}" Value="65" Maximum="100" /> <!-- Linear Progress (Indeterminate) --> <ProgressBar Style="{StaticResource MaterialDesignLinearProgressBar}" IsIndeterminate="True" /> <!-- Linear Progress (Determinate) --> <ProgressBar Style="{StaticResource MaterialDesignLinearProgressBar}" Value="45" Maximum="100" /> ``` ### DatePicker and TimePicker ```xml <!-- DatePicker --> <DatePicker materialDesign:HintAssist.Hint="Select Date" Style="{StaticResource MaterialDesignFilledDatePicker}" /> <!-- TimePicker --> <materialDesign:TimePicker materialDesign:HintAssist.Hint="Select Time" Style="{StaticResource MaterialDesignFilledTimePicker}" /> <!-- Clock --> <materialDesign:Clock /> ``` ### ComboBox ```xml <!-- Filled ComboBox --> <ComboBox materialDesign:HintAssist.Hint="Select Option" Style="{StaticResource MaterialDesignFilledComboBox}"> <ComboBoxItem Content="Option 1" /> <ComboBoxItem Content="Option 2" /> <ComboBoxItem Content="Option 3" /> </ComboBox>