MahApps.Metro——Quick Start

Installation

　　可以通过VS的NuGet 包管理器进行可视化安装，或者使用如下命令在包管理控制台下安装：

　　PM> Install-Package MahApps.Metro

Modifying the XAML file

 　 After installing MahApps.Metro:

• open up MainWindow.xaml
• add this attribute inside the opening Window tag. (It's how you reference other namespaces in XAML):
  

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

  or
  

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

• change <Window ... tag to <Controls:MetroWindow ... (remember to change the closing tag too!)

　　You should have something like this :

<Controls:MetroWindow x:Class="WpfApplication2.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="350" 

                      Width="525">



  <!-- your content here -->



</Controls:MetroWindow>

Modifying the CodeBehind File

　　You'll also need to modify the MainWindow.xaml.cs file so that the base class for MainWindow matches the MetroWindow class of the XAML file. To access MetroWindow, add the following reference first.

// using statements...

using MahApps.Metro.Controls



public partial class MainWindow : MetroWindow

{

  // ...

}

　　But in most cases you can just drop the base class (because this is a partial class the XAML should take care of this):

public partial class MainWindow

{

  // ...

}

Using Built-In Styles

　　All of MahApp.Metro's resources are contained within separate resource dictionaries. In order for most of the controls to adopt the MahApps.Metro theme, you will need to add the following ResourceDictionaries to your App.xaml.

App.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" />

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

Make sure that all file names are Case Sensitive!

　　The end result will look something like this. If you want to know more about how the control works, more information can be found below.

　　　　

What's a MetroWindow?

　　The default MetroWindow is made up of a few components:

　　If you don't like the elements that are labelled, fear not, they're all optional.

• The titlebar is what sets MetroWindow apart from rolling your own. ShowTitleBar="True|False"
• The resize grip is not the only way to resize a MetroWindow - all edges and corners can be gripped, but given a MetroWindow doesn't have a noticeable window "chrome" like an aero window, the resize grip can help reassure users.
• Instead of using static images, the icons for minimize/maximize/close are a font called Marlett. To explain why this is so requires a walk down memory lane, or at least a visit to the Wikipedia article about it.
• You can even hide the icons on the title bar by setting the ShowIconOnTitleBar="True|False"

Customization

WindowButtonCommands

　　WindowButtonCommands are the minimize, maximize/restore, and close buttons. You can hide the buttons with ShowMinButton="True|False",ShowMaxRestoreButton="True|False" and ShowCloseButton="True|False".

The visibility of the minimize and maximize/restore buttons are also effected by the ResizeMode. If ResizeMode="NoResize" the buttons are collapsed. IfResizeMode="CanMinimize" the maximize/restore button is collapsed.

(Left-/Right-) WindowCommands

　　You can add your own controls to LeftWindowsCommands or RightWindowsCommands - by default, buttons have a style automatically applied to them to make them fit in with the rest of the WindowsCommands. As of 0.9, you are no longer limited to just buttons, but any control. Be aware, you're responsible for styling anything other than buttons.

Including this within the <MetroWindow> ... </MetroWindow> tag:

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

Make sure to include the icons to get the cupcake.

　　Produces this window titlebar:

　　The foreground (link) colour of (Left-/Right-) WindowCommands will always be white, unless the titlebar is disabled, in which case it will be the reverse of whatever theme you have selected. For example, using the White/Light theme, the foreground colour will be black.