Comic Organizer part II: Going metro

by Nico

October

In part 1 I talked about MVVM and MVVM Light, I hope you learned something from it. Now it’s time to move on to the next part, we’re going to start building a WPF application.

First things first, here are the tools I’m going to use:

The WPF toolkit is a set of controls that extend the default WPF controls, it’s build by Microsoft and updated a few times a year.

If the MVVM Light toolkit is installed you should see new project types when creating a new project in Visual Studio. I’m going to create a new WPF 4 project.

Now that the project is created, take a look at the solution explorer, there you will find the MVVM parts nicely ordered in separate folders. If you want you can take them and put every part in a separate project, I won’t be doing that for my application since it’s pretty small.

Now that we got our project, let’s metronize it. For this we need to open the solution in Expression Blend. The best way to work on XAML based projects is to open the solution in both Visual Studio and Expression Blend, changes made in one will automatically be reflected in the other.

Metro isn’t a style that is out of the box available for WPF. While searching for a way to imitate the Metro windows like Microsoft uses it in Zune I stumbled upon the blog of Steven Hook. He had the idea of using the Wingdings font for the upper right buttons. Sounds weird? Let me show you how it works.

In Expression Blend I’ve set the WindowsStyle property to “None” and ResizeMode to “ResizeWithGrip”, the generated XAML looks like this

Code Snippet
 <Window x:Class="ComicOrganizer.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="Comic Organizer"
        DataContext="{Binding Main, Source={StaticResource Locator}}" WindowStyle="None" ResizeMode="CanResizeWithGrip" AllowsTransparency="True">
 

This gives a clean white window without borders that can be resized by using the grip in the lower right corner. Next step is adding the controls for closing, maximizing and minimizing the window. This is the XAML responsible for those buttons

Code Snippet
 <Grid 
    x:Name="HeaderGrid" 
    Height="50" 
    VerticalAlignment="Top" Grid.ColumnSpan="2">
    <Grid
        x:Name="DragableArea"
        Background="White"
        MouseDown="DragableGridMouseDown"/>
    <StackPanel
        Orientation="Horizontal"
        Margin="0,5,5,0"
        HorizontalAlignment="Right"
        VerticalAlignment="Top"
        Background="White">
        <TextBlock 
            x:Name="ChangeViewButton"
            Text="2"
            FontFamily="Webdings"
            Foreground="Gray"
            Margin="0"
            VerticalAlignment="Top"
            HorizontalAlignment="Right"
            MouseLeftButtonUp="ChangeViewButtonMouseLeftButtonUp" />
        <TextBlock
            x:Name="MinimizeButton"
            Text="0"
            FontFamily="Webdings"
            Foreground="Gray"
            Margin="5,0,0,0"
            HorizontalAlignment="Right"
            VerticalAlignment="Top"
            MouseLeftButtonUp="MinimizeButtonMouseLeftButtonUp" />
        <TextBlock
            x:Name="MaximizeButton"
            Text="1"
            FontFamily="Webdings"
            Foreground="Gray"
            Margin="5,0,0,0"
            HorizontalAlignment="Right"
            VerticalAlignment="Top"
            MouseLeftButtonUp="MaximizeButtonMouseLeftButtonUp" />
        <TextBlock
            x:Name="CloseButton"
            Text="r"
            FontFamily="Webdings"
            Foreground="Gray"
            Margin="5,0,0,0"
            HorizontalAlignment="Right"
            VerticalAlignment="Top"
            MouseLeftButtonUp="CloseButtonMouseLeftButtonUp" />
    </StackPanel>
</Grid>
 

The “DragableArea” grid will allow the application to be dragged around the screen by the user, just like any app does. The Stackpanel takes care of the 4 buttons in the upper right corner.

Now we need to implement the logic for these buttons, the buttons are actually textblocks but will behave like buttons. The blog that I got this idea from said that the logic of the buttons is the responsibility of the view, so even in an MVVM application it could be placed in the code behind file of the view. I tend to agree with this logic so I’m going to place it in the code behind as well, although it’s perfectly possible to put it in the ViewModel.

The complete code behind file looks like this:

Code Snippet
 using System.Windows;
using System.Windows.Input;
using ComicOrganizer.ViewModel;
 
namespace ComicOrganizer
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        /// <summary>
        /// Initializes a new instance of the MainWindow class.
        /// Metro style logic is done here because it's the responsibility of the View
        /// idea found on http://stevenhook.blogspot.com/2011/01/wpf-borderless-window-controls.html 
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();
            Closing += (s, e) => ViewModelLocator.Cleanup();
        }
 
        private void CloseButtonMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            Close();
        }
 
        private void MaximizeButtonMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            WindowState = WindowState.Maximized;
        }
 
        private void ChangeViewButtonMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            WindowState = WindowState.Normal;
        }
 
        private void MinimizeButtonMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            WindowState = WindowState.Minimized;
        }
 
        private void DragableGridMouseDown(object sender, MouseButtonEventArgs e)
        {
            if (e.ChangedButton == MouseButton.Left)
                DragMove();
        }
    }
}
 

These little methods speak for themselves, if you have any questions about them feel free to leave a comment or contact me via mail, twitter, …

That was it for this second part, we now have a running WPF application in Metro style using some easy tricks. I believe that Microsoft will give a real Metro style out to the community, when they do I’ll probably convert this app to use the real style.

In part III we’ll start receiving data and maybe some databinding as well, who knows? Glimlach