WPF Model-View Application. Tricky things.

This article shows how to use MVVM design pattern it in WPF application software development and how to solve main common problem in it. It’s just only my experience so I’d be happy to see all comments.

I’d like to continue my series of articles about WPF and MVVM pattern in it. If you don’t use it yet you definitely must install WPF Model-View-ViewModel Toolkit 0.1. It creates all you need for MVVM in WPF. And you will love this.

In this article I’d like to tell how you can take in some tricky things when creating WPF MVVM Application.

Part 1. Closing window.

First of all it is “close the window”. 🙂 Yep, it seems very simple but there is one thing: we are not allowed to access the window object. As a result almost each WPF forum has that question. A widespread answer is “you should write handler on code-behind”. Yes, of course you can but my opinion we should use just MVVM. As default MVVM template creates CloseCommand but it shuts down all application. So I suggest solving this task the following way.

I created the new WPF Model-View application. After this I added to the ViewModelBase next command with event:


Let’s create simple UI. I created a simple SecondView window and model for it.

<Grid>

<StackPanel Margin=”10″>

<Label Margin=”10″ >It’s second window!</Label>


</StackPanel>

</Grid>

(there is CloseCommand – it’s object from ViewModelBase).

On MainView I added just one button and binded it to a command which opens a second window (I will create it then).

<DockPanel>

<Menu DockPanel.Dock=”Top”>

<MenuItem Header=”_File”>

<MenuItem Command=”{Binding ExitCommand}” Header=”E_xit” InputGestureText=”Ctrl-X” />

</MenuItem>

</Menu>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width=”auto”/>

<ColumnDefinition/>

</Grid.ColumnDefinitions>

<Button Grid.Column=”0″ Margin=”25″ Content=”Open second window!” Command=”{Binding OpenSecondViewCommand}”/>

</Grid>

</DockPanel>

This is the main goal. I added the following handler to MainViewModel.cs:


That’s all! Our second window can close and we don’t break MVVM pattern.

Part 2. How to link model and view.

It’s maybe second widespread question.

Let’s assume we have model in MainViewModel.cs and we’d like to display its view.

We should start by adding the following code to MainViewModel.cs from our previous application:


Here I added such property as base class of ViewModel and two commands which will display simple user controls. At MainView.xaml:


This ContentPresenter will display user control by binding.

So after this I created two simple user controls (FirstControlView.xaml and SecondControlView.xaml). They are very simple, so I didn’t add listening (you can see it in the source code).

If you try to run this application now, you’ll get strange behavior!


The reason is we should add DataTemplate to resources. So let’s add it to xaml. DataTemplate make links between your model and view for this model.


There are links between first model and first user control and between second model and second user control.

And now it works as we expect.


And of course, it changes value (because we added OnPropertyChanged(“Control”);)


MVVM pattern is really good for creating our WPF application!

Part 3. OnPropertyChanged method witout string.

And last thing in this article! As you saw we added


Yes, it works…but I absolutely hate this syntax!!! First, I have to write property name as string but I really prefer IntelliSense! And maybe a much stronger reason is that we are destined to make a mistake here (or forget change the new name) after big code refactoring. We won’t be able to catch these mistakes during the build and they will be very difficult to find and fix! Of course, we can add some method to ViewModelBase.cs which will check property name but it won’t fix first reason! 🙂

In this case it would be really nice to have a symbol-like construct in C#, preferably one checked for correctness by the compiler. Thanks Lambda Expression, in C# 3.0 it is easy to write a function that will return the string representation of a symbol.

Now we can change ViewModelBase.cs like this:


This is just beautiful. IntelliSense works too!


And our code in MainViewModel.cs looks like:


As you can see we reached all goals which we wanted to achieve: we have IntelliSense, if we change the property name we’ll have to change OnPropertyMethod too or we’ll get error during the build.

That’s all! Hope it was of some help to you! BTW: It’s just only my experience so I’d be happy to see all comments.

(You can download code here)

Advertisements

2 thoughts on “WPF Model-View Application. Tricky things.

  1. Just want to say what a great blog you got here!
    I’ve been around for quite a lot of time, but finally decided to show my appreciation of your work!

    Thumbs up, and keep it going!

    Cheers
    Christian, watch south park online

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s