WPF 使用MahApps.Metro UI庫

在WPF中要想使用Metro風格是很簡單的，可以自己畫嘛..

但是為了節省時間，哈，今天給大家推薦一款國外Metro風格的控件庫。

本文只起到拋磚引玉的作用，有興趣還是推薦大家上官網，Thanks，官網地址 我會在底部發出。

 

實現效果

其實下面僅僅是對窗體的一個簡單設置，以及放了些簡單的按鈕，這是本文拋磚引玉的示例程序，其實還有非常多的好玩的樣式，包括動畫效果。

 

安裝 MahApps.Metro

這里依然推薦使用NuGet來進行安裝，如下圖所示。

然后在NuGet中搜索 MahApps.Metro ，然后進行安裝即可，如下圖所示。

安裝好之后就已經在我們的引用中完成了。

 

實現Metro樣式三部曲

1.首先將資源引入App.xaml

1. <Application x:Class="MetroWPF.App"
2.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.              StartupUri="MainWindow.xaml">
5.     <Application.Resources>
6.         <ResourceDictionary>
7.             <ResourceDictionary.MergedDictionaries>
8.                 <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
9.                 <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
10.                 <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
11.                 <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
12.                 <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
13.             </ResourceDictionary.MergedDictionaries>
14.         </ResourceDictionary>
15.     </Application.Resources>
16. </Application>
17.  

引入之后幾乎我們所有的控件都具備了Metro樣式了。

 

2.再把窗體換成Metro風格

在XAML狀體中進行如下 xmlns 引用。

1.  xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"

然后將Window標簽替換為如下標簽

1.  <controls:MetroWindow ...

就ok了。

 

看看我的窗體的XAML完整代碼吧，我加了三個控件做示例，如下所示。

1. <controls:MetroWindow  x:Class="MetroWPF.MainWindow"
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.         xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
5.         GlowBrush="{DynamicResource AccentColorBrush}"
6.         Title="MainWindow" Height="350" Width="525">
7.     <controls:MetroWindow.RightWindowCommands>
8.         <controls:WindowCommands>
9.             <Button Content="settings" />
10.             <Button Content="設置" />
11.         </controls:WindowCommands>
12.     </controls:MetroWindow.RightWindowCommands>
13.  
14.     <Grid>
15.         <StackPanel>
16.             <Label Margin="20">www.wxzzz.com</Label>
17.             <TextBox Margin="40,10,40,10"></TextBox>
18.             <Button>Metro Style Button</Button>
19.         </StackPanel>
20.     </Grid>
21. </controls:MetroWindow>

 

3.最后一步修改窗體cs代碼中的繼承

1. //引用
2. using MahApps.Metro.Controls;
3.  
4. namespace MetroWPF
5. {
6.     /// <summary>
7.     /// MainWindow.xaml 的交互邏輯
8.     /// </summary>
9.     public partial class MainWindow : MetroWindow
10.     {
11.         public MainWindow()
12.         {
13.             InitializeComponent();
14.         }
15.     }
16. }

至此，我們的示例就完成了，我們順便再來看看官方的窗體示例吧！其實都是很簡單的設置，非常好用。

 

 

本文示例源碼下載：MetroWPF

官方示例地址：http://mahapps.com/guides/quick-start.html

官方控件示例地址：http://mahapps.com/controls/

MahApps.Metro 項目源碼：https://github.com/MahApps/MahApps.Metro