WPF界面MahApps.Metro之应用

大家都知道，经常干后端的程序猿通常不善于设计前端界面，来个界面的活，要么傻眼了，要么花大力气自己去做组件，费时费力，效果不好。好的程序首先要“长得漂亮”，赏心悦目的界面可以提升应用程序的整体亲和力。
Wpf程序优点是基于DirectX创建，基于矢量绘制，显示效果流畅度远高于WinForm，但是VS的IDE开发Wpf，界面需要花大力气去制作，对于没有美感的程序猿，挑战很大。
国外团队( https://mahapps.com/)在 https://github.com/MahApps/MahApps.Metro上提供了一套完整的开源的皮肤系统，使用简单，效果好，是轻量级应用程序快速“美容”的利器。
目前，官网上提供了1.6和2.0两个版本，其中2.0版本已经抛弃了.net4.0环境，适用于更高级别的.dotnet环境，而本人比较保守，常常用Win7系统，所以今天就来谈一谈1.6版本的用法。

 

MetroWindow是什么，可以干什么

mahapps.metro是PaulJenkins在2011年开始的一个项目，它是一种将metro风格的用户界面引入WPF应用程序的简单方法。
GitHub主页上定义如下：
A toolkit for creating metro-style WPF applications. Lots of goodness out-of-the box.
用于创建Metro风格的WPF应用程序的工具集合。
总结其功能如下：

• 1、提供了一个窗体风格，带顶部命令按钮
• 2、提供了一系列Metro风格的控件，具体的有：
  Buttons 按钮
  ContextMenu 菜单
  DataGrid 数据表格
  Dialogs 提示框（个人不太喜欢）
  FlipView （滚动图，类似APP的滚动广告）
  Flyouts （弹出按钮及区域）
  NumericUpDown（数值框，自带±按钮）
  ProgressBar（进度条）
  ProgressRing（进度环）
  RangeSlider（可选区域的拖动滑块，个人认为做的很好，可以用来确定范围）
  Slider（滑块）
  SplitButton and DropDownButton（下来按钮）
  TabControl（选项卡）
  TextBox（文本框）
  Tile（瓦片）
  ToggleButton（可选择按钮）
  ToggleSwitch（开关，类似手机app）
  TransitioningContentControl（转场容器，一会另拿出来单独说）
  Badged Controls（标记控件，类似手机上图标的红点数值提示）
  有以上控件，基本能做一个轻量级的漂亮的WPF界面应用程序了。
  重点对“TransitioningContentControl”做一介绍：
  TransitioningContentControl是变化容器，其有一个关键属性“Content”，用来设置内容控件，如有两个按钮button1，button2，当其内部的Content从button1改为button2时，就会触发切换动画，动画可通过“.Transition” = “TransitionType.Up”等设置动画的方向，共枚举了9种动画，可以临机改变使用。
  另外，控件库自带了一些图标，iconPacks:PackIconMaterial ，基本能满足日常使用。
  

MetroWindow怎么用

MetroWindow使用分为5步：
这里我只写1.6版本的，2.0版本的请移步官网。
第一步：引用动态链接库文件：
1、在https://github.com/MahApps/MahApps.Metro/releases下载相关的动态链接库文件“MahApps.Metro.dll”并引入到工程项目中；或者通过VS的包管理工具下载：

PM> Install-Package MahApps.Metro

• 1

第二步：在App.xaml里写入配置参数：
其中pack://application:,/中的application表示应用程序的命名，这些内容也可以自己定义，需要下载源代码，然后进行内容自定义，并将配置文件位置指向自定义文件，如可以将按钮默认字体大小等进行自定义。

<Application x:Class="WpfApplication.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <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" />
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>
</Application>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

第三步：改变Windows.xaml设计部分的内容
其中，1、将标签换为controls:MetroWindow；2、增加命名空间 xmlns:controls=“http://metro.mahapps.com/winfx/xaml/controls”；

<controls:MetroWindow x:Class="WpfApplication.MainWindow"
                      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                      xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
                      Title="MainWindow"
                      Height="600"
                      Width="800">
  <Grid>

    <!-- 这里是控件内容 -->

  </Grid>
</controls:MetroWindow>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

第四步：更改窗体的基类为“MetroWindow”，增加引用"using MahApps.Metro.Controls"

using MahApps.Metro.Controls;

namespace WpfApplication
{
  public partial class MainWindow : MetroWindow
  {
    public MainWindow()
    {
      InitializeComponent();
    }
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

第五步：引入各类控件：
在第三步的2中，设计页面引入的命名空间xmlns:controls=“http://metro.mahapps.com/winfx/xaml/controls”，将页面的的控件定义为controls，你也可以自己定义自己的空间名，引入相应控件
例如，引入切换按钮，

<controls:ToggleSwitch Header="WiFi rest state" />

• 1

参考

百度翻译直接翻译了about，如下：
关于
Metro是PaulJenkins于2011年开始的一个项目，它是一种将Metro风格的用户界面引入WPF应用程序的简单方法。从那时起，它不断发展，并从社区中的各种人那里得到了贡献（最后统计有600多个分叉）。
这是社区的一个项目，由社区来完成——我们中没有人会为此付出代价，我们这样做是出于对代码的热爱。
所以，如果你喜欢这个项目并希望它变得更好，那就参与进来吧！

Metro不是万能的
微软已经展示了Metro的两面性——如果做得好，它看起来绝对令人震惊；如果做得不好，它看起来绝对可悲。并非每个应用程序都能很好地转换为Metro接口。如果您正在设计一个复杂的工具，如Visual Studio，那么最好避免使用基于大量排版的UI样式。
当然，总会有例外的规则，但仅仅因为Metro看起来简单并不意味着设计并不复杂。应用程序越复杂，在设计上花费的时间（通常）就越多。

没有为您专门定制的用户界面工具包
虽然mahapps.metro力求使好看的Metro接口更容易，但就像Windows窗体或“默认”WPF一样，需要一个设计师（或至少考虑一下设计）来创建一个好的接口。这是美学和可用性的结合。

字体
Segoe UI、Segoe WP和Zegoe UI都是Microsoft/Ascender字体。它们不会嵌入mahapps.metro中。

互操作性
为了保持.NET 4.0和4.5的兼容性，我们使用了前者中的microsoft.windows.shell。

其他很酷的东西
如果你在寻找一个我们没有的控件，我们有一些朋友已经做了MA.M兼容的控件。检查他们：
MaterialDesignXamlToolkit用于C&VB.NET MaterialDesignXaml.NET的XAML&WPF中的Google Material Design
mahapps.metro.simpleChildWindow用于mahapps.metro的简单子窗口
通过@zeluisping加载指示器
WPF的Dragablez可撕裂选项卡控件，包括停靠、工具窗口和MDI。DRAGABRZ.NET

维护者
jan karger@punker76（维护者，所有者），twitter
brendan forster@shiftkey（所有者，非活动），twitter
Dennis Daume@flagbug（非活动），Twitter
Alex Mitchell@amrykid（非活动），Twitter
[1]: https://github.com/MahApps/MahApps.Metro
[2]: https://mahapps.com/