【mahapps.metro】如何快速让WPF窗体具有Metro扁平化风格_wpf metrowindow

前言

  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>
1
2
3
4
5
6
7
8

  在文件中加入这句代码，添加xmlns 引用

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

  修改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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  所有的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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

  同时还需要修改后台代码，添加引用，修改继承

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();
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

  以上就是需要完成的工作，很简单，看看最后的窗体怎么样：

  贴上自己的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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

小结

  在安装Visual Studio时，会默认安装Blend for Visual Studio，Blend是一款功能齐全的专业设计工具，可制作出精美复杂的应用程序用户界面，可以在Blend中设计UI，在Visual Studio中编写代码。

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