MahApps.Metro之安装与使用

1、MahApps.Metro安装

您可以通过NuGet GUI安装MahApps.Metro（右键单击您的项目，单击Manage NuGet Packages，选择Online并搜索MahApps.Metro）或使用Package Manager控制台：

PM> Install-Package MahApps.Metro
1

如果您想使用MahApps.Metro的预发布包（这些包具有最新代码和最新功能），您需要在GUI中启用Include Prerelease：

或使用程序包管理器控制台：

PM> Install-Package MahApps.Metro -Pre
1

2、使用MetroWindow窗口

安装MahApps.Metro后：

打开 MainWindow.xaml
在打开的Window标记内添加此属性。（这是你在XAML中引用其他命名空间的方式）：

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

或

xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
1

将<Window …标签更改为<Controls:MetroWindow …（记得也要更改结束标签！）

你应该有这样的东西（不要复制并粘贴）：

<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="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
                      Title="MainWindow"
                      Height="600"
                      Width="800">

  <!-- your content -->

</Controls:MetroWindow>
1
2
3
4
5
6
7
8
9
10
11

3、修改cs文件

您还需要修改MainWindow.xaml.cs文件，以便基类MainWindow与MetroWindowXAML文件的类匹配。

namespace WpfApplication
{
  public partial class MainWindow
  {
    public MainWindow()
    {
      InitializeComponent();
    }
  }
}
1
2
3
4
5
6
7
8
9
10

在原窗口入口继承MetroWindow基类

// To access MetroWindow, add the following reference
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
13

最终结果将如下所示：

4、使用内置样式

MahApp.Metro的所有资源都包含在单独的资源字典中。为了使大多数控件采用MahApps.Metro主题，您需要将ResourceDictionaries添加到您的App.xaml。

App.xaml（v2.0.0和更高版本）

<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" />
        <!-- Accent and AppTheme setting -->
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>
</Application>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

App.xaml（v1.6.5及更早版本）

<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

确保所有文件名都区分大小写！

最终结果看起来像这样。如果您想了解有关控件如何工作的更多信息，可以在下面找到更多信息

5.什么是MetroWindow窗口？

默认MetroWindow值由几个组件组成：

如果您不喜欢标记的元素，请不要担心，它们都是可选的。

• 标题栏MetroWindow与滚动自己的标题不同。ShowTitleBar=“True|False”
• 调整大小的手柄不是调整大小的唯一方法MetroWindow， 可以抓住所有边角，但是MetroWindow如果没有像空气窗一样的明显窗口“chrome”，调整大小的手柄可以帮助让用户放心。
• 最小化/最大化/关闭的图标不是使用静态图像，而是称为Marlett的字体。要解释为什么这样做需要一个走下记忆的道路，或至少访问维基百科关于它的文章。
• 您甚至可以通过设置隐藏标题栏上的图标 ShowIconOnTitleBar=“True|False”

6.标题栏定制

WindowButtonCommands

WindowButtonCommands是最小化，最大化/恢复和关闭按钮。你可以用ShowMinButton=“True|False”，ShowMaxRestoreButton="True|False"和隐藏按钮ShowCloseButton=“True|False”。

最小化和最大化/恢复按钮的可见性也受到影响ResizeMode。如果ResizeMode="NoResize"按钮被折叠。如果ResizeMode="CanMinimize"最大化/恢复按钮已折叠。

（左/右）WindowCommands

您可以添加自己的控件，LeftWindowsCommands或者RightWindowsCommands- 默认情况下，按钮会自动应用一种样式，以使其适合其余部分WindowsCommands。从0.9开始，您不再局限于按钮，而是任何控件。请注意，除了按钮之外，您还负责设计任何其他设计。

在 … 标签中包含这个：

<Controls:MetroWindow x:Class="MahAppsMetroSample.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"
                      xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
                      Title="MahApps.Metro.Sample"
                      GlowBrush="{DynamicResource AccentColorBrush}"
                      WindowStartupLocation="CenterScreen">

  <Controls:MetroWindow.RightWindowCommands>
    <Controls:WindowCommands>
      <Button Content="settings" />
      <Button>
        <StackPanel Orientation="Horizontal">
          <iconPacks:PackIconModern Width="24" Height="24" Kind="FoodCupcake" />
            <TextBlock Margin="4 0 0 0" VerticalAlignment="Center" Text="deploy cupcakes" />
        </StackPanel>
      </Button>
    </Controls:WindowCommands>
  </Controls:MetroWindow.RightWindowCommands>

  <Grid>
  </Grid>

</Controls:MetroWindow>
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

确保包含MahApps.Metro.IconPacks已被引用。

生成此窗口标题栏：