一、名词解释
使用MahApps.Metro扁平化UI控件库，可以使界面呈现更加美观。本文将总结MahApps.Metro的使用方法，及如何自定义修改其主题颜色等。
详细内容可参考官网：https://mahapps.com/
二、安装
推荐使用NuGet进行安装：
选中要添加MahApps.Metro的项目，右键单击，选择Manage NuGet Packages，搜索MahApps.Metro，如下图，选中后安装。
或在Package Manager Console（Tools→NuGet Package Manager）中，输入指令：Install-Package MahApps.Metro 进行安装，如下图。
三、实现
1. 将资源引入App.xaml，注意安装的Metro版本不同对应的App.xaml中写法不同。
1 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 StartupUri="MainWindow.xaml"> 5 6 7 8 9 10 11 12 13 14 15 16
App.xaml(v2.0.0 and newer)
1 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 StartupUri="MainWindow.xaml"> 5 6 7 8 9 10 11 12 13 14 15 16 17 18
App.xaml(v1.6.5 and older)
2. 修改窗体的.xaml文件：
添加引用：xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
修改标签： 示例： 1 2 xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro" 3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 5 Title="MainWindow"> 6 7 3. 修改窗体的.xaml.cs文件，继承自MetroWindow类： 1 using MahApps.Metro.Controls; 2 3 namespace DemoMachine.UI.Views 4 { 5 public partial class ShellView : MetroWindow 6 { 7 public ShellView() 8 { 9 InitializeComponent(); 10 } 11 } 12 } View Code 四、修改主题样式 Metro有一些预设的主题风格和主题色可以使用，在App.xaml的 1. 有这些可供选择的accents： “Red”, “Green”, “Blue”, “Purple”, “Orange”, “Lime”, “Emerald”, “Teal”, “Cyan”, “Cobalt”, “Indigo”, “Violet”, “Pink”, “Magenta”, “Crimson”, “Amber”, “Yellow”, “Brown”, “Olive”, “Steel”, “Mauve”, “Taupe”, “Sienna” 2. 有这些可供选择的themes： “BaseLight”, “BaseDark” 也可以自定义的设置主题颜色： 新建Resources文件夹，添加两个类文件SelfAccent.cs和SelfAppTheme.cs，分别写入代码： 1 2 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 3 xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 4 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 5 mc:Ignorable="options"> 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 SelfAccent.cs 1 2 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 3 xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 4 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 5 mc:Ignorable="options"> 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 SelfAppTheme.cs 然后在App.xaml.cs中添加代码： 1 using MahApps.Metro; 2 using System; 3 using System.Windows; 4 5 namespace DemoMachine.UI 6 { 7 /// 8 /// Interaction logic for App.xaml 9 /// 10 public partial class App : Application 11 { 12 protected override void OnStartup(StartupEventArgs e) 13 { 14 AddAppTheme(); 15 AddAccent(); 16 ThemeManager.ChangeAppStyle(Application.Current, 17 ThemeManager.GetAccent("SelfAccent"), 18 ThemeManager.GetAppTheme("SelfAppTheme")); // or appStyle.Item1 19 20 base.OnStartup(e); 21 } 22 23 private void AddAppTheme() 24 { 25 MahApps.Metro.ThemeManager.AddAppTheme("SelfAppTheme", new Uri("pack://application:,,,/Resources/SelfAppTheme.xaml")); 26 } 27 private void AddAccent() 28 { 29 MahApps.Metro.ThemeManager.AddAccent("SelfAccent", new Uri("pack://application:,,,/Resources/SelfAccent.xaml")); 30 } 31 } 32 } App.xaml.cs 完成以后，修改SelfAccent.cs和SelfAppTheme.cs文件中的颜色，就可以一定程度上的更改控件中与主题绑定了的颜色。 五、写基于Metro的样式 使用Metro类库后，控件会具有一些已写好集成好的样式，如何基于这些样式添加自己的样式修改呢，举例说明： 新建名为DataGridStyle的样式，基于Metro的DataGrid的样式AzureDataGrid，加上BasedOn="{StaticResource AzureDataGrid}"， 1 2 DataGrid样式 然后在界面上的DataGrid中引用自己的DataGrid样式，标签内引入样式Style="{StaticResource DataGridStyle}"： 1 2 3 4 5 6 7 View中DataGrid使用样式 那么怎么知道Metro的各控件的各种样式名称呢： 1. 去官网找，一些经典的样式名称； 2. 下载Metro的源代码，有个名为Style的文件夹，包含各种样式的代码文本，可以查看各种样式的详细代码设置，如下图文件夹。 后续有新的使用经验会及时添加，欢迎大家一起补充。