Real-world Model-View-ViewModel for WPF

Real-world MVVM in WPF
Paul Stovell
Senior Consultant
Technical specialist: WPF

Agenda
Part 1: Introducing MVVM
Refactoring to MVVM
Unit testing MVVM
Commands
Part 2: Formalizing MVVM
History
Model-View-ViewModel
ViewModel-First
Part 3: Playing with Others
Navigation
Composition
Communication

About You
Awesome coder
Know some WPF
Love binding!
This is you...

Introducing MVVM
Part 1

Demo
Refactoring to MVVM

Demo
Unit testing MVVM

What did we just do?
Employee = the Model
SearchView.xaml = the View
SearchViewModel = the ViewModel

Demo
Using Commands

Demo
New requirement: search-as-you-type

Formalizing MVVM
Part 2

History
Presentation Model
MVVM
Martin Fowler
John Gossman

void Button_Click(...)
{
viewModel.Search();
}
<Button Command="{Binding Search}" />
Commands
Methods
View
ViewModel
External services
Properties
public void Search()
{
}
ICommand Search { get;set; }
Events

<TextBox Text="{Binding SearchText}" />
Commands
Methods
View
ViewModel
public string SearchText
{
get { ... }
set {
... Search();
}
}
External services
Properties
Events

viewModel.SessionClosed += (s,e) => Close();
Commands
Methods
View
ViewModel
External services
Properties
Events
public event EventArgsSessionClosed;

ViewModel-First MVVM
ViewModel.Search();
Commands
Methods
View
ViewModel
External services
Properties
View.Close();
Events

ViewModel-First MVVM
public event EventHandlerSearchRequested;
Commands
Methods
View
ViewModel
External services
Properties
Events
public event EventHandlerSessionClosed;

Model-View-Presenter
public event EventHandlerSearchRequested;
Methods
View
Presenter
External services
Events
private void View_SearchRequested(...)
{
// Do search
}

Model-View-Presenter
public void ShowResults(List<SearchResult> results)
{
listBox1.ItemsSource = results;
}
Methods
View
Presenter
External services
Events
View.ShowResults(results);

The Model
Service messages/DTO’s
Domain entities/value objects
DataSets
LINQ to SQL objects
Or:
View-specific objects mapped from above

Instantiation and wire-up
Internal creation:
public CalculatorView()
{
InitializeComponent();
DataContext = new CalculatorViewModel();
}

ViewModel as a dependency:
public CalculatorView(CalculatorViewModel model)
{
InitializeComponent();
DataContext = model;
}
varviewModel = new CalculatorViewModel();
var view = new CalculatorView(viewModel);

ViewModel via XAML:
<UserControl ...>
<UserControl.DataContext>
<local:CalculatorViewModel />
</UserControl.DataContext>

5 more ways:http://is.gd/dv7aN

Playing with Others
Part 3

Navigation
INavigator.Navigate(...)
Event
View+ViewModel
View
ViewModel
URI

Demo
Adding navigation with Magellan

Composition
Shell ViewModel
Search ViewModel
Weather ViewModel
Shell
Search
Weather

Composition
Bottom-Up
Order List
Top Region
2. Place
Infrastructure
Bottom Region
1. Resolve
Search
Weather

Inter-view Communication
Standard .NET events
Search View Model
Child model raises event
Parent model forwards event
Results View Model
Criteria View Model

Inter-view Communication
Mediator (e.g., Prism EventAggregator)
Results ViewModel
Criteria ViewModel
bus.Subscribe<SearchMessage>(HandleSearch);
Publish
Handle
Hub
Publish
Handle
Advert ViewModel
Recent Searches ViewModel
bus.Publish(new SearchMessage(searchText));

Conclusion
MVVM is about separation of concerns
View has UI-specific code
VM has behaviour and state
Behaviour = methods/commands
State = properties
Separation of concerns makes code easy to test
It’s easy: just one extra class!

What’s next?
Inversion of Control containers
Modular applications
Pub/sub messaging
Inductive user interfaces
p&p Prism

Links
MVVM Light: http://is.gd/duX2Q
Caliburn: http://is.gd/duX5L
More: http://is.gd/duWWG
Magellan: http://is.gd/duX70
Reuxables: http://is.gd/duX8G

Thanks!
Paul Stovell
paul.stovell@readify.net
www.paulstovell.com

DeveloperDeveloperDeveloper! Events would not be possible
With out the generous support from our sponsors…
We would like to thank the following for their support:

http://www.paulstovell.com	421
http://paulstovell.com	25
http://www.paulstovell.net	5

Real-world Model-View-ViewModel for WPF

by Paul Stovell on Jul 18, 2010

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 451

Statistics

Real-world Model-View-ViewModel for WPF Presentation Transcript