1 快速开始

1.1 Table Of Contents

• Installation
• Styling the MetroWindow
• How does MetroWindow work
• Customization
• WindowButtonCommands
• (Left-/Right-) WindowCommands
• More Info
本指南将向您介绍 MahApps.Metro 的工作原理以及如何将其融入到您的应用程序。

1.2 安装教程

你可以安装 MahApps.Metro 通过 NuGet GUI（右键单击您的项目，单击管理 NuGet 程序包，选择浏览，然后搜索MahApps.Metro）或程序包管理器控制台︰
PM> Install-Package MahApps.Metro

如果你想要使用的 MahApps.Metro （这些有最新的代码和最新功能）的预发行版软件包，您需要启用在 GUI 中包括预发布版︰
或使用程序包管理器控制台︰
PM> Install-Package MahApps.Metro -Pre

1.3 设计窗体

有两种方式你可以设计您使用 MahApps.Metro 的窗口︰
• 您可以使用所包含的 MetroWindow 控件
• 设计你自己的窗口
现在我们会使用 MetroWindow，这种方法将为应用程序有很大一部分工作，是最快和最简单的方式。如果你想要了解滚动你自己的窗体，查阅指南。

1.3.1 使用 MetroWindow 控件

1.3.2 修改 XAML 文件

安装 MahApps.Metro后：
• 打开 MainWindow.xaml
• 打开的窗体标记里面添加此属性。（这是你如何引用其他命名空间在 XAML 中的）︰
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
或者
xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
• 修改 <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.3.3 修改后台代码

你还需要修改 MainWindow.xaml.cs 文件，以便MainWindow的基类与 XAML 文件的 MetroWindow 类匹配。
// 若要访问 MetroWindow，添加下面的引用

using MahApps.Metro.Controls;

namespace WpfApplication
{
  public partial class MainWindow : MetroWindow
  {
    public MainWindow()
    {
      InitializeComponent();
    }
  }
}
但在大多数情况下你可以省略这些基类 （因为XAML 应该照顾partial 类）︰
namespace WpfApplication
{
  public partial class MainWindow
  {
    public MainWindow()
    {
      InitializeComponent();
    }
  }
}

最终的结果将如下所示︰

1.3.4 使用内置样式

所有 MahApp.Metro 的资源均包含在单独的资源字典。为了使控件中的大部分采用的 MahApps.Metro 主题，你需要将 ResourceDictionaries 添加到您的 App.xaml。
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.3.5 什么是MetroWindow？

默认 MetroWindow 由几个部分组成︰

如果你不喜欢被贴上标签的元素，不用担心，他们全都是可选。
• 除了你自己，标题栏是设置 MetroWindow。ShowTitleBar=”True|False”
• 大小调整手柄不是唯一的方式来调整MetroWindow大小 -可以抓住所有的边缘和角落，但是MetroWindow 没有一个像 aero 窗口那样引人注目的窗口 “chrome”, 调整手柄可以帮助用户放心。
• 替代使用静态图像，为最小化最大化/关闭的图标是称为 Marlett 字体。要解释为什么有如此需求，了解它的来历，或许至少访问有关它的维基百科文章。
• 您甚至可以通过设置标题栏上的图标来隐藏ShowIconOnTitleBar=”True|False”

1.4 定制

1.4.1 窗口按钮命令

WindowButtonCommands 是最小化、最大化/还原和关闭按钮。你可以隐藏按钮通过 ShowMinButton=”True|False”, ShowMaxRestoreButton=”True|False” 和 ShowCloseButton=”True|False”.
最小化和最大化/还原按钮的可见性也可以被 ResizeMode影响。如果设置ResizeMode=”NoResize”按钮将被折叠. 如果设置 ResizeMode=”CanMinimize”最大化/还原按钮处于折叠状态。

1.4.2 （左 / 右-）窗体命令

您可以将您自己的控件添加到 LeftWindowsCommands 或 RightWindowsCommands - 默认情况下，按钮自动将样式应用于他们，使他们适应其余的 WindowsCommands 。截至 0.9，你不再局限于只是按钮，但任何控件。要知道，你是负责设计按钮以外的任何东西。
包含这个在内 <MetroWindow> ... </MetroWindow>标记：

<Controls:MetroWindow.RightWindowCommands>
  <Controls:WindowCommands>
    <Button Content="settings" />
    <Button>
      <StackPanel Orientation="Horizontal">
        <Rectangle Width="20"
                   Height="20"
                   Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
          <Rectangle.OpacityMask>
            <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_cupcake}" />
          </Rectangle.OpacityMask>
        </Rectangle>
        <TextBlock Margin="4 0 0 0"
                   VerticalAlignment="Center"
                   Text="deploy cupcakes" />
      </StackPanel>
    </Button>
  </Controls:WindowCommands>
</Controls:MetroWindow.RightWindowCommands>

请确保包含图标以得到蛋糕图标。
产生这样的窗口标题栏︰

除非禁用标题栏，（左 / 右-）WindowCommands 的前景（链接）颜色永远是白色，在这种情况下它将是您选择的任何主题的反向。例如，使用白光/主题，前景颜色将为黑色

1.5 接下来是什么？

有关扩展文档，看看Controls 页面。

2 高级MetroWindow指南

2.1 玩转自己的窗口

你自己的方法是非常价值的, 这取决于你要用什么风格的应用程序。一个好的例子是code52’s MarkPad, 在那里我们需要的灵活性的同时仍然使用 MahApps.Metro 作为一种基本的视觉框架滚动我们自己的窗口。 The key elements used were 使用的关键元素是 WindowCommands （这里讨论的）和 BorderlessWindowBehavior。

2.1.1 无边框窗口行为

一些命名空间将引用添加到打开的窗口标记︰

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:Behaviours="clr-namespace:MahApps.Metro.Behaviours;assembly=MahApps.Metro"

然后在某个地方在窗口内，添加

<i:Interaction.Behaviors>
        <Behaviours:BorderlessWindowBehavior/>
</i:Interaction.Behaviors>

做完后， BorderlessWindowBehavior 有一些选项，例如 ResizeWithGrip 和 AutoSizeToContent:
<Behaviours:BorderlessWindowBehavior ResizeWithGrip="False" />

3 图标和资源 - MahApps.Metro

3.1 图标和资源

MahApps.Metro 不会嵌入任何图标或”资源”以外的控件样式。而是通过MahApps.Metro.Resources 包。这允许更好的发现能力和定制。您可以安装使用 nuget 安装此软件包︰
PM> Install-PackageMahApps.Metro.Resources
目前，这包括 Entypo 和 Templarian’s Modern UI Icon pack

3.2 用法

资源只是 Canvas的环绕一个或多个 Paths. 若要使用这些各种各样的元素，您可以只使用 WPF 的 VisualBrush.

<Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Resources/Icons.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
</Window.Resources>

<Rectangle>
        <Rectangle.Fill>
            <VisualBrush Visual="{StaticResource appbar_add}" />
        </Rectangle.Fill>
</Rectangle>

如果你想创建 “circle” 按钮 ala Windows Phone 7, 最简单的方式是在Rectangle 上的VisualBrush 设置为 OpacityMask . 这意味着您只需改变状态变化的Rectangle的颜色 (hover, mouse down等)

<Rectangle Fill="Black">
  <Rectangle.OpacityMask>
   <VisualBrush Visual="{StaticResource appbar_add}" Stretch="Fill" />
  </Rectangle.OpacityMask>
</Rectangle>

4 样式

4.1 目录

• Overview
• How to change the current theme… via App.xaml
• How to change the current theme… via ThemeManager
• How to change the current theme… On a Window different to your Application’s MainPage
• Creating Custom Accents and Themes

4.2 概述

该指南向你介绍很多 MahApps.Metro 的 accents and themes，以及如何自己创建的方法。
所有的 MahApps.Metro’s accents and themes 被包含在各自的资源字典里 (确保所有的文件名都拼写正确，他们是区分大小写的！)。

4.3 怎么去修改当前的theme

你可以选择以下可用的 accents:
“Red”, “Green”, “Blue”, “Purple”, “Orange”, “Lime”, “Emerald”, “Teal”, “Cyan”, “Cobalt”, “Indigo”, “Violet”, “Pink”, “Magenta”, “Crimson”, “Amber”, “Yellow”, “Brown”, “Olive”, “Steel”, “Mauve”, “Taupe”, “Sienna”
and these themes:
“BaseLight”, “BaseDark”

4.3.1 通过App.xaml

最快的方法是在 App.xaml指定 the accent and theme resource。

<Application x:Class="MahAppsMetroThemesSample.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" />

                <!-- accent resource -->
                <!-- change "Cobalt" to the accent color you want -->

                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Cobalt.xaml" />

                <!-- theme resource -->
                <!-- change "BaseLight" to the theme you want -->
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

4.3.2 通过ThemeManager

MahApps.Metro 拥有 ThemeManager的方法让你使用后台代码修改accent and theme. 使用两行代码解决, 如下:

public partial class App : Application
{
    protected override void OnStartup(StartupEventArgs e)
    {
        // get the current app style (theme and accent) from the application
        // you can then use the current theme and custom accent instead set a new theme
        Tuple<AppTheme, Accent> appStyle = ThemeManager.DetectAppStyle(Application.Current);

        // now set the Green accent and dark theme
        ThemeManager.ChangeAppStyle(Application.Current,
                                    ThemeManager.GetAccent("Green"),
                                    ThemeManager.GetAppTheme("BaseDark")); // or appStyle.Item1

        base.OnStartup(e);
    }
}

4.3.3 与应用程序主页不同的窗体

通过 MahApps.Metro ，你可以为MetroWindow指定不同的accent and theme . 主窗体或者其他任何 MetroWindow 将会保有在App.xaml文档中被指定的 accent and theme。

<Controls:MetroWindow.Resources>
    <ResourceDictionary>
       <ResourceDictionary.MergedDictionaries>
            <!-- this window should be blue -->
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
            <!-- and should use the light theme -->
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Controls:MetroWindow.Resources>

你也可以 ThemeManager来实现，像这样：

public partial class AccentStyleWindow : MetroWindow
{
    public void ChangeAppStyle()
    {
        // set the Red accent and dark theme only to the current window
        ThemeManager.ChangeAppStyle(this,
                                    ThemeManager.GetAccent("Red"),
                                    ThemeManager.GetAppTheme("BaseDark"));
    }
}

4.3.4 创建自定义 Accents and Themes

MahApps.Metro ThemeManager的另一个不错的功能是使用自定义的 accents和themes 或使用动态创建的 accent 和 theme.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
                    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                    mc:Ignorable="options">

    <!--ACCENT COLORS-->
    <Color x:Key="HighlightColor">#FF9F0055</Color>

    <!--80%-->
    <Color x:Key="AccentColor">#CCD80073</Color>
    <!--60%-->
    <Color x:Key="AccentColor2">#99D80073</Color>
    <!--40%-->
    <Color x:Key="AccentColor3">#66D80073</Color>
    <!--20%-->
    <Color x:Key="AccentColor4">#33D80073</Color>

    <!-- re-set brushes too -->
    <SolidColorBrush x:Key="HighlightBrush" Color="{StaticResource HighlightColor}" options:Freeze="True" />
    <SolidColorBrush x:Key="AccentBaseColorBrush" Color="{StaticResource AccentBaseColor}" options:Freeze="True" />
    <SolidColorBrush x:Key="AccentColorBrush" Color="{StaticResource AccentColor}" options:Freeze="True" />
    <SolidColorBrush x:Key="AccentColorBrush2" Color="{StaticResource AccentColor2}" options:Freeze="True" />
    <SolidColorBrush x:Key="AccentColorBrush3" Color="{StaticResource AccentColor3}" options:Freeze="True" />
    <SolidColorBrush x:Key="AccentColorBrush4" Color="{StaticResource AccentColor4}" options:Freeze="True" />

    <SolidColorBrush x:Key="WindowTitleColorBrush" Color="{StaticResource AccentColor}" options:Freeze="True" />

    <LinearGradientBrush x:Key="ProgressBrush" EndPoint="0.001,0.5" StartPoint="## 1.002,0.5" options:Freeze="True">
        <GradientStop Color="{StaticResource HighlightColor}" Offset="0" />
        <GradientStop Color="{StaticResource AccentColor3}" Offset="1" />
    </LinearGradientBrush>

    <SolidColorBrush x:Key="CheckmarkFill" Color="{StaticResource AccentColor}" options:Freeze="True" />
    <SolidColorBrush x:Key="RightArrowFill" Color="{StaticResource AccentColor}" options:Freeze="True" />

    <Color x:Key="IdealForegroundColor">White</Color>
    <SolidColorBrush x:Key="IdealForegroundColorBrush" Color="{StaticResource IdealForegroundColor}" options:Freeze="True" />
    <SolidColorBrush x:Key="IdealForegroundDisabledBrush" Color="{StaticResource IdealForegroundColor}" Opacity="0.4" options:Freeze="True" />
    <SolidColorBrush x:Key="AccentSelectedColorBrush" Color="{StaticResource IdealForegroundColor}" options:Freeze="True" />

    <!-- DataGrid brushes -->
    <SolidColorBrush x:Key="MetroDataGrid.HighlightBrush" Color="{StaticResource AccentColor}" options:Freeze="True" />
    <SolidColorBrush x:Key="MetroDataGrid.HighlightTextBrush" Color="{StaticResource IdealForegroundColor}" options:Freeze="True" />
    <SolidColorBrush x:Key="MetroDataGrid.MouseOverHighlightBrush" Color="{StaticResource AccentColor3}" options:Freeze="True" />
    <SolidColorBrush x:Key="MetroDataGrid.FocusBorderBrush" Color="{StaticResource AccentColor}" options:Freeze="True" />
    <SolidColorBrush x:Key="MetroDataGrid.InactiveSelectionHighlightBrush" Color="{StaticResource AccentColor2}" options:Freeze="True" />
    <SolidColorBrush x:Key="MetroDataGrid.InactiveSelectionHighlightTextBrush" Color="{StaticResource IdealForegroundColor}" options:Freeze="True" />

    <SolidColorBrush x:Key="MahApps.Metro.Brushes.ToggleSwitchButton.OnSwitchBrush.Win10" Color="{StaticResource AccentColor}" options:Freeze="True" />
    <SolidColorBrush x:Key="MahApps.Metro.Brushes.ToggleSwitchButton.OnSwitchMouseOverBrush.Win10" Color="{StaticResource AccentColor2}" options:Freeze="True" />
    <SolidColorBrush x:Key="MahApps.Metro.Brushes.ToggleSwitchButton.ThumbIndicatorCheckedBrush.Win10" Color="{StaticResource IdealForegroundColor}" options:Freeze="True" />
</ResourceDictionary>

为了使用自定义accent,首先你要在 ThemeManager 添加它：

public partial class App : Application
{
    protected override void OnStartup(StartupEventArgs e)
    {
        // add custom accent and theme resource dictionaries to the ThemeManager
        // you should replace MahAppsMetroThemesSample with your application name
        // and correct place where your custom accent lives
        ThemeManager.AddAccent("CustomAccent1", new Uri("pack://application:,,,/MahAppsMetroThemesSample;component/CustomAccents/CustomAccent## 1.xaml"));

        // get the current app style (theme and accent) from the application
        Tuple<AppTheme, Accent> theme = ThemeManager.DetectAppStyle(Application.Current);

        // now change app style to the custom accent and current theme
        ThemeManager.ChangeAppStyle(Application.Current,
                                    ThemeManager.GetAccent("CustomAccent1"),
                                    theme.Item1);

        base.OnStartup(e);
    }
}

它也是可以通过使用特定颜色动态创建Accent的资源字典。看看这个在 GitHub 的完整示例。

5 Control

目前并不是所有的控件都记录。下面列出了与文档相关的控件列表︰

5.1 MetroWindow

5.1.1 Default

MetroWindow 的主要用途主要是在快速开始部分详解。
一个没有详细的属性是 SaveWindowPosition=”True|False” (默认 False) 选项. 设置该属性为 True 将意味着，它将自动被定位和大小调整为它是退出时的状态。这被设计来提高用户体验和速度发展作为那些定期做的“plumbing” UI之一。
但是要注意 – 在程序退出并重新启动时如果监视器被分离，或出现某些情况时，您的应用程序可能会启动关闭屏幕。一定要在代码中提供一个‘reset’ 选项或句柄。

5.1.2 Windowboders

MetroWindow 可以拥有边框：

<Controls:MetroWindow x:Class="MahApps.Metro.Simple.Demo.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="200"
                      Width="600"
                      BorderBrush="{DynamicResource AccentColorBrush}"
                      BorderThickness="1"
                      WindowStartupLocation="CenterScreen">
</Controls:MetroWindow>

发光的边框

<Controls:MetroWindow x:Class="MahApps.Metro.Simple.Demo.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="200"
                      Width="600"
                      GlowBrush="{DynamicResource AccentColorBrush}"
                      WindowStartupLocation="CenterScreen">
</Controls:MetroWindow>

或者阴影的边框

<Controls:MetroWindow x:Class="MahApps.Metro.Simple.Demo.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="200"
                      Width="600"
                      BorderThickness="0" 
                      GlowBrush="Black"
                      ResizeMode="CanResizeWithGrip"
                      WindowTransitionsEnabled="False"
                      WindowStartupLocation="CenterScreen">
</Controls:MetroWindow>

5.2 Buttons

5.2.1 Default Look

这只是替换标准的按钮放在库中时，没有什么幻想来激活它。

5.2.2 MetroCircleButton

“Standard” 圆形按钮, 图标设计。
将以下内容添加到按钮以应用此样式： Style=”{DynamicResource MetroCircleButtonStyle}”

5.2.3 SquareButton

另一个 WP7 风格的按钮，这次为文本（非图标）。像这里所有的按钮，有正常，被单击，并悬停的状态。

若要应用该样式的按钮，需添加以下内容︰ Style=”{DynamicResource SquareButtonStyle}”

5.2.4 AccentedSquareButton

稍加修饰拥有当前皮肤颜色作为背景色的方形按钮版本。

若要应用该样式的按钮添加以下内容︰ Style=”{StaticResource AccentedSquareButtonStyle}”

5.2.5 FlatButton

当你制作一个电话上 Windows Phone-可以发现所有控件（挂断，键盘等），此类按钮是 ‘flat buttons’。

平面按钮存放在
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/FlatButton.xaml" />
你需要放入资源字典，并使用它。

5.3 ContextMenu

ContextMenu without CompositeCollection

当你熟悉了它，您可以使用ContextMenu︰

<ContextMenu>
  <MenuItem Command="ApplicationCommands.New" />
  <MenuItem Command="ApplicationCommands.Delete" />
  <MenuItem Command="ApplicationCommands.Print" />
</ContextMenu>

ContextMenu with CompositeCollection

如果您想要使用声明为资源和共享的ContextMenu，必须使用如下的 CompositeCollection :

<CompositeCollection x:Key="ContextMenuBase"
                     x:Shared="False">
  <MenuItem Command="ApplicationCommands.New" />
  <MenuItem Command="ApplicationCommands.Delete" />
  <Separator />
  <StaticResource ResourceKey="ContextMenuItemRefresh" />
  <Separator />
</CompositeCollection>

<ContextMenu>
  <ContextMenu.ItemsSource>
    <CompositeCollection>
      <CollectionContainer Collection="{StaticResource ContextMenuBase}"></CollectionContainer>
      <MenuItem Command="ApplicationCommands.Print" />
    </CompositeCollection>
  </ContextMenu.ItemsSource>
</ContextMenu>

当您运行应用程序时你会遇到大量的绑定错误︰
System.Windows.Data 错误︰ 4︰找不到所绑定的引用源 ‘ RelativeSource FindAncestor，AncestorType=’System.Windows.Controls.ItemsControl’，AncestorLevel = 1 ‘。
BindingExpression:Path = VerticalContentAlignment;DataItem = null;目标元素是 ‘MenuItem’ (Name=’’);目标属性是 ‘VerticalContentAlignment’ （’VerticalAlignment’ 类型）。
这是在WPF创建一个自定义的MenuItem样式的一个已知的问题和解决方法：

<Style TargetType="{x:Type MenuItem}"
       BasedOn="{StaticResource MetroMenuItem}">
  <Setter Property="HorizontalContentAlignment"
          Value="Left" />
  <Setter Property="VerticalContentAlignment"
          Value="Center" />
</Style>

缺点是你将失去通过在ContextMenu上设置内容对齐方式属性控制MenuItem的内容对齐的能力。

5.4 DataGrid

DataGrid是关联着 .NET 4.0 默认情况下，提供支持的筛选、分组、排序以及你对 DataGrid 所期望的其他标准功能的控件。
MahApps.Metro 使用默认 DataGrid 控件，对它应用默认的样式，。它还包含Checkbox样式的 DataGridCheckBoxColumn，以及自定义的 DataGridNumberNumericUpDownColumn。

5.4.1 Getting Started

为了使要应用的样式，你将必须在你 App.xaml 和namespace里引用Styles/Controls的资源字典。
xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
在你正在使用的窗体，介绍关于怎么使用它，可以在快速入门指南中找到。
包括引用后, 在 XAML 中放置的任何 DataGrid 将按照上面的样式显示。

<DataGrid ItemsSource="{Binding People}">
</DataGrid>

5.4.2 Alternative Style

MahApps.Metro 还提供了一种，试图模仿在微软 Azure 上发现的 AzureDataGrid的DataGrid的样式。使用它而不是默认样式，简单对 DataGrid 的 Style 属性设置为 {StaticResource AzureDataGrid}。像往常一样，确保你有引用定义。

<DataGrid ItemsSource="{Binding People}" Margin="10,20,10,0"
                  AutoGenerateColumns="True"
                  Style="{StaticResource AzureDataGrid}">
</DataGrid>

AzureDataGrid 样式将看起来像这样︰

5.4.3 DataGrid Numeric Updown Control

为了设计 DataGrid，MahApps.Metro 还提供了一个控件，允许用户添加NumericUpDown作为他们 DataGrid 的列之一。若要将自定义的列添加到您的 DataGrid， MahApps 命名空间下添加DataGridNumericUpDownColumn到您的 DataGrid.Columns 属性。如果还没有这样做，一定要将 AutoGenerateColumns 设置为 False。

<DataGrid ItemsSource="{Binding Path=Albums}"
                  Grid.Row="0"
                  AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Genre"
                                    Binding="{Binding Genre.Name}" />
                <controls:DataGridNumericUpDownColumn Header="Price"
                                                      Binding="{Binding Price}"
                                                      StringFormat="C"
                                                      Minimum="0" />
            </DataGrid.Columns>
</DataGrid>

最终的结果将如下所示︰

5.4.4 DataGrid Checkbox

最后，MahApps.Metro 为DataGridCheckBoxColumn 提供了ElementStyle。为了应用该样式，必须将 DataGridCheckBoxColumn 的 ElementStyle 属性设置为 {DynamicResource MetroDataGridCheckBox}，如下面的代码示例所示。

<DataGrid ItemsSource="{Binding Path=Albums}"
                  Grid.Row="0"
                  AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridCheckBoxColumn ElementStyle="{DynamicResource MetroDataGridCheckBox}"
                                        EditingElementStyle="{DynamicResource MetroDataGridCheckBox}"
                                        Header="IsSelected"
                                        Binding="{Binding RelativeSource={RelativeSource AncestorType=DataGridRow}, Path=IsSelected, Mode=OneWay}"/>
            </DataGrid.Columns>
</DataGrid>

最终的结果将如下所示︰

5.5 Dialogs

由于内置的 WPF 对话框是 unstyleable，我们不得不创建我们自己的样式。你会发现我们的对话框在 MahApps.Metro.Controls.Dialogs 命名空间中。

在 MahApps.Metro 中的所有对话框都是异步调用。
如果您在.NET 4.5 你有幸使用 async 关键字，如果你又被卡在.NET 4.0的时候，要使用的对话框的话，你只能继续原来的了。
本教程使用.NET 4.5 如果你真的想要使用.NET 4.0的 async/await，你可以安装Microsoft Async

5.5.1 Message dialog

简单的消息对话框可以通过ShowMessageAsync 方法显示。它是 MetroWindow 的一种扩展方法，所以从你的窗体类调用它。
await this.ShowMessageAsync(“This is the title”, “Some message”);
对于简单的按钮有额外的可选参数，如Ok和Cancel和颜色主题以及动画选项的设置。

5.5.2 Progress dialog

还有个在对话框的底部有一个进度栏的内置对话框。这样称呼它︰
var controller = await this.ShowProgressAsync(“Please wait…”, “Progress message”);
此方法返回一个公开 SetProgress 方法的 ProgressDialogController 对象，，使用它来设置当前的进度。以下是演示有进度对话框的图片︰

5.6 FlipView

FlipView 作为Metro应用程序消息横幅。它的灵感来自 Windows 8/WinRT 的同名控件（见下面的图片）。然而，我们的是从地面向上写入，支撑着 MahApps.Metro 的基础。

5.6.1 Getting started

FlipView 的结构类似于常规的TabControl控件。把你的内容放入它的 Items 属性，它将允许用户转换他们。
下面的代码是从我们的 MetroDemo 获取的。

<Controls:FlipView Height="200" 
                   IsBannerEnabled="True" 
                   SelectionChanged="FlipView_SelectionChanged"
                   Margin="0, 0, 10, 0">
    <Controls:FlipView.Items>
        <Grid Background="#2E8DEF">
            <Rectangle Margin="0, 0, 10, 0" Width="50" Height="50">
                <Rectangle.Fill>
                    <VisualBrush Visual="{StaticResource appbar_cupcake}" />
                </Rectangle.Fill>
            </Rectangle>
        </Grid>
        <Grid Background="#00A600">
            <Rectangle Margin="0, 0, 10, 0" Width="50" Height="50">
                <Rectangle.Fill>
                    <VisualBrush Visual="{StaticResource appbar_xbox}" />
                </Rectangle.Fill>
            </Rectangle>
        </Grid>
        <Grid Background="#BF1E4B">
            <Rectangle Margin="0, 0, 10, 0" Width="50" Height="50">
                <Rectangle.Fill>
                    <VisualBrush Visual="{StaticResource appbar_chess_horse}" />
                </Rectangle.Fill>
            </Rectangle>
        </Grid>
    </Controls:FlipView.Items>
</Controls:FlipView>

上面的代码产生以下结果。

通过设置 IsBannerEnabled 属性，FlipView 底部的banner可以显示和隐藏。您可以使用 BannerTextproperty更改banner文本。我们可以使用后台代码中基于选项更改banner。

private void FlipView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var flipview = ((FlipView)sender);
    switch (flipview.SelectedIndex)
    {
        case 0:
            flipview.BannerText = "Cupcakes!";
            break;
        case 1:
            flipview.BannerText = "Xbox!";
            break;
        case 2:
            flipview.BannerText = "Chess!";
            break;
    }
}

5.6.3 The Control Buttons
控制按钮（下一页和上一页按钮）允许用户使用他们的鼠标来转换它的项。通过调用HideControlButtons 和ShowControlButtons，来禁用或重新启用控制按钮。用户也可以使用键盘上箭头来转换它的项。
5.6.4 Automated scrolling (batteries not included)
当你想要拥有自动滚动体验，禁用控制按钮是非常有用的。这可以通过使用一个计时器并递增SelectedIndex 由执行 1 直到索引等于 Items.Length-1。在这那点上，将会把 SelectedIndex 重置为 0。
5.7 Flyouts
弹出窗口是拥有自定义内容的窗口覆盖物。

将下面的代码添加到您的 MetroWindow:

<Controls:MetroWindow.Flyouts>
    <Controls:FlyoutsControl>
        
    </Controls:FlyoutsControl>
</Controls:MetroWindow.Flyouts>

这是弹出窗口的容器。在此容器内添加以下内容︰
<Controls:Flyout Header=”Flyout” Position=”Right” Width=”200”>

这将创建一个具有页眉的、从窗口右侧滑出、宽度为 200的弹出窗口，。
Position属性可以设置的值：
Left,
Right,
Top,
Bottom

5.7.1 Themed flyouts

在0.12版本，弹出窗口可以有不同的主题，不可忽视的 Theme属性，如下︰
Adapt,
Inverse,
Dark,
Light,
Accent
• Adapt弹出主题窗口和宿主窗口的主题相适应。
• Inverse是宿主窗口主题的反向主题。
• Dark将一直是dark的主题，这也是默认值。
• Light将一直是light的主题。
• Accent弹出主题窗口和宿主窗口的主题相适应，它看起来像这蓝色的主题︰

5.7.2 WindowCommandsOverlayBehaviorn

即使显示了弹出窗口，MetroWindow也能为 LeftWindowCommands、 RightWindowCommands、 WindowButtonCommands 和 Icon设有覆盖属性来处理置顶的状态。
public WindowCommandsOverlayBehavior LeftWindowCommandsOverlayBehavior
public WindowCommandsOverlayBehavior RightWindowCommandsOverlayBehavior
public WindowCommandsOverlayBehavior WindowButtonCommandsOverlayBehavior
public WindowCommandsOverlayBehavior IconOverlayBehavior
这些都是 WindowCommandsOverlayBehavior 的值
Never // Doesn’t overlay flyouts nor a hidden TitleBar.
Flyouts // Overlays opened Flyout controls.
HiddenTitleBar // // Overlays a hidden TitleBar.
Always
WindowCommandsOverlayBehavior.Always

WindowCommandsOverlayBehavior.Never

5.8 NumericUpDown

NumericUpDown控件是用来增加或减少数值大小。

如果您按下 + 按钮NumericUpDown控件的值增加 Interval中设置的值。按下 - 按钮将减少相应数值。如果你按下并按住 + 或 - 那么数值将分别持续增长，下降。

5.8.1 SpeedUp

如果你按下并长按 + 或 - ，Value增加或减少得更快。如果不需要这种行为，可以通过 SettingSpeedup = false来关闭此功能。默认值为 true。

5.8.2 HasDecimals

控制NumericUpDown控件是否显示小数点和小数位数。

5.8.3 InterceptArrowKeys

你还可以使用向上箭头或向下箭头来增加或减少该值。如果你设置 InterceptArrowKeys = true，您可以启用这种行为。默认情况下启用了这种行为。默认值为 true。

5.8.4 InterceptMouseWheel

像与 InterceptArrowKeys 你可以通过使用鼠标滚轮来更改值。向上滑动滚轮越多会根据Interval增加值越多，向下滑动滚轮则相应减少。默认值为 true。

5.8.5 InterceptManualEnter

像 InterceptArrowKeys ，您可以通过定位到控件和用键盘打字更改值。默认值为 true。

Minimum / Maximum

通过指定一个值为 Minimum或Maximum，您可以设置合法值的范围。

HideUpDownButtons

如果你想隐藏向上/向下按钮。你就不能够单击向上/向下增加/减小该值。但是你可以用箭头键，鼠标滚轮和输入值手册进行交互。
• HideUpDownButtons = false:

• HideUpDownButtons = true:

5.8.6 StringFormat

您还可以设置 StringFormat 来格式化控件中显示的值。
举例：
• C2
• N4
• E1
• ”{}{0:N2} psc”

5.8.7 Example

以下NumericUpDown，数值的变化范围从 0 到 1000。此外可以通过按 + 来以5的幅度来增加数值。该值将显示为带有两位小数的货币︰
<Controls:NumericUpDown Minimum = 0, Maximum = 10000, Interval = 5, StringFormat="C2"/>

5.9 Custom Styling

5.9.1 Want to hide Up-Down Buttons if control is readonly?

如果你想要隐藏的向上向下按钮，如果该控件是只读,你可以添加下面的样式到您的应用程序。

<Style TargetType="{x:Type controls:NumericUpDown}">
                <Style.Triggers>
                    <Trigger Property="IsReadOnly"
                                 Value="True">
                        <Setter Property="HideUpDownButtons"
                                    Value="True" />
                    </Trigger>
                </Style.Triggers>
</Style>

5.10 ProgressBar

MahApps.Metro ProgressBar就像重新设计的内置进度条，但是，当然，。

最上面的两个进度条是不同进度状态的ProgressBar。第三个进度条IsIndeterminate 设置为 True

5.10.1 MetroProgressBar

MetroProgressBar 是一种可采用、简单的样式。而不是去创建一个普通的ProgressBar用途︰
<Controls:MetroProgressBar />
其运动状态看起来像 ProgressRing 但不是圆。

5.10.2 ProgressRing

ProgressRing控件被仿照类似在 Windows 8 来表示活动状态的控件，而不是表示已完成进度百分比。
<Controls:ProgressRing IsActive="True" />
IsActive可以绑定到 viewmodel 属性。
<Controls:ProgressRing IsActive="{Binding IsActive}" />
如果您想要更改颜色，请重写Foreground。
<Controls:ProgressRing Foreground="{DynamicResource AccentColorBrush}"/>

5.11 RangeSlider

采取从Avalon Controls Library (MS PL)，RangeSlider 允许您选择一个范围值，而不是单个值。
此控件将被更新，以有更多的功能

5.11.1 Events

More events was added: DragStared/DragDelta/DragCompleted for Lower/Central/Upper thumbs Events for lower/upper value changed OldValues parameters in event args for rangeChanged event
添加有更多的事件︰ DragStared/DragDelta/DragCompleted 为低/中/高大拇指事件为最低/最高值更改为 rangeChanged 事件的事件参数中的 OldValues 参数

5.11.2 Orientation

现在range slider支持垂直方向

5.11.3 MoveToPoint

IsMoveToPointEnabled 功能运行像在Slider

5.11.4 SmallChange/LargeChange

当 IsMoveToPointEnabled = False 拇指将根据你在Small /LargeChange 中设置的值移动。
5.11.5 Interval
此属性将设置在Small /Larnge 变化之间变化值的数值大小。

5.11.6 IsSnapToTickEnabled

如果设置为 true，拇指将对齐到ticks就像标准的Slider。

5.11.7 TickBars and Tickplacement

Range Slider支持根据更改的最小值和最大值以显示/隐藏刻度以及更改其刻度宽度

5.11.8 ExtendedMode

如果它设置 ExtendedMode = False 你在范围内除了用鼠标移动大拇指近/远以外，不能做任何操作，但如果在范围内，它使你可以使用 MoveToPoint 或Small/Large change，在通过单击鼠标左键 + 左或右的控制按钮来移动左手的拇指和鼠标右键 + 左或右的控制按钮来移动右手拇指的范围内。如果Extended mode = true 你也可以通过单击鼠标左键按钮移动整个范围。

5.11.9 MoveWholeRange

此属性会让你使用 MoveToPoint 或Small/Large变化（工作也在范围内）时移动整个范围

5.11.10 MinRangeWidth

设置最小宽度的中央拇指。它可以在范围从 0 到 range_slider_width/2。

5.11.11 AutoToolTipPlacement and AutotoolTipPrecision

AutoToolTipPlacement 将显示工具提示，其中将用随着拇指移动并显示当前值。执行左/中/右thumbs。
AutotoolTipPrecision 设置将在 autotooltip 点后显示的位数。

5.11.12 Small Example

<Сontrols:RangeSlider Style="{StaticResource RangeSliderCameraCommonStyle}" 
            Minimum="{Binding Path=MinValue, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
            Maximum="{Binding Path=MaxValue, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
            LowerValue="{Binding Path=CurrentMinValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
            UpperValue="{Binding Path=CurrentMaxValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
            LowerValueChanged="OnLowerValueChanged" UpperValueChanged="OnUpperValueChanged"
            LowerThumbDragStarted="OnLowerDragStarted"
            LowerThumbDragCompleted="OnLowerDragCompleted"
            UpperThumbDragStarted="OnUpperDragStarted" 
            UpperThumbDragCompleted="OnUpperDragCompleted" 
            AutoToolTipPlacement="TopLeft" AutoToolTipPrecision="2" MoveWholeRange="True"
            IsSnapToTickEnabled="True" IsMoveToPointEnabled="True" ExtendedMode="True"></Сontrols:RangeSlider>

5.12 Slider

此控件在 MahApps.Metro 中有几种样式︰

5.12.1 Default style

这是 Slider的基本样式。如果你不使用自定义样式，将自动应用默认样式。如果你想让你自定义的样式基于该样式，您需要添加BasedOn=”{StaticResource MetroSlider}”

5.12.2 FlatSlider style

若要使用该样式需要加载资源字典
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/FlatSlider.xaml" />
以及明确的设置Slider的样式为Style=”{DynamicResource FlatSlider}”
这种样式可以动态地更改为︰

为此，你只需要更改 TickPlacement 属性从无为其他属性值。

5.13 SplitButton and DropDownButton

5.13.1 SplitButton

此控件是具有下拉列表的按钮，但选定的项更改时，按钮内容会随之改变。

5.13.2 Events

SplitButton具有 SelectionChanged 和Click事件

5.13.3 SelectedItem and SelectedIndex

此属性的用法就像是在Listbox或ComboBox。当此属性之一更改时，按钮的内容会也发生了变化。

5.13.4 Binding to ObservableCollection or Dictionary

要正确绑定 ObservableCollection 或Dictionary到SplitButton，您需要使用ItemsSource和 DisplayMemberPath ，ItemsSource=”{Binding Albums}” DisplayMemberPath=”Title”，如果你只是绑定简单的类型，如枚举或整数，你不需要用到 DisplayMemberPath 属性，只有ItemsSource。

5.13.5 Orientation

你可以在屏幕截图中看到，SplitButton支持方向改变。

5.13.6 Button commands

您可以使用SplitButton的按钮命令

5.13.7 Icon property

你可以将单独的图标添加到SplitButton来显示它独立地从它的内容。它可以是位图图像或矢量图标。Icon=”{DynamicResource appbar_alert}”

5.13.8 Example

<Controls:SplitButton
Icon=”{DynamicResource appbar_alert}”
HorizontalContentAlignment=”Left”
HorizontalAlignment=”Center”
VerticalContentAlignment=”Center”
Width=”120”
SelectedIndex=”2”
ItemsSource=”{Binding Albums}”
DisplayMemberPath=”Title”
VerticalAlignment=”Center” />
结果会是这样:

5.13.9 DropDownButton

除了有少许的不同，此控件与SplitButton几乎一样︰它有没有 SelectedItem 和 SelectedIndex 属性，也没有SelectionChanged 事件。按钮的内容也不会改变，它是静态的。下拉列表(Dropdownlist)是一个上下文菜单，而不是拆SplitButton的列表框。在其他方面与 SplitButton是相同的。

5.13.10 Example

<Controls:DropDownButton 
    VerticalContentAlignment="Center"
    Width="120"
    Content="Test"
    DisplayMemberPath="Title"
    Icon="{DynamicResource appbar_music}"
    ItemsSource="{Binding Albums}">
</Controls:DropDownButton>

5.14 TabControl

有三种选项卡样式-AnimatedTabControl、 SingleRowAnimatedTabControl 和默认的 TabControl。默认 TabControl样式包含在 Controls.xaml，但另外两个需要特定引用（在对 Controls.xaml 的引用后，确保添加了这些特定引用）

5.14.1 Default look

以上显示了三种状态-被选择的/激活的选项卡、悬停和非活动状态。
5.14.2 AnimatedTabControl
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedTabControl.xaml" />
运作起来就像有常规的TabControl，除了它对每个选项卡的MetroContentControl 中内容的切换进行动画处理。

5.14.3 AnimatedSingleRowTabControl

<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
AnimatedSingleRowTabControl 的功能与AnimatedTabControl完全相同，除了选项卡只会显示在单独的一行，而不是环绕。而是使用一种（左/右）箭头替换环绕。

5.15 TextBox - MahApps.Metro

在此库中TextBox只有一种样式了，但是它却有特殊的附加属性用于创建‘watermarked’文本框并添加‘clear’按钮。

5.15.1 Watermark

文本框内的水印 -指之前用户已获取到焦点或输入任何文字前，显示在文本框中的文本。这往往是一种替代在文本框旁边的标签 — — 举个例子，一个搜索框会有文本“输入搜索词”以指示它的用途的水印。
<TextBox Controls:TextBoxHelper.Watermark="This is a textbox" />
会产生一个文本框，看起来像下面图像。这三个状态是没有获取焦点（没有用户输入的文本）、获取焦点和没有获取焦点（具有用户输入的文本）。

5.15.2 Clear button

像水印，一个简单的附加属性添加的功能。
<TextBox Controls:TextBoxHelper.ClearTextButton="True" />
这将给您：

5.15.3 Why Attached Properties?

胜过于从 TextBox 派生和向此库添加另一个类，这种行为可以用附加属性实现的。这可以避免花费精力为另一个控件提供样式，在您的应用程序中，这种行为更可取。

5.16 Tile

Tile正如其名。是从Window 8/WinRT 开始菜单模仿的矩形控件。

5.16.1 How to use the Tile

下面的 XAML 将初始化标题设置为”你好！”和其Count 被设置为 1的Tile控件。

<controls:Tile Title="Hello!" 
                    TiltFactor="2"
                    Width="100" Height="100" 
                    Count="1">
</controls:Tile>

5.16.2 In the wild

下面是Tile在运行时的一些截图。

5.17 ToggleButton

5.17.1 Introduction

MahApps.Metro中有可用两种样式的ToggleButtons。
默认样式只是通过在 XAML 中放置一个ToggleButton控件，看起来像默认的 MahApps.Metro 按钮。

<Grid>
      <ToggleButton/>
</Grid>

另一种样式MetroCircleToggleButtonStyle，通过将ToggleButton的样式设置为 MetroCircleToggleButtonStyle进行应用。这种样式是当它被选中时，将按钮的背景变为 AccentColorBrush，。若要修改此行为，必须使用Blend编辑控件模板的副本。

<ToggleButton Width="50"
                Height="50"
                Margin="0, 10, 0, 0"
                Style="{DynamicResource MetroCircleToggleButtonStyle}">
</ToggleButton>

5.17.2 Using Glyphs Within a Circle Toggle Button

要使用的标志符号，必须添加对 Icons.xaml 的引用。

<UserControl.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.Resources;component/Icons.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</UserControl.Resources>

然后，使用以下步骤，包装您想要的图标︰

在ToggleButton中放置 Rectangle
设置它的Fill为你想让图标拥有的颜色
设置 Rectangle.OpacityMask的VisualBrush属性中的Visual值为引用的图标
举个例子：

<ToggleButton Width="50"
              Height="50"
              Margin="0, 10, 0, 0"
              Style="{DynamicResource MetroCircleToggleButtonStyle}">
    <Rectangle Width="20"
               Height="20"
               Fill="{DynamicResource BlackBrush}">
        <Rectangle.OpacityMask>
            <VisualBrush Stretch="Fill"
                         Visual="{DynamicResource appbar_city}"/>
        </Rectangle.OpacityMask>
    </Rectangle>
</ToggleButton>

5.17.3 Syncing Checked State of ToggleButton with Foreground

默认情况下，即使选中ToggleButton，您设置的任何图标将保留您为其设置的颜色。要改变了这一点，默认情况下，它被选中时，你可以绑定你的内容颜色到ToggleButton的更改为白色的前景色属性。
如何做的绑定的示例可在下面找到︰

<ToggleButton Width="50"
              Height="50"
              Margin="0, 10, 0, 0"
              Style="{DynamicResource MetroCircleToggleButtonStyle}">
    <Rectangle Width="20"
               Height="20"
               Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ToggleButton}}}">
        <Rectangle.OpacityMask>
            <VisualBrush Stretch="Fill"
                         Visual="{DynamicResource appbar_city}"/>
        </Rectangle.OpacityMask>
    </Rectangle>
</ToggleButton>

5.18 ToggleSwitch

ToggleSwitch 控件最初出现在 Windows Phone 7，但现已整合到 Windows 8系统。此控件的 MahApps.Metro 版本使用的 Windows Phone 7 编码（移植），而非 Windows 8 的视觉效果。
它的功能和复选框是非常相似的，但在触摸界面上更易于区分和使用。基本上，它可以被认为是一个漂亮的CheckBox︰
<Controls:ToggleSwitch Header="WiFi rest state" />

您可以绑定/设置IsChecked 的两种状态之间进行切换。您可以通过设置设置
<Controls:ToggleSwitch onlabel="Yes" offlabel="No">
来更改开启和关闭标签。

5.19 TransitioningContentControl

取自 Silverlight （具体在这个端口），TransitioningContentControl 可以非常流畅的左右切换内容。在它的核心，TransitioningContentControl 是 ContentControl，所以在同一时间只有一个子元素可以显示。当你更改的内容时，两个内容的切换将会有动画播放。
<Controls:TransitioningContentControl x:Name="transitioning" Width="150" Height="50" Transition="DownTransition" />
这里有几个转换︰
• Default
• Down
• Up
• Right
• Left
• RightReplace
• LeftReplace
• Custom
5.20 Badged Control
在控件上呈现一个标记。
举个例子:

<Controls:Badged Badge="{Binding Path=BadgeValue}">
  <!-- Control to wrap goes here -->
  <Button Content="Notifications" />
</Controls:Badged>

<Controls:Badged Badge="{Binding Path=BadgeValue}" BadgePlacementMode="BottomRight">
  <!-- Control to wrap goes here -->
  <Button>
    <iconPacks:PackIconFontAwesome Kind="CommentOutline"/>
  </Button>
</Controls:Badged>

结果:

Mahapps快速入门

1 快速开始

1.1 Table Of Contents

1.2 安装教程

1.3 设计窗体

1.3.1 使用 MetroWindow 控件

1.3.2 修改 XAML 文件

1.3.3 修改后台代码

1.3.4 使用内置样式

1.3.5 什么是MetroWindow？

1.4 定制

1.4.1 窗口按钮命令

1.4.2 （左 / 右-）窗体命令

1.5 接下来是什么？

2 高级MetroWindow指南

2.1 玩转自己的窗口

2.1.1 无边框窗口行为

3 图标和资源 - MahApps.Metro

3.1 图标和资源

3.2 用法

4 样式

4.1 目录

4.2 概述

4.3 怎么去修改当前的theme

4.3.1 通过App.xaml

4.3.2 通过ThemeManager

4.3.3 与应用程序主页不同的窗体

4.3.4 创建自定义 Accents and Themes

5 Control

5.1 MetroWindow

5.1.1 Default

5.1.2 Windowboders

5.2 Buttons

5.2.1 Default Look

5.2.2 MetroCircleButton

5.2.3 SquareButton

5.2.4 AccentedSquareButton

5.2.5 FlatButton

5.3 ContextMenu

ContextMenu without CompositeCollection

ContextMenu with CompositeCollection

5.4 DataGrid

5.4.1 Getting Started

5.4.2 Alternative Style

5.4.3 DataGrid Numeric Updown Control

5.4.4 DataGrid Checkbox

5.5 Dialogs

5.5.1 Message dialog

5.5.2 Progress dialog

5.6 FlipView

5.6.1 Getting started

5.6.2 The Banner

5.7.1 Themed flyouts

5.7.2 WindowCommandsOverlayBehaviorn

5.8 NumericUpDown

5.8.1 SpeedUp

5.8.2 HasDecimals

5.8.3 InterceptArrowKeys

5.8.4 InterceptMouseWheel

5.8.5 InterceptManualEnter

Minimum / Maximum

HideUpDownButtons

5.8.6 StringFormat

5.8.7 Example

5.9 Custom Styling

5.9.1 Want to hide Up-Down Buttons if control is readonly?

5.10 ProgressBar

5.10.1 MetroProgressBar

5.10.2 ProgressRing

5.11 RangeSlider

5.11.1 Events

5.11.2 Orientation

5.11.3 MoveToPoint

5.11.4 SmallChange/LargeChange

5.11.6 IsSnapToTickEnabled

5.11.7 TickBars and Tickplacement

5.11.8 ExtendedMode

5.11.9 MoveWholeRange

5.11.10 MinRangeWidth

5.11.11 AutoToolTipPlacement and AutotoolTipPrecision