MaterialDesignInXamlToolkit Tutorial

Posted by Andy Feng on July 19, 2025

Introduction

一个基于 Google Material Design 规范的WPF UI控件库,提供完整的Material风格组件和主题系统。

兼容性

|框架|支持情况| |—|—| |.NET Framework 4.6.1+|✅| |.NET Core 3.1+|✅| |.NET 5/6/7/8/9|✅| |MAUI/UWP|❌ (仅限WPF)|

基本用法

预制配色

<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />

view

<!-- XAML中放置Snackbar -->
<materialDesign:Snackbar 
    MessageQueue="{Binding NotificationQueue}" 
    HorizontalAlignment="Left"/>

view model

// ViewModel中调用
var message = new SnackbarMessage { Content = "文件保存成功!" };
NotificationQueue.Enqueue(message);

MVVM集成

public class MainViewModel
{
    public ISnackbarMessageQueue NotificationQueue { get; } = new SnackbarMessageQueue();
}

全局异常处理

AppDomain.CurrentDomain.UnhandledException += (s, e) => 
    NotificationQueue.Enqueue($"错误: {(e.ExceptionObject as Exception)?.Message}");

安装使用

安装

# 核心库
Install-Package MaterialDesignThemes

# Material Design 图标(可选)
Install-Package MaterialDesignColors

配置主题

app.xmal 基础配置

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <!-- 主题(Light/Dark) -->
            <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.Indigo.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Teal.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

设置启动窗口主题 在 MainWindow.xaml 中添加命名空间和主题属性:

<Window ...
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        Background="{DynamicResource MaterialDesignPaper}"
        TextElement.FontWeight="Medium"
        FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto">
</Window>

功能使用

使用material按钮

<Button Style="{StaticResource MaterialDesignRaisedButton}"
        Content="确定"
        Foreground="White"
        Background="{DynamicResource PrimaryHueMidBrush}"/>

Snackbar 通知

<xml...
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes">

<!-- 在 XAML 中添加 Snackbar -->
<materialDesign:Snackbar MessageQueue="{Binding NotificationQueue}" />
// 在 ViewModel 中调用
var message = new SnackbarMessage { Content = "操作成功!" };
NotificationQueue.Enqueue(message);

对话框服务

<!-- 在根布局添加 DialogHost -->
<materialDesign:DialogHost Identifier="RootDialog">
    <!-- 页面内容 -->
</materialDesign:DialogHost>
// 打开对话框
await DialogHost.Show(new UserControl(), "RootDialog");

// 关闭对话框
DialogHost.Close("RootDialog");

高级配置

动态切换主题

自定义snackbar样式

<materialDesign:Snackbar.MessageTemplate>
    <DataTemplate>
        <Border Background="{DynamicResource SecondaryHueMidBrush}"
                CornerRadius="4">
            <TextBlock Text="{Binding}" 
                       Margin="16"
                       Foreground="White"/>
        </Border>
    </DataTemplate>
</materialDesign:Snackbar.MessageTemplate>

对话框服务

// 打开对话框
await DialogHost.Show(new UserEditorView(), "MainDialogHost");

// 关闭对话框
DialogHost.Close("MainDialogHost");

响应式布局

<materialDesign:Card UniformCornerRadius="8">
    <Grid>
        <materialDesign:RatingBar Value="{Binding Rating}" />
    </Grid>
</materialDesign:Card>

FAQ

性能优化建议

虚拟化列表:对大数据集使用MaterialDesignVirtualizingStackPanel

按需加载资源

<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.OnlyEssential.xaml" />

禁用复杂动画

new PaletteHelper().SetBaseTheme(BaseTheme.Inherit); // 继承系统性能设置

References

MaterialDesignInXamlToolkit Github