WPF界面MahApps.Metro之应用

WPF界面MahApps.Metro之应用


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应用程序的工具集合。
总结其功能如下:
WPF界面MahApps.Metro之应用
WPF界面MahApps.Metro之应用

  • 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 ,基本能满足日常使用。
    WPF界面MahApps.Metro之应用

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/

上一篇:AvalonDock 2.0+Caliburn.Micro+MahApps.Metro实现Metro风格插件式系统(二)


下一篇:AvalonDock 2.0+Caliburn.Micro+MahApps.Metro实现Metro风格插件式系统(一)