Adding MahApps.Metro to your application

Updating Existing Apps to MahApps.Metro

  1. Install MahApps.Metro package Install-Package MahApps.Metro
  2. Tell our main window to make use of visual styles that MahApps.Metro offers
    • Change base class of code behind class MainWindow from Window to MetroWindow
      1. Add using MahApps.Metro.Controls; namespace to the class
      2. Change public partial class MainWindow : Window to public partial class MainWindow : MetroWindow
      3. In the XAML file, include MahApps.Metro namespace and change the window type to be a Metro window type. After the changes, you should be having something similar to the following: <controls:MetroWindow x:Class="ScoreKeeper.MainWindow" xmlns="" xmlns:x="" xmlns:controls="" Title="My App" Height="500" Width="750">
      4. Add resource dictionaries to our App.xaml. These are availble from the Quick Start <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>
  3. If you prefer not to have all titles in caps, add TitleCaps="False" in main window xaml file. You can also change the border by adding either adding the following properties BorderBrush="{DynamicResource AccentColorBrush}" BorderThickness="1" or setting the Glow Brush property GlowBrush="{DynamicResource AccentColorBrush}"

Adding Icon add icon property to the main window xaml Icon="Resources/my-transparent_png.png"

or add an icon template <controls:MetroWindow.IconTemplate> <DataTemplate> <Image Source="Resources/my-transparent-png.png"></Image> </DataTemplate> </controls:MetroWindow.IconTemplate> and on set the icon property to the non transparent icon Icon="Resources/my-non-transparent_png.png" this will allow icon to show without the transparency on the status bar.


Adding commands to the title bar: Add following to main window just above the grid property <controls:MetroWindow.RightWindowCommands> <controls:WindowCommands> <Button>Settings</Button> <Button Content="Logout"></Button> </controls:WindowCommands> </controls:MetroWindow.RightWindowCommands>

Using fonts to add icons to the title bar <controls:MetroWindow.LeftWindowCommands> <controls:WindowCommands> <Button FontSize="20" FontFamily="Wingdings">D</Button> <Button FontSize="20" FontFamily="Wingdings" Content="J"></Button> </controls:WindowCommands> </controls:MetroWindow.LeftWindowCommands>