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/