Metro UI

[C#] Developing Metro UI applications on Windows 7

Posted on March 1, 2013 · Posted in C#

If you say “Windows 8-style window” you probably think about a borderless window with sharp edges and corners, modern fonts and minimalistic icons. We call this simple, clean yet beautiful guise the Metro UI or the Metro Window. As Microsoft released Visual Studio 2012, developers could create Metro UI applications for Windows 8. However, Windows 7 does not support Metro, so if you want to develop such applications, you have to use different tricks. This post is intended to be a step-by-step tutorial on how to solve this problem.

×

This method is only tested for Visual Studio 2010!

First of all, install Visual Studio 2010 on your computer. It doesn’t matter which version, but I suggest you the Professional Edition because it has full support of every project type. After installing it, make a new C# WPF project like in the picture:

Give a name to your project and click OK. Now you should see two separate windows called “Design” and “XAML”. Obviously the Designer tab is for the visual editing and the other one is for the XML code editing. In order to use the Metro style, we need some external packages. For this purpose we will use NuGet Package Manager.

In Visual Studio go to Tools and click on Extension Manager. Here are listed all the available plugins for Visual Studio. Select Online Gallery and search for “NuGet Package Manager”. Download and install it then restart Visual Studio. After you restarted VS, go to Tools then Library Package Manager and finally click on Manage NuGet Packages for Solution. You can add external packages via NuGet within this window.

In the upper right corner search for “Mahapps” and download the following packages:

  • MahApps.Metro
  • MahApps.Metro.Resources
  • MahApps.Metro.Resources.Standalone

Now you have everything what we need. Let’s take a look at the code:

This is the standard code generated by Visual Studio. We have to modify it in order to tell VS, that we don’t want to work with the aero styled window but the Metro style we’ve just downloaded. First we need to define the Metro namespace, so we add the following to the window class:

Now we included the Controls namespace, we can use it to turn the usual window into a Metro window:

After that we need to modify the C# code, so the MainWindow class will be inherited from the MetroWindow:

If you compile the code, you will get an ugly, black and borderless window. Let’s include the resources! Insert this code before the <Grid> tag in the XML:

That’s it…
Now you have a fully functioning MetroWindow on Windows 7. The MahApps.Metro package offers many new controls but I won’t go into details. You can download a sample application at the bottom of the page. Please be aware that this solution is only for changing the window layout! It is not a Windows 8 application, it only looks like that.

Download sample Download source