Metro UI consists of a set of  purpose-built controls, custom Styles and resources for existing DotNetBar controls and common Microsoft controls, and an automatic color generator. All of which work together to help you develop great looking Metro look and feel user interface for your apps. The set of new Metro controls includes the following:

1. MetroAppWindow – A chromeless window with support for resizing. This is a Window with WindowStyle property fixed to None (this cannot be changed.) Other inherited Window properties are supported and behave the same.  
2. MetroShell – A TabControl for MetroTabItems that also serves as the container for other Metro controls. Usually MetroAppWindow will have a MetroShell as its single Content item.  Provides the glue which holds all other parts together and ensures consistent look and feel. 
3. MetroChrome – Provides chrome for Metro app and is host for the quick access toolbar.
4. MetroStatusBar – Metro styled status bar for your application.
5. QuickAccessToolBar – A quick access toolbar like the one in Ribbon control.  
6. MetroBackstage – Backstage area opens when File button is clicked.
7. MetroToolBar – A toolbar which expands to show extra items.
8. MetroTile – Based on Button with the additional properties Title, ImageSource and TileColor – an enumeration of built-in Brushes. 
9. MetroStartControl – A container for MetroTiles which has the ability to slide in and out of view. 
10. MetroDialog – A chromeless window with MetroChrome and Metro styling.

Building a Metro App

The typical Metro app begins with MetroAppWindow. This provides a chromeless Window with square borders and support for resizing, including a styled ResizeGrip used when ResizeMode = CanResizeWithGrip.

MetroUI.Theme attached property should be set on the window ensuring all Metro styles and resources are available as required.

The single Content element of the window will generally be an instance of MetroShell. MetroShell is based on TabControl, but instead of TabItem, its native container type is MetroTabItem. In addition to providing tab control functionality for the Metro app, MetroShell provides a convenient way to add the different Metro controls to the UI and for ensuring that they are properly positioned and function together.

Use the following MetroShell properties for adding Metro parts to your app (Note: all of these properties are defined as type Object, even though specific types are provided – though not absolutely required. The reason for this is so they work well in an MVVM environment):

• Backstage – This is the object which will be displayed when the end user clicks on the File button (or when MetroShell.IsBackstageOpen is set true.) Generally, it will be an instance of MetroBackstage.
• Chrome – This is the top most object. It should be a MetroChrome. 
• StatusBar – This is the bottom most object. Generally a MetroStatusBar.
• Start – A place holder for MetroStartControl which can be added to give your app a Metro style staging area.

The quick access toolbar – QuickAccessToolBar – is added to the UI via a property of MetroChrome of the same name. Elements added to the QAT at design time are included in the customize menu. Note the use of attached property QuickAccessToolBar.DisplayName to give these elements display text for the customize menu.

Here is a very basic example of a Metro app based on the above:

<m:MetroAppWindow x:Class="MetroSample.MainWindow"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:m="clr-namespace:DevComponents.WPF.Metro;assembly=DevComponents.WPF.Metro"
	Title="DOTNETBAR METRO SAMPLE"
	Height="600" Width="825"
	ResizeMode="CanResizeWithGrip"
	Icon="AppIcon.ico"
	m:MetroUI.Theme="{x:Static m:MetroTheme.Default}">
    <m:MetroShell>
        <m:MetroShell.Chrome>            
            <m:MetroChrome>
                <m:MetroChrome.QuickAccessToolBar>
                    <m:QuickAccessToolBar>
                        <Button m:QuickAccessToolBar.DisplayName="Open">
                            <Image Source="/Images/Open.png" />
                        </Button>
                        <Button m:QuickAccessToolBar.DisplayName="Save">
                            <Image Source="/Images/Save.png" />
                        </Button>
                    </m:QuickAccessToolBar>
                </m:MetroChrome.QuickAccessToolBar>
            </m:MetroChrome>
        </m:MetroShell.Chrome>
        <m:MetroShell.Backstage>
            <m:MetroBackstage CloseOnClick="True">
                <m:BackstageButton ImageSource="/Images/Save.png" Content="Save" />
                <m:BackstageTabItem Header="Print">
                    <Grid>
                        <TextBlock Text="Print" FontSize="30" VerticalAlignment="Center" HorizontalAlignment="Center" />
                    </Grid>
                </m:BackstageTabItem>
            </m:MetroBackstage>
        </m:MetroShell.Backstage>
        <m:MetroShell.StatusBar>
            <m:MetroStatusBar>
                <TextBlock Text="CONNECTED TO SERVER - ALL DATA IS UP TO DATE" HorizontalAlignment="Left" TextTrimming="CharacterEllipsis" />
                <TextBlock Text="READY" Margin="10,0,0,0" HorizontalAlignment="Right" />
            </m:MetroStatusBar>
        </m:MetroShell.StatusBar>
        <m:MetroShell.Items>
            <m:MetroTabItem Header="MAIL" IsSelected="True">
                <Grid>
                    <TextBlock Text="MAIL CONTENT AREA" HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Grid>
            </m:MetroTabItem>
            <m:MetroTabItem Header="CALENDAR">
                <Grid>
                    <TextBlock Text="CALENDAR CONTENT AREA" HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Grid>
            </m:MetroTabItem>
            <m:MetroTabItem Header="CONTACTS">
                <Grid>
                    <TextBlock Text="CONTACTS CONTENT AREA" HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Grid>
            </m:MetroTabItem>
        </m:MetroShell.Items>
    </m:MetroShell>
</m:MetroAppWindow>

And here is a screen shot of the above example when executed:

The central content area of MetroShell is where the content of the selected tab is positioned. Anything you require for your application can be placed inside a MetroTabItem. Any control from the list in the Metro Styles section above will be automatically given the Metro look and feel (that is, unless you override the built-in Styling with styles of your own.)

Metro Look & Feel

Metro Colors

All colors used by Metro UI are automatically generated from two seed colors. The seed colors are referred to as the Canvas color and the Base color.

Colors for Metro theme are created and defined by the class MetroColors, which is based on ResourceDictionary. Colors are created and stored as resources and are also exposed as instance properties. A set of ComponentResourceKeys are defined which are used for for accessing the colors from Xaml. A corresponding set of Brushes, in addition to the color resources, is also provided.

Color generation is performed by calling method MetroColors.GenerateColors, which takes two Color parameters as input – one for canvas color and one for base color.

Since MetroColors is  a ResourceDictionary, its colors and brushes can be made available to elements within a visual tree by simply being merged with the resources of the top element. We use a behavior to accomplish this. The behavior is implemented as an attached dependency property named Theme on the static class MetroUI. MetroUI.Theme is a property of type MetroTheme.

Following is a list of the names of the Color properties defined by MetroColors. Corresponding component resource keys have the same names with ‘Key’ appended to them. Component resource keys for the corresponding Brushes are similarly named but the word ‘Brush’ is used in place of the word ‘Color’.

• CanvasColor (CanvasColorKey, CanvasBrushKey)
• TextColor
• TextInactiveColor
• TextDisabledColor
• CanvasDarkColor
• CanvasLightColor
• BaseColor
• BaseTextColor
• BaseLightColor
• BaseLightTextColor
• BaseDarkColor
• BaseDarkerColor
• ComplementColor
• ComplementLightColor
• ComplementDarkColor
• ComplementDarkerColor
• ComplementTextColor
• ComplementLightTextColor
• CanvasGradientStartColor
• CanvasGradientEndColor

Metro Theme

MetroTheme is a wrapper class for canvas and base color, with an additional property for display name. It also exposes a set of static, self-typed, properties which are used as “built-in” themes. Setting up your application to use the Metro theme is simply a matter of setting a value for MetroUI.Theme on the root element (usually the Window itself.) Note: if your application has multiple windows you can set different color themes for each.

m:MetroUI.Theme="{x:Static m:MetroTheme.Rust}"

You can use the Metro colors and brushes in your application, when needed, by using a DynamicResource. In this example, the Background of the border is being set to the Brush identified by the static property MetroColors.CanvasBrushKey:

<Border Background="{DynamicResource {x:Static m:MetroColors.CanvasBrushKey}}" />

Here is the list of of the pre-defined themes available as static members of class MetroTheme:

• Default
• BlackClouds
• BlackLilac
• BlackMaroon
• BlackSky
• BluishBrown
• Bordeaux
• Brown
• Cherry
• DarkBrown
• DarkRed
• EarlyMaroon
• EarlyOrange
• EarlyRed
• Espresso
• GrayOrange
• Latte
• LatteDarkSteel
• LatteRed
• MaroonSilver
• NapaRed
• Orange
• PowderRed
• RetroBlue
• Rust
• SliverBlues
• SilverGreen
• SimplyBlue
• SkyGreen
• WashedBlue
• WashedWhite

Metro Styles

Of course all controls in the Metro library are by default styled to match the Metro UI look and feel. But these don’t help with all the other controls you will need when building your app. To make it easy to keep the Metro UI consistent throughout your application we have defined a set of custom Styles (or resources used by the default styles) for many of the common controls from DotNetBar as well as from Microsoft. Implicit Styles for these controls are merged into the resources with MetroColors the first time MetroUI.Theme is set.

Custom styles are defined for the following Microsoft controls:

• Button
• ToggleButton
• RadioButton
• CheckBox
• MenuItem
• ContextMenu
• ToolTip
• TextBox
• ComboBoxItem
• ComboBox
• ListBoxItem
• ListBox
• ScrollBar
• ScrollViewer

Metro styling is also provided for the following DotNetBar controls (other than the purpose built Metro controls):

• AdvTree
• AdvTreeNode
• AdvTreeCell
• PropertyGrid
• PropertyGridItem
• DropDownButton
• EnumPicker
• ColorControl
• BrushControl

Localization

This section describes how to change the strings displayed by Metro controls.

Strings associated with the window commands Minimize, Maximize, Close, Restore, Size and Move can be set directly in code via properties on the static WindowCommands.Strings (in DevComponents.WPF.Controls). Additionally, the strings can be defined as resources in your window’s resource dictionary. The following component resource keys are mapped appropriately.

• WindowCommands.CloseStringKey
• WindowCommands.MaximizeStringKey
• WindowCommands.MinimizeStringKey
• WindowCommands.MoveStringKey
• WindowCommands.RestoreStringKey
• WindowCommands.SizeStringKey

All other strings which are used in Metro UI are defined the class MetroStrings (in DevComponents.WPF.Metro). They can be accessed directly in code via the static instance MetroStrings.Default. In addition to being settable via properties of MetroStrings, these strings can also be defined as resources in your window’s resource dictionary.

The string properties defined by MetroStrings are:

• CustomizeQATMenuHeaderString
• AddToQATCommandString
• RemoveFromQATCommandString
• CustomizeQATCommandString

The corresponding component resource keys are:

• MetroStrings.CustomizeQATMenuHeaderStringKey
• MetroStrings.AddToQATCommandString
• MetroStrings.RemoveFromQATCommandString
• MetroStrings.CustomizeQATCommandString

Here is an example of defining a string in a resource dictionary:

<sys:String x:Key="{x:Static ctrls:WindowCommands.CloseStringKey}">Custom Close String</sys:String>

Note that the namespace sys is defined like this:  xmlns:sys="clr-namespace:System;assembly=mscorlib"

Metro Controls

This section will look at the individual Metro controls in greater detail.

MetroAppWindow

MetroAppWindow is based on ChromelessWindow – which is defined in the DevComponents.WPF.Controls library. ChromelessWindow is based on System.Windows.Controls.Window and inherits all of that object’s functionality except for the WindowStyle property, which has been fixed to the value None and cannot be changed. Here is a screen shot of an empty MetroAppWindow:

Properties

Properties defined by MetroAppWindow (either directly or via ChromelessWindow) include:

• HasDropShadow – Determines whether the drop shadow will be drawn around the Window.
• ResizeBorderThickness – Specifies the thickness of the Border for which resizing is enabled. Does not affect the window’s visual border. The visual border is specified by the standard BorderThickness property, in conjunction with the BorderBrush property.

Events

And the events are:

• ResizeBorderClickEvent – Routed event that is raised when the resize border receives a mouse click.

MetroShell

MetroShell is based on TabControl and inherits all of its properties, methods and events.

Properties

The following additional properties are defined by MetroShell:

• Backstage – This is the object which will be displayed when the end user clicks on the File button (or when MetroShell.IsBackstageOpen is set true.) Generally, it will be an instance of MetroBackstage.
• BackstageButtonContent – Defines the content rendered inside the backstage button (i.e. the File button.)
• Chrome – This is the top most object. It should normally be a MetroChrome.
• IsBackstageOpen – Determines whether the backstage object is visible.
• ShowBackstageButton – Determines whether the backstage button is visible.
• ShowStatusBar – Determines whether the status bar is visible.
• Start – This object is rendered on top of the main application area. It is a place holder for a MetroStartControl.
• StatusBar – This is the bottom most object. Generally a MetroStatusBar.

Events

MetroShell exposes the following events:

• BackstageOpened – Routed event that is raised when the value of IsBackstageOpened changes from false to true.
• BackstageClosed – Routed event raised when the value of IsBackstageOpened changes from true to false.

Methods

The following methods are defined by MetroShell:

• OnBackstageOpened (protected).
• OnBackstageClosed (protected).

MetroChrome

MetroChrome is an ItemsControl. Custom elements are added to its Items collection and by default displayed to the left of the minimize button. Window icon and title are taken from the containing Window. Minimize, Maximize and Close buttons are enabled or hidden based on the Window’s WindowState and ResizeMode properties, in the same manner as the standard Window chrome. The system menu is likewise shown the same as the system menu of the standard Window. System menu can be disabled by setting ShowSystemMenu = false. Here is an image of MetroChrome with QAT and custom items included:

Properties

The following properties are defined by MetroChrome:

• QuickAccessToolBar – An Object which serves as the quick access toolbar for the application. This should be a QuickAccessToolBar.
• ShowSystemMenu – Determines whether the system menu is shown when user right-clicks over the title area or left-clicks on the app icon.

MetroChrome does not define any public or protected methods.

QuickAccessToolBar

QuickAccesssToolBar is based on System.Windows.Controls.ToolBar. Anything added to its Items collection will be visible in the toolbar. An overflow panel with overflow button is included in the default style.

Items added to the QAT at design time (or at runtime before its template is applied) will appear in the customize menu, which allows the user to select/deselect which items are visible in the UI. Items added to the customize menu need a display name, which you provide using the attached property QuickAccessToolBar.DisplayName. Here is a picture of the QAT with the Customize menu open:

Elements in the app UI which implement ISupportQuickAccessToolBar can be added to QAT by the user at run-time. Currently there are three controls built-in which implement ISupportQuickAccessToolBar: MetroButton, MetroToggleButton and MetroComboBox. The default context menu for each of these has the option “Add to Quick Access ToolBar”. Note: elements which can be added to the QAT at runtime by user need a unique identifier. You can use the element’s Name property for this or the attached property QuickAccessToolBar.Id.

All items that are visible in the QAT are given context menu which has option “Remove from Quick Access ToolBar”. However, if you explicitly set a ContextMenu on an element that you place into the QAT, that context menu will not be replaced.

The current state of the QAT is stored in a string available via the dependency property SerializationString. You can this to restore the QAT to its last state when your app is starts up.

Properties

The following dependency properties (in addition to inherited properties) are defined by QuickAccessToolBar:

• IsCustomizeMenuOpen – Determines whether the customize menu is open.
• IsLocked – When locked, items cannot be added or removed from the QAT.
• SerializationString – Stores current state of QAT and can be used to reset UI when your app starts up.
• ShowCustomizeButton – Determines whether the customize button is visible.

QuickAccessToolBar also defines the following attached dependency properties:

• CanAddToQuickAccessToolBar – Applies to elements which implement ISupportQuickAccessToolBar only. Provides a means of disabling the element for the QAT. Default value is true.
• DisplayName – Used by the customize menu for user-friendly identification of elements.
• Id – Used as unique identifier for elements which implement ISupportQuickAccessTooolBar.

Methods

The following public methods are defined by QuickAccessToolBar:

• Add(ISupportQuickAccessToolBar item) – Clones the item and adds the clone to the QAT’s visible items collection.
• Contains(ISupportQuickAccessToolBar) – Determines whether the item is in the QAT.
• Contains(string) – Determines whether an item with given ID is in the QAT.
• Remove(object) – Removes the object from the QAT.

MetroToolBar

MetroToolBar is an enhanced ToolBar developed especially for Metro UI. It it meant to be placed anywhere in your application that makes sense for you to do so.

What makes MetroToolBar different from a standard tool bar is that it has an expanded state. In addition to the Items and ItemsSource properties, MetroToolBar exposes properties ExtraItems and ExtraItemsSource. The tool bar expands to show the extra items. When it expands, it does so over the top of existing content, rather than displacing and causing the content to be moved. The tool bar can be expanded programmatically or by user input – there is a button for this purpose. Like a ComboBox, It will collapse automatically when the user clicks on a button within it or clicks anywhere outside of it. Here is an image of MetroToolBar in its expanded state:

MetroToolBar is a good place to put controls which you want to be QAT enabled. These include any control which implements ISupportQuickAccessToolBar. Current Metro controls which implement this interface are MetroButton, MetroToggleButton and MetroComboBox.

Properties

In addition to the inherited properties, MetroToolBar defines the following properties:

• AutoCollapse – Determines whether the toolbar collapses automatically. The default value is true.
• ExpandDirection – Specifies the direction that the toolbar will expand. Possible values are Up, Down and Auto. Default is Auto.
• ExtraItemsSource – This value is passed on to the internal ItemsControl which contains the Extra Items.
• IsExpanded – Determines whether the tool bar is expanded.

Events

MetroToolBar defines the following events:

• Expanded – Raised when the value of IsExpanded changes to true.
• Collapsed – Raised when the value of IsExpanded changes to false.

MetroStatusBar

MetroStatusBar is based on ItemsControl and inherits all its properties, events and methods. It differs from ItemsControl in that its default panel is MetroStatusBarPanel.

MetroStatusBarPanel is based on Grid. Using a Grid for the panel allows great control as to where elements are positioned within it. The number of columns is synchronized with the number of items in parent status bar. Column widths are set depending on horizontal alignment of the element it contains: Auto for left aligned, Star for center aligned, Star for the first right aligned and Auto after that, and Star for elements which are aligned Stretch.

MetroStatusBar does not define any properties, methods or events other than what it inherits.

MetroBackstage

MetroBackstage is based on TabControl. The native container type is BackstageTabItem, It will, however, accept any UIElement. In general, you will use a combination of BackstageTabItem and BackstageButton to achieve styling consistent with the Metro UI. Here is an image of MetroBackstage with several BackkstageTabItems and BackstageButtons:

MetroBackstage defines a single property: CloseOnClick. When true, the backstage will close automatically when a click or mouse left button up event occurs within it.

MetroTile

MetroTile is a Button with extra properties and a default template designed to help you maintain a consistent look and feel. Use properties Content, ImageSource, Title and TileColor to complete the presentation of the tile.

Properties

MetroTile defines these properties (in addition to the inherited properties):

• ImageSource – Specifies the source (ImageSource) for the image which is displayed by the tile.
• TileColor – An enumeration specifying one from a set of built-in brushes which is made the tile’s background. Alternatively you can set Background yourself.
• Title – Specifies the tile’s title text.

MetroStartControl

MetroStartControl is designed to emulate the Metro start screen in Windows 8. 

MetroStartControl is a PageSlider. The native container type is MetroStartPage.

The way to add MetroStartControl to your Metro UI is via the Start property of MetroShell. The start control is rendered on top of the main application UI (i.e. MetroShell) and slides out of view when the end user wants to access main app. Programmatically, this is controlled via the property IsDocked. A value of true makes the control slide out of view. Changing from true to false causes it to slide back into the view. By default, when the user clicks on a region not occupied by a MetroTile the control will slide out of view (IsDocked will be set to true.) This can be changed by setting DockOnClick = false.

By default, when the control’s contents are docked – i.e. rendered outside the control’s visible boundaries – a Thumb is displayed on the boundary edge which the user can use to drag the contents back into view. Clicking on the thumb also will set IsDocked = false. The thumb can be hidden by setting ShowDragThumb = false.

Here is an image of MetroStartControl that is being dragged back into visible state by the user:

Another feature of MetroStartControl is its embedded TransitioningSelector control. TransitioningSelector (in DevComponents.WPF.Controls) is a MultiSelector which works much like a TabControl in that its items are selectable and when an item is selected its content is rendered in the main content area. What TransitioningSelector adds is animation. For example, if the SlidingAnimator is used, when selected an item’s content slides into view and when unselected slides out of view. When used in MetroStartControl this enables modal views (i.e. any UI element) to be presented to the user in response to commands from any part of the application. You can add items to the embedded transitioning selector by binding a list to property TransitioningSelectorItemsSource or adding items directly to TransitioningSelectorItems. The latter can be done in Xaml.

Here is an example of a MetroStartControl being set as value of property MetroShell.Start:

<m:MetroShell.Start>
    <m:MetroStartControl Name="StartControl">
        <m:MetroStartControl.TransitioningSelectorItems>
            <ctrls:TransitioningSelectorItem Name="OptionsForm" Background="Red">
                <Grid Background="{Binding RelativeSource={RelativeSource AncestorType=m:MetroAppWindow}, Path=Background}">
                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="OPTIONS HERE" />
                    <Button Content="Ok" Width="80" Height="30" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="30" FontSize="16" FontWeight="Bold" Click="OptionsFormOkButton_Click" />
                </Grid>
            </ctrls:TransitioningSelectorItem>
        </m:MetroStartControl.TransitioningSelectorItems>
        <m:MetroStartControl.Items>
            <m:MetroTile Title="Options" ImageSource="/Images/Options.png" TileColor="Blueish" Content="Select options for the app." Click="ShowOptionTile_Click"/>
            <m:MetroTile Title="Main App" ImageSource="/Images/ShowApp.png" TileColor="Green" Content="Go to the main application." Click="ShowAppTile_Click"/>
        </m:MetroStartControl.Items>
    </m:MetroStartControl>
</m:MetroShell.Start>

Properties

MetroStartControl defines the following properties:

• AnimationDuration – The duration of the slide animation when docking or undocking.
• DockingSide – Determines the side to which the control content will go when it slides out of view (i.e. when docked.)
• DockOnClick – Determines whether the the StartControl docks itself when clicked on outside of a MetroTile.
• IsDocked – Determines whether the control is in the docked state. In the docked state the control’s contents are outside the control’s visual boundaries. Changing this value triggers the sliding animation to start.
• ImageSource – Image part of the current user identity.
• FirstName – First name of the current user identity.
• LastName – Last name of the current user identity.
• ShowDragThumb – When true, a Thumb is made available at the control’s dock edge with which the user can drag the content out of the docked state and into visible state.
• Title – The StartControl’s title.
• TransitioningSelectorItems – Gets a reference to a list which is used as ItemsSource for the embedded TransitioningSelector. (Not a dependency property.)
• TransitioningSelectorItemsSource – An enumerable which is set as ItemsSource of the embedded TransitioningSelector.
• TransitioningSelectorItemContainerStyle – A Style which is set as value for ItemContainerStyle property of the embedded TransitioningSelector.

Events

MetroStartControl defines these events:

• Docked – Routed event raised when the value of IsDocked changes to true.
• Undocked – Routed event raised when the value of IsDocked changes to false.

MetroDialog

MetroDialog is a chromeless window similar to MetroAppWindow, but with default MetroChrome and a stylized border. You can base your own dialogs on MetroDialog for convenience.

If a window is set as MetroDialog’s Owner, and if that window has a value for the MetroUI.Theme attached property, then that theme is automatically used by the dialog. Otherwise, if you do not set a theme yourself, the default theme will be used (i.e. MetroTheme.Default)

MetroDialog exports a single property, Chrome, which is given an appropriate default MetroChrome if left unset.