WPF with MVVM: From the Trenches

Brent Edwards
Senior Consultant with Magenic
BrentE@magenic.com
@brentledwards
brentedwards.net

Why ‘From the Trenches’?

What We Will Cover
What is MVVM?
Cool WPF concepts
What is it?
Why is it cool?
How is it used?
Helpful tricks to make life easier
Useful tools that make debugging suck less
Develop sample app as we go

What is MVVM?

What is MVVM?
Model
Business logic
Business Object
View
Presentation
XAML
View Model
Functionality
Model for the View

Why is MVVM Cool?
Separates Presentation from Functionality
Promotes testability
Works great with Data Binding
Easy collaboration with Designers
No code-behinds

Cost of MVVM
No built in IDE support
All interactions must be manually wired up
New and shiny, but fragmented
Lots of different frameworks
Lots of different opinions

Cool WPF Concepts

DataContext
What is it?
A way to give elements a scope for data binding
Why is it cool?
Makes it easy to bind controls
Can be static or dynamic

DataContext
How is it used?
Statically
OR

DataContext
How is it used?
Dynamically
From code

Data Binding
What is it?
A way for applications to present and interact with data
Why is it cool?
Simple syntax to set up, WPF does the rest

Data Binding
How is it used?
Binding syntax in XAML
Two Way (Default Behavior)
Implement INotifyPropertyChanged on view model or business object

Commanding
What is it?
A way to bind commands to a DataContext
Why is it cool?
Can wire UI events to fire commands on View Model
Can pass parameters via binding

Commanding
How is it used?
Expose ICommand property on View Model
Assign a command to the property
Prism’s DelegateCommand
Bind to command in XAML

Commanding
[Demo]

Data Templates
What is it?
A way to define the presentation of your data
Why is it cool?
Can give a ‘look’ to your business objects
You can leverage data binding

Data Templates
How is it used?

Data Templates
[Demo]

Data Triggers
What is it?
Set style properties based on data values
Why is it cool?
Change presentation based on data properties

Data Triggers
How is it used?

Data Triggers
[Demo]

Value Converters
What is it?
Converts data value to format required by UI
Why is it cool?
Easy way to convert DateTime, Decimals, Integers or Booleans

Value Converters
How is it used?
Implement IValueConverter
Convert, ConvertBack
Include in Resources with a Key
Use it!

Value Converters
[Demo]

Data Template Selectors
What is it?
Select DataTemplate based on custom logic
Why is it cool
Select DataTemplate based on properties on view models or business objects
Can be unit tested

How is it used?
Inherit from DataTemplateSelector
Add properties for the DataTemplates to select from
Override SelectTemplate
Add logic to actually select the template
Add DataTemplates to XAML

How is it used?
Add DataTemplateSelector to XAML
Use it!
ContentControl
ListView
ListBox

[Demo]

Helpful Tricks
[To make life easier]

Event Aggregator / Message Bus
What is it?
Centralized location to route [Events | Messages]
Why is it cool?
Great way to decouple view models
Makes testing a breeze

How is it used?
Use an IOC container
Castle Windsor
Implement as a Singleton
Static property
Important that all calls route through same instance
Options
Prism’s Event Aggregator
Roll your own

[Demo]

Navigation
The Problem
Views coupled with other Views
View Models know about Views
No separation of concerns
No testability

Navigation
A Solution
Some Convention, Some Configuration
Leverage [Event Aggregator | Message Bus]
Leverage IOC
Castle Windsor
Leverage Reflection

Navigation
Convention
View Models all have default constructors
View Models have an optional Load method with 0 or 1 argument(s)

Navigation
Configuration – Key Players
ViewTargets
ViewConfiguration
ViewController
ViewResult
ViewFactory
ContainerConfiguration

Navigation
Configuration - ViewTargets
Enumerates the views which can be navigated to
The glue that sticks everything together

Navigation
Configuration - ViewConfiguration
Pairs a View with an optional View Model
Associated to a ViewTarget in the IOC Container

Navigation
Configuration - ViewController
The only object that interacts with the UI framework
Listens for [Events | Messages] related to showing views
Gives view details to ViewFactory to be built

Navigation
Configuration – ViewFactory
Resolves ViewConfiguration for the requested View
Dynamically creates the View and View Model
Loads the View Model with optional params using reflection
Gives back a ViewResult

Navigation
Configuration – ViewResult
Result of the dynamic build process
Has the built View along with any relevant data
Used by ViewController to show the View

Navigation
[Demo]

Modal Dialogs
Problem
Modal dialogs stall tests
[MessageBox| OpenFileDialog| PrintDialog]
How can you leverage these and keep view models testable?

Modal Dialogs
Option 1
Wrap them up!
Define interface
IMessageShower
Define implementation
MessageShower
Wire up with IOC Container
Castle Windsor
Test with mocks
RhinoMocks

Modal Dialogs
Option 2
[Event Aggregator | Message Bus]
Create [Events | Messages]
Create class listen for [Events | Messages] that get published
Test by verifying [Events | Messages] are published
Good for “Fire and Forget”
Breaks down if results are returned

Modal Dialogs
[Demo]

Magic with ContentControl
The Problem
Editable View and Read Only View
Views have identical layout
TextBox in for Editable
Label for Read Only

A Solution – ContentControl!
DataTriggers
Give different presentation depending on data values
Works dynamically
DataTemplateSelector
Select which DataTemplate to use
Only works when initially bound

[Demo]

Useful Tools
[To make debugging suck less]

Snoop
Inspects visual tree
Shows properties
Shows events
Can show 3D representation

Snoop
[Demo]

Output Window
Shows binding expression errors
Could be in immediate window instead

Output Window
[Demo]

Valuable Links
Josh Smith
http://joshsmithonwpf.wordpress.com/
Advanced MVVM – Book
Snoop
http://snoopwpf.codeplex.com/
Prism
http://compositewpf.codeplex.com/Wikipage

Questions?

Brent Edwards
Senior Consultant with Magenic
BrentE@magenic.com
@brentledwards
brentedwards.net

WPF with MVVM: From the Trenches

by Brent Edwards on Apr 10, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 76

Statistics

WPF with MVVM: From the Trenches — Presentation Transcript