# 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](attachments/2022-05-09-12-22-56.png)
如果你想要使用的 MahApps.Metro （这些有最新的代码和最新功能） 的预发行版软件包，您需要启用在 GUI 中包括预发布版︰
或使用程序包管理器控制台︰
`PM> Install-Package MahApps.Metro -Pre`

## 1.3 设计窗体

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

### 1.3.1 使用 MetroWindow 控件

 ![MetroWindow](attachments/2022-05-09-12-26-13.png)

### 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 ... （记得也要更改结束标记！）
你应该做这些像这样的东西 （不要复制和粘贴这些）︰

```xaml
<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，添加下面的引用

```csharp
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();
    }
  }
}
```

最终的结果将如下所示︰
 ![MetroWindow](attachments/2022-05-09-12-26-34.png)
________________________________________

### 1.3.4 使用内置样式

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

```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>
```

请确保所有文件的名称都是区分大小写 ！
最终的结果将如下所示。如果你想要知道更多关于该控件的工作原理，可以在下面发现更多的信息。
 ![MetroWindow](attachments/2022-05-09-12-26-45.png)

### 1.3.5 什么是MetroWindow？

默认 MetroWindow 由几个部分组成︰
 ![MetroWindow](attachments/2022-05-09-12-27-21.png)
如果你不喜欢被贴上标签的元素，不用担心，他们全都是可选。
• 除了你自己，标题栏是设置 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>`标记：

```xaml
<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>
```

请确保包含图标以得到蛋糕图标。
产生这样的窗口标题栏︰
 ![Title](attachments/2022-05-09-12-27-37.png)
除非禁用标题栏，（左 / 右-）WindowCommands 的前景 （链接） 颜色永远是白色，在这种情况下它将是您选择的任何主题的反向。例如，使用白光/主题，前景颜色将为黑色

## 1.5 接下来是什么？

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

# 2 高级MetroWindow指南

## 2.1 玩转自己的窗口

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

### 2.1.1 无边框窗口行为

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

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

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

```xaml
<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
 ![Resources](attachments/2022-05-09-12-28-38.png)

## 3.2 用法

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

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

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

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

```xaml
<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。

```xaml
<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>
```

 ![Resources](attachments/2022-05-09-12-29-01.png)

### 4.3.2 通过ThemeManager

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

```csharp
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。

```xaml
<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来实现，像这样：

```csharp
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.

```xaml
<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 添加它：

```csharp
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 的完整示例。
 ![ThemeManager](attachments/%E5%9B%BE%E7%89%871.gif)

# 5 Control

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

## 5.1 MetroWindow

### 5.1.1 Default

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

### 5.1.2 Windowboders

MetroWindow 可以拥有边框：

```xaml
<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>
```

![MetroWindow](attachments/2022-05-09-12-31-49.png)

发光的边框

```xaml
<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>
```

![MetroWindow](attachments/2022-05-09-12-31-58.png)

或者阴影的边框

```xaml
<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>
```

![MetroWindow](attachments/2022-05-09-12-32-07.png)

## 5.2 Buttons

### 5.2.1 Default Look

这只是替换标准的按钮放在库中时，没有什么幻想来激活它。
 ![Default](attachments/2022-05-09-12-32-15.png)

### 5.2.2 MetroCircleButton

“Standard” 圆形按钮, 图标设计。
将以下内容添加到按钮以应用此样式： Style="{DynamicResource MetroCircleButtonStyle}"
 ![MetroCircleButton](attachments/2022-05-09-12-32-20.png)

### 5.2.3 SquareButton

另一个 WP7 风格的按钮，这次为文本（非图标）。像这里所有的按钮，有正常，被单击，并悬停的状态。
 ![SquareButton](attachments/2022-05-09-12-32-25.png)
若要应用该样式的按钮，需添加以下内容︰ Style="{DynamicResource SquareButtonStyle}"

### 5.2.4 AccentedSquareButton

稍加修饰拥有当前皮肤颜色作为背景色的方形按钮版本。
 ![AccentedSquareButton](attachments/2022-05-09-12-32-33.png)
若要应用该样式的按钮添加以下内容︰ Style="{StaticResource AccentedSquareButtonStyle}"

### 5.2.5 FlatButton

当你制作一个电话上 Windows Phone-可以发现所有控件 （挂断，键盘等），此类按钮是 ‘flat buttons’。
 ![FlatButton](attachments/2022-05-09-12-32-39.png)
平面按钮存放在
`<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/FlatButton.xaml" />`
你需要放入资源字典，并使用它。

## 5.3 ContextMenu

# ContextMenu without CompositeCollection

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

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

# ContextMenu with CompositeCollection

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

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

```xaml
<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样式的一个已知的问题和解决方法：

```xaml
<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 将按照上面的样式显示。

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

![DataGrid](attachments/2022-05-09-12-33-35.png)

### 5.4.2 Alternative Style

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

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

AzureDataGrid 样式将看起来像这样︰
![AzureDataGrid](attachments/2022-05-09-12-33-45.png)

### 5.4.3 DataGrid Numeric Updown Control

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

```xaml
<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>
```

最终的结果将如下所示︰
 ![DataGrid](attachments/2022-05-09-12-33-54.png)

### 5.4.4 DataGrid Checkbox

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

```xaml
<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>
```

最终的结果将如下所示︰
 ![DataGrid](attachments/2022-05-09-12-34-03.png)

## 5.5 Dialogs

由于内置的 WPF 对话框是 unstyleable，我们不得不创建我们自己的样式。你会发现我们的对话框在 MahApps.Metro.Controls.Dialogs 命名空间中。
 ![Dialogs](attachments/2022-05-09-12-34-14.png)
在 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 对象，，使用它来设置当前的进度。以下是演示有进度对话框的图片︰
 ![Progress dialog](attachments/2022-05-09-12-34-39.png)

## 5.6 FlipView

FlipView 作为Metro应用程序消息横幅。它的灵感来自 Windows 8/WinRT 的同名控件（见下面的图片）。然而，我们的是从地面向上写入，支撑着 MahApps.Metro 的基础。
 ![FlipView](attachments/2022-05-09-12-34-46.png)

### 5.6.1 Getting started

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

```xaml
<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>
```

上面的代码产生以下结果。
 ![FlipView](attachments/2022-05-09-12-34-57.png)

### 5.6.2 The Banner

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

```csharp
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
弹出窗口是拥有自定义内容的窗口覆盖物。
 ![Flyouts](attachments/2022-05-09-12-35-10.png)
将下面的代码添加到您的 MetroWindow:

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

这是弹出窗口的容器。在此容器内添加以下内容︰
<Controls:Flyout Header="Flyout" Position="Right" Width="200">
    <!-- Your custom content here -->
</Controls:Flyout>
这将创建一个具有页眉的、从窗口右侧滑出、宽度为 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弹出主题窗口和宿主窗口的主题相适应，它看起来像这蓝色的主题︰
 ![Flyouts](attachments/2022-05-09-12-35-22.png)

### 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](attachments/2022-05-09-12-35-38.png)

WindowCommandsOverlayBehavior.Never
 ![WindowCommandsOverlayBehavior](attachments/2022-05-09-12-35-49.png)

## 5.8 NumericUpDown

NumericUpDown控件是用来增加或减少数值大小。
 ![NumericUpDown](attachments/2022-05-09-12-36-07.png)
如果您按下 + 按钮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](attachments/2022-05-09-12-36-30.png)
• HideUpDownButtons = true:  
![HideUpDownButtons](attachments/2022-05-09-12-36-36.png)

### 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?

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

```xaml
<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](attachments/2022-05-09-12-36-44.png)
最上面的两个进度条是不同进度状态的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}"/>`
  ![ProgressRing](attachments/%E5%9B%BE%E7%89%872.gif)

## 5.11 RangeSlider

 ![RangeSlider](attachments/2022-05-09-12-37-39.png)
采取从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

```xaml
<С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

 ![style](attachments/2022-05-09-12-38-32.png)
这是 Slider的基本样式。如果你不使用自定义样式，将自动应用默认样式。如果你想让你自定义的样式基于该样式，您需要添加BasedOn="{StaticResource MetroSlider}"

### 5.12.2 FlatSlider style

 ![FlatSlider](attachments/2022-05-09-12-38-37.png)
若要使用该样式需要加载资源字典
 `<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/FlatSlider.xaml" />`
 以及明确的设置Slider的样式为Style="{DynamicResource FlatSlider}"
这种样式可以动态地更改为︰
 ![FlatSlider](attachments/2022-05-09-12-38-43.png)
为此，你只需要更改 TickPlacement 属性从无为其他属性值。

## 5.13 SplitButton and DropDownButton

### 5.13.1 SplitButton

 ![SplitButton](attachments/2022-05-09-12-39-03.png)
此控件是具有下拉列表的按钮，但选定的项更改时，按钮内容会随之改变。

### 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" />
结果会是这样:
  ![SplitButton](attachments/2022-05-09-12-39-24.png)

### 5.13.9 DropDownButton

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

### 5.13.10 Example

```xaml
<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

 ![Default](attachments/2022-05-09-12-39-46.png)
以上显示了三种状态-被选择的/激活的选项卡、 悬停和非活动状态。
5.14.2 AnimatedTabControl
`<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedTabControl.xaml" />`
运作起来就像有常规的TabControl，除了它对每个选项卡的MetroContentControl 中内容的切换进行动画处理。
 ![AnimatedTabControl](attachments/%E5%9B%BE%E7%89%873.gif)

### 5.14.3 AnimatedSingleRowTabControl

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

## 5.15 TextBox - MahApps.Metro

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

### 5.15.1 Watermark

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

### 5.15.2 Clear button

像水印，一个简单的附加属性添加的功能。
`<TextBox Controls:TextBoxHelper.ClearTextButton="True" />`
这将给您：
 ![Clear button](attachments/2022-05-09-12-42-28.png)

### 5.15.3 Why Attached Properties?

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

## 5.16 Tile

Tile正如其名。是从Window 8/WinRT 开始菜单模仿的矩形控件。
 ![Tile](attachments/2022-05-09-12-43-23.png)

### 5.16.1 How to use the Tile

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

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

### 5.16.2 In the wild

下面是Tile在运行时的一些截图。
 ![Tile](attachments/2022-05-09-12-43-31.png)

## 5.17 ToggleButton

### 5.17.1 Introduction

MahApps.Metro中有可用两种样式的ToggleButtons。
默认样式只是通过在 XAML 中放置一个ToggleButton控件，看起来像默认的 MahApps.Metro 按钮。
 ![ToggleButton](attachments/2022-05-09-12-43-40.png)

```xaml
<Grid>
      <ToggleButton/>
</Grid>
```

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

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

 ![ToggleButton](attachments/2022-05-09-12-43-45.png)

### 5.17.2 Using Glyphs Within a Circle Toggle Button

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

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

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

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

```xaml
<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的更改为白色的前景色属性。
如何做的绑定的示例可在下面找到︰

```xaml
<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" />`
 ![ToggleSwitch](attachments/2022-05-09-12-46-39.png)
您可以绑定/设置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
在控件上呈现一个标记。
举个例子:

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

![TransitioningContentControl](attachments/2022-05-09-12-46-53.png)

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

![TransitioningContentControl](attachments/2022-05-09-12-47-00.png)

结果:
  
![TransitioningContentControl](attachments/2022-05-09-12-47-05.png)