Overview of MVVM

Ivan Krivyakov
Senior Managing Consultant
SunGard Consulting Services

E-mail:
Ivan.Krivyakov@SunGard.com
ivan@ikriv.com

http://www.ikriv.com/demo/mvvm/

Overview of MVVM

What Is This Presentation About

Traditional WPF Programming
MVVM Defined
Show me the code!
MVVM Problems
MVVM Resources
MVVM and Other MV* Patterns

Overview of MVVM

Traditional WPF
Programming

Overview of MVVM
Traditional WPF View Architecture

View
XAML

Model
(domain objects)

(UI layout)
updates, may observe

Code Behind

Overview of MVVM

XAML: window layout + named controls

<StackPanel>
<TextBox x:Name=City />
<ComboBox x:Name=CountryList SelectionChanged= />
</StackPanel>

Code behind: event handlers and

manipulating the controls
void CountryList_SelectionChanged()
{
City.Text =
GetCity(CountryList.SelectedItem as Country);
}

Overview of MVVM

Pros and Cons of the Traditional Model:

Simplicity
Power: manipulate controls as you please
Difficult to Test
Cannot easily identify modifiable UI state
Encourages using UI as data storage
Encourages mixing business logic and
control manipulation

Overview of MVVM

What is MVVM

Overview of MVVM
Model does not know anything about the UI
View is a UI element (e.g. a Window)
Something somehow fills the gap

View

Model

Something
Controller?
Presenter?
Code Behind?

Overview of MVVM
Model-View-ViewModel

Model

View

(domain objects)

(input, output)

updates, may observe

WPF Data Binding

ViewModel
(UI state)
View.DataContext = ViewModel;
http://blogs.msdn.com/b/johngossman/archive/2005/10/08/478683.aspx

Overview of MVVM

Separation of Concerns
Model

View

ViewModel

Read list of countries

from the database

Position UI elements on
screen

Validate input and show

error indicators if
necessary

Create shipment

Control visual
appearance of the UI
elements: colors, fonts,
etc.

Call model to create

shipment with data
entered by the user

Translate keystrokes to
navigation and edit
actions

Disable subdivision
combo box if selected
country has no
subdivisions

Translate mouse clicks

to focus changes and
button commands

Overview of MVVM

Important MVVM Traits

View is isolated from the model
ViewModel does not manipulate controls
directly
Most of the View ViewModel
interaction is via data binding
Codebehind is therefore kept to a
minimum

Overview of MVVM

WPF Data Binding

<TextBox Text={Binding City} />
class MainWindowViewModel
{
public string City
{
get { }
set { }
}

binding

Overview of MVVM

Dependency Properties
Richer functionality than C# properties
<TextBlock Text=Boo! Grid.Row=2 />

Overview of MVVM

WPF Data Binding Continued

<SomeClass Target={Binding Source} />
Source

Target
PropertyChanged event (optional)

CLR Property

Dependency Property

CLR Field

Dependency Property

Dependency Property
CLR Property
CLR Field

Overview of MVVM

WPF Data Binding Continued

Target may be chosen in a number of ways
Each control has a DataContext
{Binding Prop}, {Binding Prop.SubProp}
{Binding Prop, Converter=x}
{Binding Prop, ElementName=x}
{Binding Prop, RelativeSource=}

Overview of MVVM

Show Me the Code!

Overview of MVVM

Overview of MVVM

Bindings Map
Model.Countries
Country
City
Country.SubdivisionName
Country.Subdivisions
Subdivision

CountryError
CityError
SubdivisionError
HasSubdivisions
ShipmentCost
ShipCommand
Shipments

Overview of MVVM

WPF Data Binding: Commands

<Button Command={Binding ShipCommand} />
class MainWindowViewModel
{
public ICommand ShipCommand
{
get { }
}

bin
d

ing

Overview of MVVM

WPF Data Binding: Commands

Overview of MVVM

Attached Behaviors
<TextBox TextBoxExt.SelectAllOnFocus=true />
class TextBoxExt
{
DependencyProperty
SelectAllOnFocusProperty =
DependencyProperty.RegisterAttached(
SelectAllOnFocus);
static void OnFocusChanged()
{

textBox.SelectAll();
}
}

Overview of MVVM

Unit Tests
Can test Model in isolation
Can test ViewModel in isolation
Cannot unit test data bindings!
May require use of mocking libraries to test
ViewModel-to-Model and ViewModel-toView
interactions

Overview of MVVM

MVVM Problems

Overview of MVVM

Problems in a Nutshell
Data binding may be difficult to debug
Data binding may cause performance
issues
Command binding requires custom
components
Any direct manipulation of controls must
be carefully isolated

Overview of MVVM

How to Tell View to Do Something

Use attached behaviors
Have the view listen to events on ViewModel
Let ViewModel call the View via an interface
Use custom binding extensions, etc.

Overview of MVVM

Example: Setting Focus

Setting focus via data binding (pure MVVM) requires many
custom moving parts
http://joshsmithonwpf.wordpress.com/2010/03/16/
control-input-focus-from-viewmodel-objects/

IFocusMover
FocusBinding
BindingDecoratorBase

Overview of MVVM
Easier way out: have view model call an interface

Model

View

(domain objects)

(input, output)

updates, may observe

WPF Data Binding

implements

ViewModel
(UI state)

Calls methods

IView
(interface)

Overview of MVVM
Shipment Demo implementation:

Overview of MVVM

MVVM Resources

Overview of MVVM

Level of Support from Microsoft

MVVM not in .NET framework
No MVVM templates in Visual Studio
No support classes like DelegateCommand
No standard attached behaviors
Proliferation of third party MVVM toolkits

Overview of MVVM

MVVM Toolkits contain one or more of

DelegateCommand/RelayCommand
MVVM templates for Visual Studio
Some converters
Some attached behaviors
Samples and documentation

Many were not updated for VS 2010

Some are primarily focused on other
things: Composite UI, Event brokers,

Overview of MVVM

MVVM Toolkits
See Wikipedia article on MVVM
MVVM Light Toolkit
Prism (a Composite UI framework)
Structured MVVM
AttachedCommandBehavior 2.0

Overview of MVVM

MVVM Books
There are not that many
Advanced MVVM by Josh Smith.
Short overview on 54 pages, most of which
are code annotation for BubbleBurst sample
from Codeplex.
Pro WPF and Silverlight MVVM by
Gary Hall not published yet, on pre-order

Overview of MVVM

Other MVVM Resources

Just Google it. Enough people work on it.
Stack Overflow
WPF Disciples Google group
Any other WPF forum

Overview of MVVM

Summary
MVVM is a powerful concept
There are some areas where solutions
exist, but are by no means obvious
There is no standard tool set, and even no
standard terminology.
Thus, you will have to assemble your tool
belt yourself
Fortunately, not that much is required

Overview of MVVM

MVVM and Other MV*

Patterns

Overview of MVVM
1979: Model View Controller
I've lost count of the times I've seen something described
as MVC which turned out to be nothing like it.
Martin Fowler

Model

observes

View
(output)

(domain objects)
changes

Controller
(input)
http://martinfowler.com/eaaDev/uiArchs.html

may update

Overview of MVVM
2004: Model View Presenter (a.k.a. supervising controller)

Model

observes

(domain objects)
updates,
may observe

View
(input, output)
observes, may update

Presenter
(complex
presentation logic)
Let the view handle as much as possible and only step in when there's more complex logic involved.

http://martinfowler.com/eaaDev/SupervisingPresenter.html

Overview of MVVM
2004?: Passive View

Model

Passive View

(domain objects)

(input, output)

updates, may observe

observes, updates

Presenter
(all presentation logic)
http://martinfowler.com/eaaDev/PassiveScreen.html

Overview of MVVM
2004?: Presentation Model

Model

View

(domain objects)

(input, output)

updates, may observe

synchronizes state with

Presentation Model
(UI state)
Presentation model contains all variable UI state in a UI-agnostic manner
The most annoying part of Presentation Model is the synchronization. Ideally some
kind of framework could handle this... like .NET's data binding.

http://martinfowler.com/eaaDev/PresentationModel.html