swdev:dotnet:mahapps_metro [Audina Documentation]

MahApps Metro

NuGet Components

MahApps.Metro
MahApps.Metro.Resources
Microsoft.Bcl.Async (support forasync/await).

Microsoft.Bcl.Async Requirements

Install Microsoft .NET Framework 4 KB2468871 patch (http://support.microsoft.com/kb/2468871)

Include binding redirects for platform assemblies. Add an app.config file to the project with the following contents, replacing [version] with the referenced assembly version (for example, 1.6.8.0) of System.Runtime and System.Threading.Tasks:

app.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="System.Runtime" publicKeyToken="b03f5f7f11d50a3a" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-[version]" newVersion="[version]" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="System.Threading.Tasks" publicKeyToken="b03f5f7f11d50a3a" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-[version]" newVersion="[version]" />
      </dependentAssembly>
    </assemblyBinding>
  </runtime>
</configuration>

See:

Basic Window

winMain.xaml

<metro:MetroWindow x:Class="myApp.winMain"
        ...
        xmlns:metro="http://metro.mahapps.com/winfx/xaml/controls"
        EnableDWMDropShadow="True"
        ResizeMode="CanResizeWithGrip"
        WindowTransitionsEnabled="False"
        WindowStartupLocation="CenterScreen">
    <metro:MetroWindow.Flyouts>
        <metro:FlyoutsControl>
 
        </metro:FlyoutsControl>
    </metro:MetroWindow.Flyouts>
 
    <metro:MetroWindow.RightWindowCommands>
        <metro: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>
        </metro:WindowCommands>
    </metro:MetroWindow.RightWindowCommands>
    <Grid>
        <StackPanel>
            <TextBlock>App</TextBlock>
            <Button Width="200" Height="30" Margin="2">Default Button</Button>
            ...
 
        </StackPanel>
        <metro:Flyout Name="flyoutTest" Header="Flyout" Position="Right" Width="200" Theme="Adapt">
            <!-- Your custom content here -->
            <StackPanel>
                <TextBlock>Flyout Panel</TextBlock>
                <Button Width="200">Test</Button>
            </StackPanel>
        </metro:Flyout>
 
    </Grid>
 
    </metro:MetroWindow>

winMain.cs

...
using MahApps.Metro.Controls;
using MahApps.Metro.Controls.Dialogs;
 
 
namespace quikFIT
{
    public partial class winMain : MetroWindow
    {
        public winMain()
        {
            InitializeComponent();
        }
 
        // Requires async/await support (use NuGet package Microsoft.Bcl.Async)
        // NOTE: Microsoft.Bcl.Async requirements:
        // * Install Microsoft .NET Framework 4 KB2468871 patch (http://support.microsoft.com/kb/2468871).
        // * Include binding redirects for platform assemblies.  
        //   Add an ''app.config'' file to the project with the contents of Issue 2 Resolution
        //   (http://blogs.msdn.com/b/bclteam/p/asynctargetingpackkb.aspx), 
        //   replacing ''[version]'' with the referenced assembly version 
        //   (for example, 1.6.8.0) of ''System.Runtime'' and ''System.Threading.Tasks''
        private async void btnHello_Click(object sender, RoutedEventArgs e)
        {
            await this.ShowMessageAsync("Message", "Hello World!");
            MessageBox.Show("Oh, hello to you, too!");  // this should only show after dismissing previous message
        }
 
        private void btnOpenFlyout_Click(object sender, RoutedEventArgs e)
        {
            flyoutTest.IsOpen = !flyoutTest.IsOpen;
        }
    }
}

App.xaml

<Application x:Class="myApp.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="winMain.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" />
                <!-- Pick theme color: -->
                <!-- "Red", "Green", "Blue", "Purple", "Orange", "Lime", "Emerald",  -->
                <!-- "Teal", "Cyan", "Cobalt", "Indigo", "Violet", "Pink", "Magenta",  -->
                <!-- "Crimson", "Amber", "Yellow", "Brown", "Olive", "Steel", "Mauve", "Taupe", "Sienna" -->
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
                <ResourceDictionary Source="pack://application:,,,/myApp;component/Resources/Icons.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Custom Control Style

In case where a control's style needs to be overwritten, we need to edit App.xaml: App.xaml

<Application x:Class="myApp.App" ...>
    <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" />
                ...
 
                <!-- Custom Styles for Controls -->
                <!-- NOTE: Define styles AFTER theme colors -->
                <ResourceDictionary Source="pack://application:,,,/myApp;component/Styles/TabControl.xaml" />
                ...
 
            </ResourceDictionary.MergedDictionaries>
 
            <!-- Define control to use custom style -->
            <Style TargetType="TabControl" BasedOn="{StaticResource StandardTabControl}" />
            ...
 
        </ResourceDictionary>
    </Application.Resources>
</Application>

We also need to add the actual control style. Eg: for a TabControl style, we add it in myApp\Styles\TabControl.xaml:

TabControl.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">
 
    <ResourceDictionary.MergedDictionaries>
        <!--Colors to override default theme-->
        <!--<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />-->
        <!--<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/VS/Colors.xaml" />-->
        <!--<ResourceDictionary Source="pack://application:,,,/MetroUI;component/Resources/Styles/Colors.xaml" />-->
 
        <ResourceDictionary>
 
            <SolidColorBrush x:Key="Foreground" Color="Black" options:Freeze="True" />
            <SolidColorBrush x:Key="Background" Color="Transparent"/>
 
            <!--  General  -->
            <SolidColorBrush x:Key="BackgroundHighlighted" Color="PowderBlue" />
            <SolidColorBrush x:Key="BorderBrushHighlighted" Color="Pink" />
 
            <SolidColorBrush x:Key="BackgroundSelected" Color="{StaticResource AccentColor}" />
            <SolidColorBrush x:Key="BorderBrushSelected" Color="{StaticResource AccentColor}" />
 
            <!--<SolidColorBrush x:Key="BackgroundNormal" Color="Transparent" />-->
            <!--<SolidColorBrush x:Key="BackgroundNormal" Color="{StaticResource Gray7}" />-->
            <SolidColorBrush x:Key="BackgroundNormal" Color="{StaticResource AccentColor4}" />
            <SolidColorBrush x:Key="BorderBrushNormal" Color="OrangeRed" />
 
            <!--  Close Button  -->
            <SolidColorBrush x:Key="CloseButtonBackgroundHighlighted" Color="{StaticResource AccentColor2}" />
            <SolidColorBrush x:Key="CloseButtonBackgroundPressed" Color="{StaticResource AccentColor4}" />
            <SolidColorBrush x:Key="CloseButtonStroke" Color="#AAFFFFFF" />
            <SolidColorBrush x:Key="CloseButtonStrokeHighlighted" Color="#FFFFFF" />
 
        </ResourceDictionary>
 
    </ResourceDictionary.MergedDictionaries>
 
    <Style x:Key="StandardTabControl" TargetType="{x:Type TabControl}">
        <Style.Resources>
            <Style TargetType="{x:Type TabItem}">
                <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="Foreground" Value="{StaticResource Foreground}" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabItem}">
                            <Grid Height="30"
                                  Background="{TemplateBinding Background}"
                                  SnapsToDevicePixels="true">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="25" />
                                </Grid.ColumnDefinitions>
                                <ContentPresenter Grid.Column="0"
                                                  Margin="10,0,10,0"
                                                  HorizontalAlignment="Center"
                                                  VerticalAlignment="Center"
                                                  ContentSource="Header" />
                                <Button Grid.Column="1"
                                        Width="15"
                                        Height="15"
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                        Command="{Binding Path=CloseCommand}"
                                        DockPanel.Dock="Right">
                                    <Button.Style>
                                        <Style TargetType="{x:Type Button}">
                                            <Setter Property="Background" Value="Transparent" />
                                            <Setter Property="Cursor" Value="Hand" />
                                            <Setter Property="Focusable" Value="False" />
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="{x:Type Button}">
                                                        <Grid Background="{TemplateBinding Background}">
                                                            <Path x:Name="ButtonPath"
                                                                  Margin="2"
                                                                  HorizontalAlignment="Center"
                                                                  VerticalAlignment="Center"
                                                                  Data="M0,0 L1,1 M0,1 L1,0"
                                                                  Stretch="Uniform"
                                                                  Stroke="{DynamicResource CloseButtonStroke}"
                                                                  StrokeEndLineCap="Flat"
                                                                  StrokeStartLineCap="Flat"
                                                                  StrokeThickness="2" />
                                                        </Grid>
                                                        <ControlTemplate.Triggers>
                                                            <MultiDataTrigger>
                                                                <MultiDataTrigger.Conditions>
                                                                    <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}}"
                                                                               Value="false" />
                                                                    <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}}"
                                                                               Value="false" />
                                                                </MultiDataTrigger.Conditions>
                                                                <MultiDataTrigger.Setters>
                                                                    <Setter Property="Visibility" Value="Hidden" />
                                                                </MultiDataTrigger.Setters>
                                                            </MultiDataTrigger>
                                                            <Trigger Property="IsEnabled" Value="False">
                                                                <Setter Property="Visibility" Value="Hidden" />
                                                            </Trigger>
                                                            <Trigger Property="IsMouseOver" Value="True">
                                                                <Setter Property="Background" Value="{DynamicResource CloseButtonBackgroundHighlighted}" />
                                                                <Setter TargetName="ButtonPath" Property="Stroke"
                                                                        Value="{DynamicResource CloseButtonStrokeHighlighted}" />
                                                            </Trigger>
                                                            <Trigger Property="IsPressed" Value="true">
                                                                <Setter Property="Background" Value="{DynamicResource CloseButtonBackgroundPressed}" />
                                                                <Setter TargetName="ButtonPath" Property="Stroke"
                                                                        Value="{DynamicResource CloseButtonStroke}" />
                                                                <Setter TargetName="ButtonPath"
                                                                        Property="Margin"
                                                                        Value="2.5,2.5,1.5,1.5" />
                                                            </Trigger>
                                                        </ControlTemplate.Triggers>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </Button.Style>
                                </Button>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="false">
                                    <Setter Property="Background" Value="{StaticResource BackgroundNormal}" />
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="true">
                                    <Setter Property="Background" Value="{DynamicResource BorderBrushSelected}" />
                                </Trigger>
                                <Trigger Property="IsSelected" Value="true">
                                    <Setter Property="Background" Value="{DynamicResource BackgroundSelected}" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Style.Resources>
 
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Grid KeyboardNavigation.TabNavigation="Local">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Border Background="Transparent"
                                BorderBrush="{DynamicResource BackgroundSelected}"
                                BorderThickness="0,0,0,3">
                            <TabPanel Name="HeaderPanel"
                                      Margin="0,0,4,-1"
                                      Panel.ZIndex="1"
                                      IsItemsHost="True"
                                      KeyboardNavigation.TabIndex="1" />
                        </Border>
                        <Border Grid.Row="1" Background="{DynamicResource Background}" />
                        <ContentPresenter Name="PART_SelectedContentHost"
                                          Grid.Row="1"
                                          ContentSource="SelectedContent" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 
    <DataTemplate x:Key="ClosableTabItemTemplate">
        <DockPanel>
            <ContentPresenter VerticalAlignment="Center" Content="{Binding DisplayName}">
                <ContentPresenter.Resources>
                    <Style TargetType="TextBlock">
                        <Setter Property="Foreground" Value="{StaticResource Foreground}" />
                        <Setter Property="FontSize" Value="20" />
                    </Style>
                </ContentPresenter.Resources>
            </ContentPresenter>
        </DockPanel>
    </DataTemplate>
 
    <!--  This template explains how to render the 'Workspace' content area in the main window.  -->
    <DataTemplate x:Key="WorkspacesTemplate">
        <TabControl Margin="0"
                    IsSynchronizedWithCurrentItem="True"
                    ItemTemplate="{StaticResource ClosableTabItemTemplate}"
                    ItemsSource="{Binding}"
                    Style="{DynamicResource StandardTabControl}" />
    </DataTemplate>
</ResourceDictionary>

Controls

Button

<Button Name="btnMetroCircleButtonStyle"
   Width="200" Height="30" Margin="2" 
   Style="{StaticResource MetroCircleButtonStyle}"
   Content="MetroCircleButtonStyle"/>
 
<Button Name="btnSquareButtonStyles" 
   Width="200" Height="30" Margin="2" 
   Style="{StaticResource SquareButtonStyle}"
   Content="SquareButtonStyle"/>
 
<Button Name="btnAccentedSquareButtonStyle" 
   Width="200" Height="30" Margin="2" 
   Style="{StaticResource AccentedSquareButtonStyle}"
   Content="AccentedSquareButtonStyle"/>

<metro:MetroWindow x:Class="myApp.winMain" ...>
 
    <metro:MetroWindow.Flyouts>
        <metro:FlyoutsControl />
    </metro:MetroWindow.Flyouts>
 
    <Grid>
        <metro:Flyout Name="flyoutSettings" 
            Header="Settings" Position="Bottom" Height="200" Theme="Accent">
            <!-- Your custom content here -->
            <StackPanel>
                <TextBlock>General Options</TextBlock>
                <Button Width="200">Save</Button>
            </StackPanel>
        </metro:Flyout>
 
    </Grid>
 
</metro:MetroWindow>

Tile

<StackPanel Orientation="Horizontal">
    <metro:Tile TiltFactor="2" Width="100" Height="100" Count="">
        <metro:Tile.Content>
            <StackPanel>
                <Rectangle Width="40" Height="40" 
                    Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
                    <Rectangle.OpacityMask>
                        <VisualBrush Stretch="Uniform" Visual="{StaticResource appbar_power}" />
                    </Rectangle.OpacityMask>
                </Rectangle>
            </StackPanel>
        </metro:Tile.Content>
    </metro:Tile>
    <metro:Tile Title="Save" TiltFactor="2" Width="100" Height="100" Count=""/>
    <metro:Tile Title="Simulate" TiltFactor="2" Width="100" Height="100" Count="3"/>
    <metro:Tile Title="Import" TiltFactor="2" Width="100" Height="100" Count=""/>
    <metro:Tile Title="Export" TiltFactor="2" Width="100" Height="100" Count=""/>
</StackPanel>

RightWindowCommands

<metro:MetroWindow x:Class="myApp.winMain" ...>
 
    <metro:MetroWindow.RightWindowCommands>
        <metro: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="Uniform" Visual="{StaticResource appbar_cloud}" />
                        </Rectangle.OpacityMask>
                    </Rectangle>
                    <TextBlock Margin="4 0 0 0" VerticalAlignment="Center" Text="website" />
                </StackPanel>
            </Button>
        </metro:WindowCommands>
    </metro:MetroWindow.RightWindowCommands>
 
    <Grid>
        <!-- Your main content here -->
    </Grid>
 
</metro:MetroWindow>

ToggleSwitch

<metro:ToggleSwitch Name="chkWiFi" 
    Width="200" Height="60" Margin="2" 
    Header="WiFi rest state" 
    OnLabel="Yes" OffLabel="No" />