How to use MahApps.Metro

MahApps.Metro is a library that brings the Modern UI (previously known as Metro UI) into your WPF application. read more...

1. Install MahApps from NuGet
• Manage NuGet Packages ...
  
• Search for "mahapps" and include prerelease
  
• Install MahApps.Metro and MahApps.Metro.Resources.
  
2. Style the window
• Add to the App.xaml 

<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 Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
  </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

Result



• Changes to the window
• XAML
  Change Window tag to Controls:MetroWindow and add the Controls namespace to the Controls:MetroWindow tag.
  
  Result
  
  
• Code behind
  Change the inheritance from Window to MetroWindow
  
  Result
  
• Result
  
  
  
3. Add a border to the MetroWindow
Get the current theme and apply the "WindowTitleColorBrush" to the BorderBrush of the window

// Window theme
Tuple<Theme, Accent> windowTheme = ThemeManager.DetectTheme(this);
//Application theme
Tuple<Theme, Accent> applicationTheme = ThemeManager.DetectTheme(App.Current);
// If windowTheme is null, the applicationTheme is active
Tuple<Theme, Accent> activeTheme = windowTheme ?? applicationTheme;
            
foreach (DictionaryEntry accent in applicationTheme.Item2.Resources)
{
    // Set window border to same color of window title
    if (accent.Key.ToString() == "WindowTitleColorBrush")
    {
        BorderBrush = (Brush)accent.Value;
        BorderThickness = new Thickness(1);
    }
}

Result



4. Change window theme
   

   // All default themes
   List<accent> accents = ThemeManager.DefaultAccents.ToList();
   // Custom theme
   ThemeManager.ChangeTheme(App.Current, accents[2], Theme.Light);

   
   Result
   
   
   
5. Add resize grip to the window
   In xaml add to the root element ResizeMode="CanResizeWithGrip"
   Example
   
   
   Result