WPF Metro Window in MahApps.Metro

What is Metro Window ?

Metro is a design style and language developed by Microsoft. The design style's main objective is to remove any chrome and extra decoration and allow users to interact directly with content. Windows-8 or Windows-10 the main product example of Microsoft.

Did you bored with this window, the typical window look like very traditional chrome browser window and not stylish as well. Nothing an worry WPF makes life easier supports MAHAPPS package with Stylish Window like in WINDOWS -10 applications. After implement the Final window Should like this.

Before we implementing Mahapps Metro window we should know about the Features.

Mahapps.Metro overrides the style of the default controls and gives them a metro-ish look.
MahApps.Metro also includes some custom controls based on concepts from Windows Phone and Windows 8 Apps.

Mahapps metro is available through Nuget Packages using below command Line:

Install-Package MahApps.Metro

So let's get started and move to create an application and See how it works :
Step-1 : Open VS 2017 >> File >> New Project and Select as WPF application

Step-2 : Now add the Mahapps metro styles attributes "ResourceDictionary" in App.XAML like below.

<Application x:Class="WPFMeteroWindow.App"  
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        xmlns:local="clr-namespace:WPFMeteroWindow"  
        StartupUri="MainWindow.xaml">  
   <Application.Resources>  
     <ResourceDictionary>  
       <ResourceDictionary.MergedDictionaries>  
         <!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->  
         <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" />  
         <!-- Accent and AppTheme setting -->  
         <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>  
 </Application>  

Step-3 : As you see in "App.xaml" the target path is "MainWindow.xaml.cs" we need to add our custom window control at this page. So open the code page and add the namespace, instead of "Window" class implement we need to implement our "MetroWindow" like below.

using MahApps.Metro.Controls;  
 namespace WPFMeteroWindow  
 {  
   /// <summary>  
   /// Interaction logic for MainWindow.xaml  
   /// </summary>  
   public partial class MainWindow : MetroWindow  
   {  
     public MainWindow()  
     {  
       InitializeComponent();  
     }  
   }  
 }  

Step-4 : Now We modified in "MainWindow.xaml" to add the Mahapps.Metro window style

<Controls:MetroWindow x:Class="WPFMeteroWindow.MainWindow"  
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
            xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"  
            xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"  
            Title="MahApps.Metro.Window" Width="800" Height="600"  
            GlowBrush="{DynamicResource AccentColorBrush}"  
            WindowStartupLocation="CenterScreen" >  
   <Controls:MetroWindow.RightWindowCommands>  
     <Controls:WindowCommands>  
       <Button Content="settings" />  
       <Button>  
         <StackPanel Orientation="Horizontal">  
           <TextBlock Margin="4 0 0 0" VerticalAlignment="Center" Text="Users" />  
         </StackPanel>  
       </Button>  
     </Controls:WindowCommands>  
   </Controls:MetroWindow.RightWindowCommands>  
   <Grid>  
     <Label Margin="200 50 0 0" FontSize="30">This is Mahapps Metro Window Example</Label>  
     <Image Source="/Resources/CoreProgramm.png" Width="100" Height="100"></Image> <Label Margin="600 100 0 0" FontSize="15">CoreProgramm</Label>  
   </Grid>  
 </Controls:MetroWindow>  

Under Resource folder add image and map to the image

As you see instead of <Window>, we take <Controls:MetroWindow>

Step-5 : We done all the require change and see the output as like below.

Boom ! That's the Window what we look for

Please find the Source code in Github

   Summary

   In this tutorial we discussed how to create Metro style window using Mahapps.Metro Nuget Package. If have any question related to this topic then give your feedback.