WPF界面MahApps.Metro之應用


screenshot01
大家都知道,經常幹後端的程序猿通常不善於設計前端界面,來個界面的活,要麼傻眼了,要麼花大力氣自己去做組件,費時費力,效果不好。好的程序首先要“長得漂亮”,賞心悅目的界面可以提升應用程序的整體親和力。
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應用程序的工具集合。
總結其功能如下:
before
after

  • 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/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章