WPF界面MahApps.Metro之應用

WPF界面MahApps.Metro之應用

• MetroWindow是什么，可以干什么
• MetroWindow怎么用
• 參考

大家都知道，經常干后端的程序猿通常不善於設計前端界面，來個界面的活，要么傻眼了，要么花大力氣自己去做組件，費時費力，效果不好。好的程序首先要“長得漂亮”，賞心悅目的界面可以提升應用程序的整體親和力。
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 

第二步：在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> 

第三步：改變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> 

第四步：更改窗體的基類為“MetroWindow”，增加引用"using MahApps.Metro.Controls"

using MahApps.Metro.Controls; namespace WpfApplication { public partial class MainWindow : MetroWindow { public MainWindow() { InitializeComponent(); } } } 

第五步：引入各類控件：
在第三步的2中，設計頁面引入的命名空間xmlns:controls=“http://metro.mahapps.com/winfx/xaml/controls”，將頁面的的控件定義為controls，你也可以自己定義自己的空間名，引入相應控件
例如，引入切換按鈕，

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

參考

百度翻譯直接翻譯了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/