Click here to Skip to main content
Click here to Skip to main content
Technical Blog

WPF Metro Window

, 11 Jun 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
How to build a sample window (no resizing) with WPF which will look like Metro.

"Metro is an internal code name for a typography-based design language created by Microsoft. It was created as a product of Microsoft's user interface design work on some of their media products like Zune and Windows Media Center, for major utilization in their mobile operating system, Windows Phone 7", wikipedia.org.

Continuing with Metro UI I will try to give here a bunch of information that seems to be quite scattered around the web and I will show how easy it is to build a sample window (no resizing) with WPF which will look like Metro.

The first place one should study is the official guidelines of Microsoft. There you will find all the documentation you need about the logic of Metro, design guidelines and Photoshop templates of icons, buttons etc. There is however a better alternative for the icons. Here you can find all the standard Metro UI icons in one zip all in png format, ready to use in your project.

A few other really interesting projects that apply the Metro UI are the following:

Another important aspect of the UI in order to look proper has to do with the fonts. In most projects you might find styles that refer to the Segoe WP (from Windows Phone) fonts. While these fonts are also available for your PC and can be easily installed (either standalone or through the WindowsPhone tools) you should avoid it when you are building a WPF application. Segoe UI or Segoe Light render much better, especially for small sizes (below 15).

So going back to our sample window, we will build a simple WPF project from Visual Studio, and we will make our MainWindow look like a Metro one. Our window's xaml should look something like that:

<Window
 x:Class="WpfMetroWindow.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Title="MainWindow"
 Height="470"
 Width="900"
 IsTabStop="False"
 AllowsTransparency="True"
 Background="{x:Null}"
 BorderBrush="#FF3F3F3F"
 PreviewMouseMove="HandlePreviewMouseMove"
 SnapsToDevicePixels="True"
 TextOptions.TextFormattingMode="Display"
 TextOptions.TextRenderingMode="ClearType"
 ResizeMode="NoResize"
 WindowStyle="None"
 WindowStartupLocation="CenterOwner">
 ...

So with a no border, no resize, white and transparent window we are ready to begin. The next step is build the shadow around the edges. This can be accomplished easier that one might think. All we need is a border with the dimensions of our window which will have a shadow effect on it.

<Border
 x:Name="m_edgeBorder"
 x:FieldModifier="private"
 Margin="10"
 Background="White"
 IsHitTestVisible="False"
 IsEnabled="False">
 <Border.Effect>
  <DropShadowEffect
   Opacity="0.999"
   BlurRadius="16"
   ShadowDepth="0" />
 </Border.Effect>
</Border>

But since we have the window with no border we have two important issues: we have to find a way to move (drag) the window around and find a button that will close the window. For the first problem we create a rectangle on the top of the window and we attach to it's PreviewMouseDown event.

<Rectangle
 Height="28"
 VerticalAlignment="Top"
 Fill="White"
 PreviewMouseDown="HandleHeaderPreviewMouseDown" />

and then we have:

private void HandleHeaderPreviewMouseDown(Object sender,
           MouseButtonEventArgs e)
{
 m_headerLastClicked = DateTime.Now;
 if (Mouse.LeftButton == MouseButtonState.Pressed)
        {
  DragMove();
 }
}

Now for closing the window we create a button with a custom style (we could also create a button template and give it one of the Metro PNG files we downloaded earlier).

<Button
 HorizontalAlignment="Right"
 Margin="500,6,8,0"
 VerticalAlignment="Top"
 Style="{StaticResource ChromeButtonStyle}"
 Click="HandleCloseClick">
 <TextBlock
  TextWrapping="Wrap"
  Text="r"
  FontFamily="Webdings"
  Foreground="#FF919191"
  FontSize="13.333" />
</Button>

I know I've chosen a really weird way of showing the "X" on the close button but trust me it works. Here's a sneak peek.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

gnikolaropoulos
Architect
Greece Greece
No Biography provided
Follow on   Twitter

Comments and Discussions

 
QuestionAnother choice for WPF Metro Style application PinmemberMember 1054966125-Mar-14 18:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150331.1 | Last Updated 11 Jun 2012
Article Copyright 2012 by gnikolaropoulos
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid