一、名词解释
使用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 <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>
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>
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>
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 }
四、修改主题样式
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”