【mahapps.metro】如何快速讓WPF窗體具有Metro扁平化風格

前言
  Metro是微軟在Windows Phone 7中正式引入的一種界面設計，也是Windows 8的主要界面顯示風格，並在Windows 10中得以完善。
  當然如果想要Metro扁平化風格的窗體設計，完全可以自己動手完成，這裏為了節省時間，快速將默認窗體設計為Metro風格，可以使用一款國外為WPF開發的UI工具包。
內容
安裝
  在使用之前，要先安裝UI工具包，
  右擊窗體所在項目出現右鍵菜單，選擇管理NuGet程序包
  在連接程序包中搜索mahapps.metro，然後安裝
創建WPF窗體
  在項目中新建一個項，選擇WPF窗體，
  打開xaml文件

<Window x:Class="JFUI.Window1"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Title="Window1" Height="300" Width="300">
 <Grid>
 </Grid>
</Window>

  在文件中加入這句代碼，添加xmlns 引用

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

  修改Window標簽為Controls:MetroWindow

<Controls:MetroWindow x:Class="JFUI.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
 Title="Login" Height="283.5" Width="377.654" Background="#FF96CBF7" WindowStartupLocation="CenterScreen">
 <Grid Margin="0,0,0,-21">
 <TextBox Name="txtUserName" HorizontalAlignment="Left" Height="23" Margin="60,54,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="255" MaxLength="10"/>
 <Label Content="用戶名：" HorizontalAlignment="Left" Margin="60,19,0,0" VerticalAlignment="Top" FontSize="16" RenderTransformOrigin="0.554,-0.267"/>
 <Label Content="密碼：" HorizontalAlignment="Left" Margin="60,85,0,0" VerticalAlignment="Top" FontSize="16" RenderTransformOrigin="0.586,-0.5"/>
 <Button Name="btnLogin" Content="登陸" HorizontalAlignment="Left" Margin="211,200,0,0" VerticalAlignment="Top" Width="104" FontSize="16" RenderTransformOrigin="0.493,1.03" Click="Button_Click"/>
 <CheckBox Name="chkRemeber" Content="記住我" HorizontalAlignment="Left" Margin="60,165,0,0" VerticalAlignment="Top" FontSize="16" RenderTransformOrigin="0.069,0.381"/>
 <PasswordBox Name="txtPassword" HorizontalAlignment="Left" Margin="60,120,0,0" VerticalAlignment="Top" Width="255" FontSize="16" MaxLength="14"/>
 </Grid>
</Controls:MetroWindow>

  所有的MahApp.Metro資源都包含在獨立的資源字典中，為了使大多數空間使用MahApp.Metro主題，需要把資源字典添加到App.xaml中

<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>
 <! MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! >
 <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" />
 <! Accent and AppTheme setting >
 <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>

  同時還需要修改後台代碼，添加引用，修改繼承

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;




using System.Windows.Navigation;
using System.Windows.Shapes;
using MahApps.Metro.Controls;
namespace JFUI
{
 public partial class MainWindow : MetroWindow
 {
 public MainWindow()
 {
 InitializeComponent();
 }
 }
}

  以上就是需要完成的工作，很簡單，看看最後的窗體怎麼樣：
  貼上自己的xaml

<Controls:MetroWindow x:Class="JFUI.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
 Title="Login" Height="283.5" Width="377.654" Background="#FF96CBF7" WindowStartupLocation="CenterScreen">
 <Grid Margin="0,0,0,-21">
 <TextBox Name="txtUserName" HorizontalAlignment="Left" Height="23" Margin="60,54,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="255" MaxLength="10"/>
 <Label Content="用戶名：" HorizontalAlignment="Left" Margin="60,19,0,0" VerticalAlignment="Top" FontSize="16" RenderTransformOrigin="0.554,-0.267"/>
 <Label Content="密碼：" HorizontalAlignment="Left" Margin="60,85,0,0" VerticalAlignment="Top" FontSize="16" RenderTransformOrigin="0.586,-0.5"/>
 <Button Name="btnLogin" Content="登陸" HorizontalAlignment="Left" Margin="211,200,0,0" VerticalAlignment="Top" Width="104" FontSize="16" RenderTransformOrigin="0.493,1.03" Click="Button_Click"/>
 <CheckBox Name="chkRemeber" Content="記住我" HorizontalAlignment="Left" Margin="60,165,0,0" VerticalAlignment="Top" FontSize="16" RenderTransformOrigin="0.069,0.381"/>
 <PasswordBox Name="txtPassword" HorizontalAlignment="Left" Margin="60,120,0,0" VerticalAlignment="Top" Width="255" FontSize="16" MaxLength="14"/>
 </Grid>
</Controls:MetroWindow>

小結
  在安裝Visual Studio時，會默認安裝Blend for Visual Studio，Blend是一款功能齊全的專業設計工具，可制作出精美複雜的應用程序用戶界面，可以在Blend中設計UI，在Visual Studio中編寫代碼。

下面是這款工具包的官方網址： http://mahapps.com/guides/quick-start.html