WPF Metro Window 

 Have you bore with WPF window like this, the typical window look like very traditional chrome browser window like and not stylish as well. 
Nothing an worry WPF makes life easier supports Mhapps package with Stylish Window like in WINDOWS -10 applications. After implement the Final window Should like this.
For achieving this type of window we should follow these below steps. Before we implementing Mahapps Metro window we should know about the Features.
Mahapps Metro
Mahapps metro is an Open Source and available in Nuget packages as well.

  • 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 : As we discuss install the required package through Nuget package manager Console

 
    Package Manager Console Host Version 4.9.2.5706

Type 'get-help NuGet' to see all available NuGet commands.

PM> Install-Package MahApps.Metro
    
Successfully installed 'MahApps.Metro 1.6.5' to WPFMeteroWindow
Executing nuget actions took 1.82 sec
Time Elapsed: 00:00:25.8757236
Step-3 : 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-4 : 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-5 : 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"
                      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 Mhapps Metro Window Example</Label>
        <Label Margin="600 100 0 0" FontSize="15">By Jayant Tripathy</Label>
    </Grid>
</Controls:MetroWindow>

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

Step-6 : Now run our application and see the output.
Boom ! That's the Window what we look for



Summary

 We discussed how to create Metro style window using Mahapps.Metro Nuget Package. If have any concern or doubt you can give your opinion. 

 You can find the Source code in the below Git path:
https://github.com/JayantTripathy/WPF-Mahapps-Metro-Window