Today I am at the NRWConf, a community event of Microsoft-oriented software developers in the Börse in Wuppertal. Beside presenting our product time cockpit I also do a session about MVVM (Model-View-ViewModel) and data binding with WPF and Silverlight. Because I do the session code-only (no slides!) I have recorded the content last night to enable all participants to repeat the shown sample.

Due to popular demand I packed the sample code into a ZIP-file which you can download here.

Introduction

Separation of UI and logic – obvious goal but how can it be achieved in practise? In this article I want to show a small database application written in C# using Entity Framework, WCF, WPF and Silverlight that uses MVVM to encapsulate the view of the UI, the logic behind the UI and finally model plus business logic.

Why separation should bother you? Here are only three of the most important things that you get if you clearly separate the tasks in your applications into different layers:

1. Enhanced code reuse – as you will see MVVM enables you to reuse nearly all the code even if the markup code that makes up your UI differs between full client (WPF) and thin client (Silverlight).
2. Testability – UI testing using UI automation tools or libraries is hard. It is much easier to test class libraries. With MVVM you can encapsulate large parts of the logic behind your UI into such a library and test it using plain vanilla unit testing.
3. Easier to maintain – if you have to change something (and this will happen over time, believe me) you know exactly where to look.

Requirements

Our goal is to write a simple data entry application. We want to enable users to maintain sport results. I am Austrian and if there is one sport that we are really good in it is skiing! Therefore our application can be used to maintain results of ski races.  

At the end the application is a demo program and probably you can think of hundred ways to enhance it. However, we want to keep the requirements really simple. The user should be able to select an event using the combo box at the top of the screen. Then he sees all the sportsmen and women participating in the race. For each competitor the user should be able to enter the time in which she managed to finish. To make it more interesting from a software development perspective we define some additional requirements:

1. The application should be available as a full client and as a web client (Silverlight)
2. Data access has to be done using Entity Framework
3. There has to be a WCF service layer between data access and application (even for the full client)
4. We will not do automated UI testing (will be the topic for a separate article) but we have to automatically test as much of the UI logic as possible

Part 1 - Building the model

Part 2 - Building the WCF-based data access service

Part 3 - Building the basic UI

Part 4 - Adding more binding logic using a WPF DataGrid

Part 5 - Automated test for UI-logic (ViewModel)

Part 6 - Adding a detail area

Part 7 - Binding a button command to the ViewModel

Part 8 - Showing how to share WPF ViewModel with Silverlight client

comments powered by Disqus