WPF随笔（一）--UI框架MahApps.Metro的使用

• 写在前面
• WPF的界面特性
• 如何使用MahApps.Metro
• 如何使用MahApps.Metro模板
• 后记

写在前面

使用WPF开发窗体程序有段时间了，这个随笔系列将会记录本人在WPF使用过程中的点点滴滴。

WPF的界面特性

相比较WinForm而言，WPF的界面呈现使用了基于标签的XMAL文件，具备更好的结构化、层次化特性，可以实现很多有趣的UI呈现效果。在市面上有很多优秀的UI库，MahApps.Metro就是其中之一。MahApps.Metro是一款Metro分隔的开源框架，下面分别是浅色和深色主题的示例：

如何使用MahApps.Metro

首先创建一个WPF项目，随便写几个控件，先来看看WPF的默认样式。

在项目上右键选择“管理NuGet程序包”，打开NuGet管理器，搜索并安装MahApps.Metro。

打开文件App.xaml，添加MappApps.Metro相关的资源字典。

<Application x:Class="WPFDemo.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WPFDemo"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <!--MahApps.Metro-->
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
                <!--MahApps.Metro-->
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>
           

修改完成后，重新生成并运行程序就会发现窗体内部的控件样式已经发生了改变。

但是窗体的样式还是默认样式，要如何修改呢？

打开文件MainWindow.xaml，在文件头部添加MahApps.Metro的引用。

打开文件MainWindow.xaml.cs，在文件头部添加MahApps.Metro.Controls的引用，同时将MainWindow的基类改为MetroWindow。

相应的MainWindow.xaml文件中，Window的基类也进行修改。

保存后重新编译运行，就会看到窗体的样式已经发生改变，完全变成了Metro风格。

如何使用MahApps.Metro模板

上面的过程说明了如何在WPF项目中使用MahApps.Metro框架，但步骤有点繁琐，有没有更快捷的方法呢？幸运的是，MahApps.Metro提供了快捷的项目模板。模板可以在GitHub的源码包中找到，地址如下：

MahApps.Metro/Visual Studio Templates

下载模板后解压并复制到Visual Studio安装目录，C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE。重新启动VS，新建项目时可以看到在项目类型列表中多了一个“WPF MahApps.Metro Application(.NET45)”的选项。

点击确定即可直接创建默认样式为Metro风格的WPF项目。

注意：官方源码提供的模板引用的MahApps.Metro类库是低版本的，可以使用NuGet管理器更新到最新版本

后记

MahApps.Metro界面库有很多有趣的控件和样式，比如LeftCommand、RightCommand、Flyout，可以慢慢探索。除了MahApps.Metro，还有DevExpress、MUI之类的UI库。DevExpress是付费的，有更多更丰富的控件，规模较大的项目可以考虑使用；MUI也是一款免费的UI库，但已经很久没有更新了。