1262 lines
53 KiB
Markdown
1262 lines
53 KiB
Markdown
|
||
# 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 ... （记得也要更改结束标记！）
|
||
你应该做这些像这样的东西 （不要复制和粘贴这些）︰
|
||
|
||
```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();
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
最终的结果将如下所示︰
|
||
|
||
________________________________________
|
||
|
||
### 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>
|
||
```
|
||
|
||
请确保所有文件的名称都是区分大小写 ！
|
||
最终的结果将如下所示。如果你想要知道更多关于该控件的工作原理，可以在下面发现更多的信息。
|
||
|
||
|
||
### 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>`标记：
|
||
|
||
```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>
|
||
```
|
||
|
||
请确保包含图标以得到蛋糕图标。
|
||
产生这样的窗口标题栏︰
|
||
|
||
除非禁用标题栏，（左 / 右-）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
|
||
|
||
|
||
## 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>
|
||
```
|
||
|
||
|
||
|
||
### 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 的完整示例。
|
||
|
||
|
||
# 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>
|
||
```
|
||
|
||
|
||
|
||
发光的边框
|
||
|
||
```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>
|
||
```
|
||
|
||
|
||
|
||
或者阴影的边框
|
||
|
||
```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>
|
||
```
|
||
|
||
|
||
|
||
## 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︰
|
||
|
||
```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>
|
||
```
|
||
|
||
|
||
|
||
### 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 样式将看起来像这样︰
|
||
|
||
|
||
### 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>
|
||
```
|
||
|
||
最终的结果将如下所示︰
|
||
|
||
|
||
### 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>
|
||
```
|
||
|
||
最终的结果将如下所示︰
|
||
|
||
|
||
## 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 获取的。
|
||
|
||
```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>
|
||
```
|
||
|
||
上面的代码产生以下结果。
|
||
|
||
|
||
### 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
|
||
弹出窗口是拥有自定义内容的窗口覆盖物。
|
||
|
||
将下面的代码添加到您的 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弹出主题窗口和宿主窗口的主题相适应，它看起来像这蓝色的主题︰
|
||
|
||
|
||
### 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?
|
||
|
||
如果你想要隐藏的向上向下按钮，如果该控件是只读,你可以添加下面的样式到您的应用程序。
|
||
|
||
```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。第三个进度条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
|
||
|
||
```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
|
||
|
||
|
||
这是 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
|
||
|
||
```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
|
||
|
||
|
||
以上显示了三种状态-被选择的/激活的选项卡、 悬停和非活动状态。
|
||
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控件。
|
||
|
||
```xaml
|
||
<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 按钮。
|
||
|
||
|
||
```xaml
|
||
<Grid>
|
||
<ToggleButton/>
|
||
</Grid>
|
||
```
|
||
|
||
另一种样式MetroCircleToggleButtonStyle，通过将ToggleButton的样式设置为 MetroCircleToggleButtonStyle进行应用。这种样式是当它被选中时，将按钮的背景变为 AccentColorBrush，。若要修改此行为，必须使用Blend编辑控件模板的副本。
|
||
|
||
```xaml
|
||
<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 的引用。
|
||
|
||
```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" />`
|
||
|
||
您可以绑定/设置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>
|
||
```
|
||
|
||
|
||
|
||
```xaml
|
||
<Controls:Badged Badge="{Binding Path=BadgeValue}" BadgePlacementMode="BottomRight">
|
||
<!-- Control to wrap goes here -->
|
||
<Button>
|
||
<iconPacks:PackIconFontAwesome Kind="CommentOutline"/>
|
||
</Button>
|
||
</Controls:Badged>
|
||
```
|
||
|
||
|
||
|
||
结果:
|
||
|
||
|