materialdesigninxaml-wpf-toolkit

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

由ara.so提供的技能——设计技能合集。

适用于Windows桌面WPF应用的全面Material Design主题与控件库。为所有主流WPF控件提供Material Design样式，额外的自定义控件（卡片、对话框、芯片等），简单的调色板配置，完整的Material Design Icons图标包，以及过渡效果。

Installation

安装

Install via NuGet Package Manager or Package Manager Console:

powershell

Install-Package MaterialDesignThemes

Or via .NET CLI:

bash

dotnet add package MaterialDesignThemes

通过NuGet包管理器或包管理器控制台安装：

powershell

Install-Package MaterialDesignThemes

或通过.NET CLI安装：

bash

dotnet add package MaterialDesignThemes

Initial Setup

初始设置

App.xaml Configuration

App.xaml配置

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>

在

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 (经典版) -->
                <materialDesign:BundledTheme 
                    BaseTheme="Light" 
                    PrimaryColor="DeepPurple" 
                    SecondaryColor="Lime" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign2.Defaults.xaml" />
                
                <!-- 或Material Design 3 (现代版) -->
                <!-- <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>

将Material Design样式应用到主窗口：

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">
    <!-- 你的内容写在这里 -->
</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

主色调和辅助色调可设置为：

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" />

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);

C#代码示例：

csharp

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

按钮

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>

xml

<!-- 包含式按钮（默认） -->
<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>

<!-- 浮动操作按钮（FAB） -->
<Button Style="{StaticResource MaterialDesignFloatingActionButton}"
        ToolTip="Add">
    <materialDesign:PackIcon Kind="Plus" />
</Button>

<!-- 小型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>

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}" />

xml

<!-- 填充式文本框 -->
<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:

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/

使用Material Design Icons图标包：

xml

<!-- 简单图标 -->
<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>

浏览所有图标：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>

xml

<!-- 基础芯片 -->
<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:

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>

XAML代码：

xml

<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>

C#代码：

csharp

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); // 传递结果
}

带自定义内容的完整对话框：

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);
    }
}

XAML代码：

xml

<materialDesign:Snackbar x:Name="MainSnackbar"
                         MessageQueue="{materialDesign:MessageQueue}" />

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",
            () => { /* 撤销操作 */ },
            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" />

xml

<!-- 圆形进度条（不确定进度） -->
<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

日期选择器和时间选择器

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 />

xml

<!-- 日期选择器 -->
<DatePicker materialDesign:HintAssist.Hint="Select Date"
            Style="{StaticResource MaterialDesignFilledDatePicker}" />

<!-- 时间选择器 -->
<materialDesign:TimePicker materialDesign:HintAssist.Hint="Select Time"
                           Style="{StaticResource MaterialDesignFilledTimePicker}" />

<!-- 时钟控件 -->
<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>

<!-- Outlined ComboBox -->
<ComboBox materialDesign:HintAssist.Hint="Country"
          Style="{StaticResource MaterialDesignOutlinedComboBox}"
          ItemsSource="{Binding Countries}"
          DisplayMemberPath="Name" />

xml

<!-- 填充式下拉框 -->
<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

复选框和单选按钮

xml

<!-- CheckBox -->
<CheckBox Content="Accept terms and conditions" />

<!-- RadioButton -->
<StackPanel>
    <RadioButton Content="Option A" GroupName="Options" />
    <RadioButton Content="Option B" GroupName="Options" />
    <RadioButton Content="Option C" GroupName="Options" />
</StackPanel>

<!-- Switch/Toggle -->
<ToggleButton Style="{StaticResource MaterialDesignSwitchToggleButton}"
              ToolTip="Enable notifications" />

xml

<!-- 复选框 -->
<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

列表框和列表视图

xml

<!-- Material Design ListBox -->
<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>

xml

<!-- Material Design风格列表框 -->
<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

数据网格

xml

<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>

xml

<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

颜色区域

xml

<!-- Primary Color Zone -->
<materialDesign:ColorZone Mode="PrimaryLight" Padding="16">
    <TextBlock Text="Primary Light" />
</materialDesign:ColorZone>

<!-- Secondary Color Zone -->
<materialDesign:ColorZone Mode="SecondaryMid" Padding="16">
    <TextBlock Text="Secondary Mid" />
</materialDesign:ColorZone>

<!-- Dark Color Zone -->
<materialDesign:ColorZone Mode="Dark" Padding="16">
    <TextBlock Text="Dark Zone" />
</materialDesign:ColorZone>

Modes:

Standard

Inverted

PrimaryLight

PrimaryMid

PrimaryDark

Accent

Light

Dark

SecondaryLight

SecondaryMid

SecondaryDark

xml

<!-- 主色调区域 -->
<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>

可用模式：

Standard

Inverted

PrimaryLight

PrimaryMid

PrimaryDark

Accent

Light

Dark

SecondaryLight

SecondaryMid

SecondaryDark

DrawerHost (Navigation Drawer)

抽屉宿主（导航抽屉）

xml

<materialDesign:DrawerHost IsLeftDrawerOpen="{Binding IsDrawerOpen}">
    <!-- Left Drawer Content -->
    <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>
    
    <!-- Main Content -->
    <Grid>
        <Button Content="Open Drawer"
                Command="{x:Static materialDesign:DrawerHost.OpenDrawerCommand}"
                CommandParameter="{x:Static Dock.Left}" />
    </Grid>
</materialDesign:DrawerHost>

xml

<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)

阴影层级

xml

<!-- Apply shadow depth -->
<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

xml

<!-- 应用阴影深度 -->
<Border Background="White"
        materialDesign:ElevationAssist.Elevation="Dp4"
        Padding="16">
    <TextBlock Text="Card with Dp4 elevation" />
</Border>

可用阴影值：

Dp0

Dp1

Dp2

Dp3

Dp4

Dp5

Dp6

Dp8

Dp9

Dp12

Dp16

Dp24

Transitions

过渡效果

xml

<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:

csharp

// Move to next slide
materialDesignTransitioner.MoveNextCommand.Execute(null);

// Move to previous slide
materialDesignTransitioner.MovePreviousCommand.Execute(null);

// Move to specific index
SelectedIndex = 1;

xml

<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>

程序化切换：

csharp

// 切换到下一页
materialDesignTransitioner.MoveNextCommand.Execute(null);

// 切换到上一页
materialDesignTransitioner.MovePreviousCommand.Execute(null);

// 切换到指定索引
SelectedIndex = 1;

MVVM Pattern Integration

MVVM模式集成

ViewModel Example

视图模型示例

csharp

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");
        
        if (result is bool boolResult && boolResult)
        {
            _messageQueue.Enqueue("Action confirmed");
        }
    }
}

csharp

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");
        
        if (result is bool boolResult && boolResult)
        {
            _messageQueue.Enqueue("Action confirmed");
        }
    }
}

View Binding

视图绑定

xml

<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>

xml

<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

主题切换组件

xml

<!-- ThemeSwitch.xaml -->
<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>

csharp

// ThemeSwitch.xaml.cs
using MaterialDesignThemes.Wpf;

public partial class ThemeSwitch : UserControl
{
    private readonly PaletteHelper _paletteHelper = new PaletteHelper();
    
    public ThemeSwitch()
    {
        InitializeComponent();
        
        // Set initial state based on current theme
        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);
    }
}

xml

<!-- ThemeSwitch.xaml -->
<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>

csharp

// ThemeSwitch.xaml.cs
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

删除确认对话框

xml

<!-- ConfirmDeleteDialog.xaml -->
<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="CANCEL"
                Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}">
            <Button.CommandParameter>
                <system:Boolean>False</system:Boolean>
            </Button.CommandParameter>
        </Button>
        <Button Style="{StaticResource MaterialDesignFlatButton}"
                Content="DELETE"
                Foreground="{DynamicResource MaterialDesignValidationErrorBrush}"
                Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}">
            <Button.CommandParameter>
                <system:Boolean>True</system:Boolean>
            </Button.CommandParameter>
        </Button>
    </StackPanel>
</StackPanel>

xml

<!-- ConfirmDeleteDialog.xaml -->
<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="CANCEL"
                Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}">
            <Button.CommandParameter>
                <system:Boolean>False</system:Boolean>
            </Button.CommandParameter>
        </Button>
        <Button Style="{StaticResource MaterialDesignFlatButton}"
                Content="DELETE"
                Foreground="{DynamicResource MaterialDesignValidationErrorBrush}"
                Command="{x:Static materialDesign:DialogHost.CloseDialogCommand}">
            <Button.CommandParameter>
                <system:Boolean>True</system:Boolean>
            </Button.CommandParameter>
        </Button>
    </StackPanel>
</StackPanel>

Loading Overlay

加载遮罩

xml

<Grid>
    <!-- Main Content -->
    <ContentControl Content="{Binding MainContent}" />
    
    <!-- Loading Overlay -->
    <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>

xml

<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:

xml

<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>

确保已安装包并添加了资源字典：

xml

<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

确认窗口上已设置

Style="{StaticResource MaterialDesignWindow}"

检查App.xaml中是否正确引用了BundledTheme
确保没有冲突的样式覆盖Material Design样式

Performance Issues

性能问题

For better rendering performance:

xml

<!-- In Window or UserControl -->
<Window TextOptions.TextFormattingMode="Ideal"
        TextOptions.TextRenderingMode="Auto"
        RenderOptions.BitmapScalingMode="HighQuality">

Or in code:

csharp

RenderOptions.SetBitmapScalingMode(this, BitmapScalingMode.HighQuality);
TextOptions.SetTextFormattingMode(this, TextFormattingMode.Ideal);
TextOptions.SetTextRenderingMode(this, TextRenderingMode.Auto);

为提升渲染性能：

xml

<!-- 在窗口或用户控件中 -->
<Window TextOptions.TextFormattingMode="Ideal"
        TextOptions.TextRenderingMode="Auto"
        RenderOptions.BitmapScalingMode="HighQuality">

或在代码中设置：

csharp

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:

xml

<materialDesign:DialogHost Identifier="MainDialog">

csharp

await DialogHost.Show(content, "MainDialog");

确保DialogHost有Identifier，且显示时使用了正确的标识符：

xml

<materialDesign:DialogHost Identifier="MainDialog">

csharp

await DialogHost.Show(content, "MainDialog");

Custom Colors Not Working

自定义颜色不生效

Use PaletteHelper to modify colors at runtime:

csharp

var paletteHelper = new PaletteHelper();
ITheme theme = paletteHelper.GetTheme();

// Modify specific colors
var primaryColor = Color.FromRgb(33, 150, 243);
theme.SetPrimaryColor(primaryColor);

var secondaryColor = Color.FromRgb(255, 193, 7);
theme.SetSecondaryColor(secondaryColor);

paletteHelper.SetTheme(theme);

使用PaletteHelper在运行时修改颜色：

csharp

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

额外资源

GitHub: https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit
Wiki: https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/wiki
Demo Apps: Included in source repository (MaterialDesignDemo, MaterialDesign3Demo)
Icon Pack: https://materialdesignicons.com/
Discord: Community support and discussion
Material Design Guidelines: https://material.io/design/

GitHub: https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit
Wiki: https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/wiki
演示应用: 包含在源码仓库中（MaterialDesignDemo, MaterialDesign3Demo）
图标包: https://materialdesignicons.com/
Discord: 社区支持与讨论
Material Design指南: https://material.io/design/