MahApps.Metro扁平化UI控件库（可修改主题色等）

一、名词解释

使用MahApps.Metro扁平化UI控件库，可以使界面呈现更加美观。本文将总结MahApps.Metro的使用方法，及如何自定义修改其主题颜色等。

详细内容可参考官网：https://mahapps.com/

二、安装

推荐使用NuGet进行安装：

选中要添加MahApps.Metro的项目，右键单击，选择Manage NuGet Packages，搜索MahApps.Metro，如下图，选中后安装。

MahApps.Metro扁平化UI控件库（可修改主题色等）

或在Package Manager Console（Tools→NuGet Package Manager）中，输入指令：Install-Package MahApps.Metro 进行安装，如下图。

MahApps.Metro扁平化UI控件库（可修改主题色等）

三、实现

1. 将资源引入App.xaml，注意安装的Metro版本不同对应的App.xaml中写法不同。

 1 <Application x:Class="WpfApplication.App"
 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   <Application.Resources>
 6     <ResourceDictionary>
 7       <ResourceDictionary.MergedDictionaries>
 8         <!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
 9         <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
10         <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
11         <!-- Accent and AppTheme setting -->
12         <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />
13       </ResourceDictionary.MergedDictionaries>
14     </ResourceDictionary>
15   </Application.Resources>
16 </Application>

App.xaml(v2.0.0 and newer)

 1 <Application x:Class="WpfApplication.App"
 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   <Application.Resources>
 6     <ResourceDictionary>
 7       <ResourceDictionary.MergedDictionaries>
 8         <!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
 9         <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
10         <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
11         <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
12         <!-- Accent and AppTheme setting -->
13         <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
14         <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
15       </ResourceDictionary.MergedDictionaries>
16     </ResourceDictionary>
17   </Application.Resources>
18 </Application>

App.xaml(v1.6.5 and older)

2. 修改窗体的.xaml文件：

添加引用：xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"

修改标签：<controls:MetroWindow ……

示例：

1 <controls:MetroWindow x:Class="DemoMachine.UI.Views.ShellView"
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 </controls:MetroWindow>

<control:MetroWindow

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的<Application.Resources>中改设置：

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 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 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     <Color x:Key="HighlightColor">#FF000000</Color>
 8 
 9     <Color x:Key="AccentColor">#00666666</Color>
10     <!--DataGrid中是选中行的底色-->
11     <!--60%-->
12     <Color x:Key="AccentColor2">#00000000</Color>
13     <!--DataGrid中是初始选中行的底色，固定是那一行-->
14     <!--40%-->
15     <Color x:Key="AccentColor3">#00666666</Color>
16     <!--DataGrid中是鼠标悬停行的底色-->
17     <!--20%-->
18     <Color x:Key="AccentColor4">#00666666</Color>
19 
20     <!-- re-set brushes too -->
21     <SolidColorBrush x:Key="HighlightBrush" Color="{StaticResource HighlightColor}" options:Freeze="True" />
22     <SolidColorBrush x:Key="AccentColorBrush" Color="{StaticResource AccentColor}" options:Freeze="True" />
23     <SolidColorBrush x:Key="AccentColorBrush2" Color="{StaticResource AccentColor2}" options:Freeze="True" />
24     <SolidColorBrush x:Key="AccentColorBrush3" Color="{StaticResource AccentColor3}" options:Freeze="True" />
25     <SolidColorBrush x:Key="AccentColorBrush4" Color="{StaticResource AccentColor4}" options:Freeze="True" />
26 
27     <SolidColorBrush x:Key="WindowTitleColorBrush" Color="{StaticResource AccentColor}" options:Freeze="True" />
28 
29     <LinearGradientBrush x:Key="ProgressBrush" EndPoint="0.001,0.5" StartPoint="1.002,0.5" options:Freeze="True">
30         <GradientStop Color="{StaticResource HighlightColor}" Offset="0" />
31         <GradientStop Color="{StaticResource AccentColor3}" Offset="1" />
32     </LinearGradientBrush>
33 
34     <SolidColorBrush x:Key="CheckmarkFill" Color="{StaticResource AccentColor}" options:Freeze="True" />
35     <SolidColorBrush x:Key="RightArrowFill" Color="{StaticResource AccentColor}" options:Freeze="True" />
36 
37     <Color x:Key="IdealForegroundColor">White</Color>
38     <SolidColorBrush x:Key="IdealForegroundColorBrush" Color="{StaticResource IdealForegroundColor}" options:Freeze="True" />
39     <SolidColorBrush x:Key="IdealForegroundDisabledBrush" Color="{StaticResource IdealForegroundColor}" Opacity="0.4" options:Freeze="True" />
40     <SolidColorBrush x:Key="AccentSelectedColorBrush" Color="{StaticResource IdealForegroundColor}" options:Freeze="True" />
41 
42     <!-- DataGrid brushes -->
43     <SolidColorBrush x:Key="MetroDataGrid.HighlightBrush" Color="{StaticResource AccentColor}" options:Freeze="True" />
44     <SolidColorBrush x:Key="MetroDataGrid.HighlightTextBrush" Color="{StaticResource IdealForegroundColor}" options:Freeze="True" />
45     <SolidColorBrush x:Key="MetroDataGrid.MouseOverHighlightBrush" Color="{StaticResource AccentColor3}" options:Freeze="True" />
46     <SolidColorBrush x:Key="MetroDataGrid.FocusBorderBrush" Color="{StaticResource AccentColor}" options:Freeze="True" />
47     <SolidColorBrush x:Key="MetroDataGrid.InactiveSelectionHighlightBrush" Color="{StaticResource AccentColor2}" options:Freeze="True" />
48     <SolidColorBrush x:Key="MetroDataGrid.InactiveSelectionHighlightTextBrush" Color="{StaticResource IdealForegroundColor}" options:Freeze="True" />
49 </ResourceDictionary>

SelfAccent.cs