In the previous article, I quickly showed how to create a single-view, single-window WPF application using MVVM Light. The trend in WPF applications is to have a single window holding multiple views so that there are less pop-up dialogs or child windows. This article shows how to construct a simple two view application using MVVM and WPF.

Getting Started

• Requires VS2010
• Ensure that you have Nuget installed.
• Manage Nuget Package References and add MVVM Light
• The example code for this article is on github.

Note that the XAML, in particular, is elided for brevity and you should go to the git repository for the original code.

Hosting Multiple Views

The application structure is similar to the previous article: we have a MainWindow, a ViewModelLocator, and a MainViewModel.

A picture is worth a thousand words, so without further ado, here is what the project structure looks like in VS2010:

The project is laid out in typical MVVM style: 3 folders for Models, ViewModels, and Views. In this case we do not have any Models so they can be ignored.

Starting with the Views: we simply have two UserControl XAML files, that have contain the views that we want to render. The first view is the one from the previous article. The second is just a text label.

All the work involved in rendering two different views for two different view-models happens in MainViewModel.cs, MainWindow.xaml, and App.xaml.

Looking at the MainWindow XAML, we see the following;

<Window x:Class="TwoViews.MainWindow"
        DataContext="{Binding Main,
                              Source={StaticResource Locator}}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <ContentControl Content="{Binding CurrentViewModel}" />

        <DockPanel Grid.Row="1" >
            <Button Command="{Binding SecondViewCommand}"
                    Content="Second View"
                    DockPanel.Dock="Right" />
            <Button Command="{Binding FirstViewCommand}"
                    Content="First View"
                    DockPanel.Dock="Left" />
        </DockPanel>
    </Grid>
</Window>

As before, we use the ViewModelLocator to bind our Main view model to the MainWindow. This time, however, we have a ContentControl that binds to a new property called CurrentViewModel, and two buttons that bind to commands that switch the view models. Even though the buttons are labelled as switching the views, it is actually the view-models that are updated.

The next step in getting this to work, is implementing a DataTemplate, per view model that renders a View associated with a ViewModel. We do this in the App.xaml (though we could do it any Resource section we choose):

<Application x:Class="TwoViews.App"
             xmlns:views="clr-namespace:TwoViews.Views"
             xmlns:vm="clr-namespace:TwoViews.ViewModels"
             StartupUri="MainWindow.xaml"
             >
    <Application.Resources>
        <vm:ViewModelLocator x:Key="Locator"  />
        <DataTemplate DataType="{x:Type vm:SecondViewModel}">
            <views:SecondView />
        </DataTemplate>
        <DataTemplate DataType="{x:Type vm:FirstViewModel}">
            <views:FirstView />
        </DataTemplate>
    </Application.Resources>
</Application>

For example, this quite literally says ‘if my data type is FirstViewModel, then the WPF framework should render the FirstView UserControl.

So when the Content attribute of our the ContentControl is set to an object of type FirstViewModel the framework renders the correct View for us.

It should also be noted that because the Content attribute has been set to a particular ViewModel, for example FirstViewModel, it is also set as the DataContext for the view that is rendered, i.e. FirstView, and the data-binding between FirstView and FirstViewModel therefore work.

The last part of the application that wires all of this together is the MainViewModel class. Clearly we only want a single instance of each view model, so we just declare static instances of each one:

public class MainViewModel : ViewModelBase
{
    private ViewModelBase _currentViewModel;

    readonly static FirstViewModel _firstViewModel = new FirstViewModel();
    readonly static SecondViewModel _secondViewModel = new SecondViewModel();

    public ViewModelBase CurrentViewModel
    {
        get
        {
            return _currentViewModel;
        }
        set
        {
            if (_currentViewModel == value)
                return;
            _currentViewModel = value;
            RaisePropertyChanged("CurrentViewModel");
        }
    }

    public ICommand FirstViewCommand { get; private set; }
    public ICommand SecondViewCommand { get; private set; }

    public MainViewModel()
    {
        CurrentViewModel = MainViewModel._firstViewModel;
        FirstViewCommand = new RelayCommand(() => ExecuteFirstViewCommand());
        SecondViewCommand = new RelayCommand(() => ExecuteSecondViewCommand());
    }         

    private void ExecuteFirstViewCommand()
    {
        CurrentViewModel = MainViewModel._firstViewModel;
    }

    private void ExecuteSecondViewCommand()
    {
        CurrentViewModel = MainViewModel._secondViewModel;
    }
}

Note that in the CurrentViewModel property we also have to RaisePropertyChanged via the INPC interface that ViewModelBase defines. This is so that the data-binding works in WPF, i.e. when we click on the buttons the view changes: if this line is omitted, you cannot change the views by clicking on the buttons.

If we run the code we can now see that we can switch between the two views and both views maintain their state (as we are using a static instance of each):

Finishing Off

You might feel that the code above looks repetitive: it is. Many, if not all, MVVM frameworks provided ‘runtime assistance’ in automating this kind of thing. By that I mean that by naming your classes according to convention, e.g. by always using the ‘View’ and ‘ViewModel’ suffixes, MVVM frameworks heavily use reflection and can associate your views and view-models at run time. Indeed, even the MainViewModel above is often generalised into something that is provided by the MVVM framework.

Footnotes

Previous articles/further reading:

• An MVVM Quick Start
• MVVM Light Hello World

The example code is on github.

This article shows a trivial ‘Hello World’ MVVM WPF application using the MVVM Light library.

Getting Started

• Firstly, start VS2010, and create a new WPF project.
• Ensure that you have Nuget installed.
• Manage Nuget Package References and add ‘MVVM Light’

MVVM Light has now added a ViewModel folder containing the MainViewModel and the ViewModelLocator.

Edit the Main Window

Simply add a button, and defer the DataContext binding to the ViewModelLocator (elided):

<Window x:Class="MvvmLightTest.MainWindow"
        DataContext="{Binding Main,
                              Source={StaticResource Locator}}">
    <Grid>
        <Button Command="{Binding ShowPopUp}" Content="Show Pop Up" />
    </Grid>
</Window>

Then in the MainViewModel we define the ShowPopUp command:

public class MainViewModel : ViewModelBase
{
    public MainViewModel()
    {
        ShowPopUp = new RelayCommand(() => ShowPopUpExecute(), () => true);
    }

    public ICommand ShowPopUp { get; private set; }

    private void ShowPopUpExecute()
    {
        MessageBox.Show("Hello!");
    }
}

Compile the code, and we get:

The MainViewModel inherits from the ViewModelBase class which also gives us the RaisePropertyChanged method, which we would call if we change the value of a property that we bind to (see this CodeProject article for more information). An example of property data-binding is also included in the example code.

How does all this work?

Firstly, our App.xaml contains an application wide instance of the ViewModelLocator:

<Application x:Class="MvvmLightTest.App"
             xmlns:vm="clr-namespace:MvvmLightTest.ViewModel"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" />
    </Application.Resources>
</Application>

We then defer the DataContext binding to the ViewModelLocator (elided) in the MainWindow:

<Window x:Class="MvvmLightTest.MainWindow"
        DataContext="{Binding Main,
                              Source={StaticResource Locator}}">
    <Grid>
        <Button Command="{Binding ShowPopUp}" Content="Show Pop Up" />
    </Grid>
</Window>

This simply returns the static instance of the MainViewModel held in the ViewModelLocator instance.

The example code is on github.

Since I’m using git a little bit more often now, this is just a little note to remind me how to do things in git that I would usually do in svn or hg. Yet another git cheatsheet!

Reverting

This is quite straightforward for my purposes:

git reset --hard HEAD

Running just git reset -h gives:

usage: git reset [--mixed | --soft | --hard | --merge | --keep] [-q] [<commit>]
   or: git reset [-q] <commit> [--] <paths>...
   or: git reset --patch [<commit>] [--] [<paths>...]

    -q, --quiet           be quiet, only report errors
    --mixed               reset HEAD and index
    --soft                reset only HEAD
    --hard                reset HEAD, index and working tree
    --merge               reset HEAD, index and working tree
    --keep                reset HEAD but keep local changes
    -p, --patch           select hunks interactively

Cleaning up

To revert files use:

git clean

with -h:

usage: git clean [-d] [-f] [-n] [-q] [-e <pattern>] [-x | -X] [--] <paths>...

    -q, --quiet           do not print names of files removed
    -n, --dry-run         dry run
    -f, --force           force
    -d                    remove whole directories
    -e, --exclude <pattern>
                          add <pattern> to ignore rules
    -x                    remove ignored files, too
    -X                    remove only ignored files

If you just want to remove ignored files, run git clean -f -X.
One nice feature is that you can get back to a clean working copy by doing:

git clean -f -x

Moving and Committing.

One very nice feature of git is that you can move files around using the operating system commands, and git tracks the moves automatically.

Untracked files still need to be added via git add, and then git commit --all is the closest analogy to svn commit.

Although a little confusing at first, most git commands do nothing unless you specify a particular argument. Compare this to Subversion: I can’t recall the number of times that people have made accidental commits because Subversion just blindly commits everything.

I have added yet another CodeProject article entitled A WPF Short TimeSpan Custom Control that builds up on my previous article that creates a simple spinner control.

The introduction to the article is here, but go to the CodeProject web site for the full article:

Introduction

In my previous two articles, I first described a simple short TimeSpan UserControl that used sliders to pick the hours, minutes, and seconds of a TimeSpan. In my second article I described a custom spinner control that could be used to replace the sliders.

In this third article, I will update the TimeSpan control to use the SpinnerControl, and make the TimeSpan control a custom control, rather than a UserControl (in particular so that we can apply custom themes to it). I refer to this as a ShortTimeSpanControl as it only represents a positive TimeSpan from 00:00:00 to 23:59:59. A full TimeSpan is described here:

A TimeSpan value can be represented as [-]d.hh:mm:ss.ff, where the optional minus sign indicates a negative time interval, the d component is days, hh is hours as measured on a 24-hour clock, mm is minutes, ss is seconds, and ff is fractions of a second. That is, a time interval consists of a positive or negative number of days without a time of day, or a number of days with a time of day, or only a time of day.

With the generic theme supplied, this is a selection control, where the user can choose a TimeSpan. As it is a custom control, you can apply any custom theme you like, and, perhaps, just make it a read-only control (interactively, that is), that updates its Value via data-binding.

….read the full article at A WPF Short TimeSpan Custom Control

I have added another article to Code Project: A WPF Spinner Custom Control which describes the process of creating a simple spinner control in WPF using the framework.

This follows up from my previous post where I created a simple UserControl to select a TimeSpan. In the absence of a spinner control I used sliders instead. Writing a spinner control has been an educational experience: whilst I have previously written controls, writing a new one from scratch and adhering to the various framework guidelines and conventions (to a degree) meant that I had to read through much more of the MSDN documentation than I would previously have taken a look at.

What makes the article a little different to some of the others out there, is that I try and mention each part of a custom control: the code, the generic theme, and then applying a custom theme to it.

I’ve just posted a new article on CodeProject: An Extremely Simple WPF TimeSpan Control, which ‘does what it says on the tin’: it’s an extremely simple TimeSpan for C# and WPF.

I have started working on a simple countdown timer that is written in C#, XAML, and uses the ‘MVVM’ pattern. The v0.1 code is checked into GitHub, where you can download it, fork it, and play around (yes, I’m using semantic versioning). The purpose of this is to refresh my memory about XAML, and C#, and also to play around with CodeRush and Refactor! that make writing C# much easier.

The version 0.1 features are:

• Countdown fixed and starts at 25 minutes.
• Plays a start/stop sound using the SystemSounds.
• Settings not implemented.
• The window stays top-most.
• The Windows 7 taskbar icon shows the countdown progress.

This will go up onto CodeProject, I expect, once I’ve finished it off. The icon, if you are interested, was created using Icon Workshop which, at the time of writing, has money off.

I’m taking this as a reference for files that should be ignored by git:

git – .gitignore for Visual Studio Projects and Solutions – Stack Overflow.

Then copying them into .gitignore_global in %USERPROFILE% and then following these instructions http://help.github.com/ignore-files/ and running:


git config --global core.excludesfile ~/.gitignore_global


this now means that any git add only adds the files we care about such as source code and makefiles etc.

.

Here is an interesting question and answer on Python about meta-classes what meta-classes are and how Python defines and creates classes:What is a metaclass in Python? – Stack Overflow.

I am a bit of a shameless fan of good design and typography, and I can’t believe I missed this article a couple of years back from the London Reconnections website. If you use the London Underground, here is a quick history of the old and new fonts used by LU: A Typeface for the Underground | London Reconnections.