Moving from Windows Applications to WPF

Introduction

I must say, WPF is a programming language which has some of the difficult syntax to start with. I was wondering what those bindings, routings are doing in the first place? All Windows programmers who are used to the layered (tiered) architecture will be wondering how to cope with these new concepts.

But then if you start learning WPF in conjunction with MVVM design pattern, it will be a fun. It segregates the business layer, data layer from the View. Yes, this is what the basic three tier architecture concept is all about!!! Looking at MVVM, one could easily say that it is tailor made for WPF.

Let’s try to move from Windows .NET 2.0 to WPF programming. We will first see a simple Employee management system developed using .NET 2.0. We will then try to develop the same using WPF with MVVM design pattern.

Visiting 3 Tiered Architecture

When developing professional software, we always want to keep the UI separated from the business component and the data. 

We usually hold a business object behind every UI which mediates between UI and the model. The business objects strongly follow the “patterns and practices” to make the application scalable. The attached source code contains an example demonstrating a simple Windows application. It is having a Simple Windows Form with two ComboBoxes, one to select Employer and the other to select employee. Once you select an employee name, you can view his/her details.

On the WPF Way

Now get back to WPF. We have UI blessed with bindings. Then we always have those data objects which keep the editable data in memory (in memory representation of database). Now we can bind the data with UI. Bindings allow us to update data in both ways. We can update UI from data or data from UI.

Let's convert the above .NET 2.0 application to WPF. We can reuse the existing data layer. So we have the data. We will develop WPF application to display the information. We will follow the MVVM design pattern. We have XAML as View. We have the data layer as Model. It's time to pass this model information to View. We will design a layer (ViewModel) which will encapsulate model from View. The ViewModel will act as DataContext to View. We will use DataContext in XAML binding. So when you update the ViewModel from View (because of binding), view model will internally update the Model.

So let’s pull some tricks from the MVVM (or Josh Smith’s brainchild) to elicit WPF programming. 

The above diagram depicts the details about how WPF applications can develop using MVVM design pattern. This article talks about developing a WPF application using MVVM, so let's remember a few guidelines for MVVM.

DeFacto for MVVM

1. No code behind of XAML - absolutely clean view design
2. View model should be passed as DataContext to UI View
3. View model and Model should not access any UI/View component, object
4. View model should inherit INotifyPropertyChanged. This is required to make ViewModel as Binding source
5. View model should encapsulate model - This hides the intricacy of data storage from View

You Can Also Refer To The Links Below to Enhance Your WPF Skills

• Origin of MVVM - Josh Smith explaining MVVM [^]
• Josh Smith thread on converters and MVVM [^]
• AttachedCommandBehavior V2 aka ACB [^]
• Fat Models, skinny ViewModels and dumb Views, the best MVVM approach? [^]
• Composite Application Guidance for WPF and Silverlight - February 2009 [^]

History

• 21^st May, 2009: Initial post
• 22^nd May, 2009: Minor updates
• 6^th June, 2009: Included an example to demonstrate .NET 2.0 application and its WPF equivalent