1. Miguel A. Castro Architect IDesign
9/21/ :03 AM
DEV206
Programming with MVVM
Miguel A. Castro
Architect
IDesign
© 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2. Agenda XAML Data Binding What is MVVM
Implementing the Pattern (and sticking to it)
Adding Commanding
Unit Testing
Advanced Features

3. Data Binding Extremely powerful with XAML
Everything binds (to everything else)
Every tag has DataContext property
Value becomes underlying binding source
Provides values from tag & down visual tree
Underlying binding object should implement INotifyPropertyChanged interface
XAML binding attributes provide additional characteristics
Mode, UpdateSourceTrigger, Converter

4. XAML Data Binding <Window> <Grid>
<Label Content=“{Binding Name}” Width=“{Binding Size}” /> ...
…………………………………………………………………………………
this.DataContext = myObj;
where myObj contains:
string Name
double Size

5. What is MVVM? Pattern made specially for binding
Class provides the binding source for the entire view
Encapsulates logic for the view
Provides state and behavior
Loosely coupled to the view

6. What is MVVM? View (XAML) Layer ViewModel Layer Domain Layer
Data Access Layer
Data Storage Layer

7. Goals of MVVM Make the view completely “State Driven”
Fill in for model short-comings
Decouple state and behavior from view
Provide ability to unit test
Reduction or even elimination of the code-behind class

8. Rules of MVVM ViewModel should have NO knowledge of the View
For navigation, ViewModel can raise an event that View can hook into
Unless using ViewModel switching & Data Templates (later)
View should have a loose coupling to ViewModel (not until runtime if possible)
ViewModel can expose individual model properties or model as a whole

9. Implementing the Pattern
A ViewModel is just a class that
Wraps one or more domain models
Provides property notification
Provides validation notification (optional)
Exposes bindable properties (or model)
Contains commanding behavior
Can be tested completely independent of the view
Can fire events back to the view

10. Connecting to View
ViewModel class becomes the “DataContext” of the View
Window or UserControl
Can be set anywhere convenient
View can optionally hook into ViewModel events
Good for view navigation

11. Implementing the MVVM Pattern
Demo

12. Commanding XAML Technology Works great with MVVM Command classes
Not specifically MVVM-related
Works great with MVVM
Command classes
Inherit ICommand
Used with implementers of ICommandSource
Provide execution and determination of execution

13. Commanding
Command Basics
Demo

14. Commanding in MVVM Sometimes a command needs access to ViewModel state
Saving of data entered by user
Command classes don’t “belong” to a ViewModel
Need way to hook classes together
Command execution needs to access VM state

15. Commanding in MVVM Technique 1: Technique 2:
Receive copy of ViewModel into command constructor
Technique 2:
Use Delegate/Relay Command pattern
Allows passing of method pointers into command
Methods reside in ViewModel
Which technique is used depends on command reusability necessities

16. Commanding
Commands in MVVM
Demo

17. Putting It All Together
Think in State-Driven terms
If View has requirement, ask:
What state and behavior does the ViewModel have to expose in order to satisfy the requirement?
Exercise
Provide a view with a label to be displayed in one of two colors
Provide two buttons used to alter the colors of the label
Enable or disable the buttons accordingly when not useful
Allow for proper unit testing

18. Before & After MVVM BEFORE View shows label and buttons
Button click events change color of label
Button click events disable button just clicked and enable other button
AFTER
View shows labels and buttons
View bound to ViewModel
Label color bound to property
Buttons bound to commands
Command argument provides color
Command execution changes color property
Command determination depends on current color

19. MVVM Exercise
Before & After MVVM
DEMO

20. Unit Testing ViewModel is totally decoupled from View
Has no dependency on View class
Can even reside in separate assembly
Can be instantiated like regular class
Unit test can test properties (if needed)
Unit test can set state and call upon command execution

21. Testing the MVVM Exercise
Unit Testing
Testing the MVVM Exercise
DEMO

22. ViewModel-First Views contain other Views
Same hierarchy for ViewModels
ViewModel exposes other ViewModels as state
Commands cause ViewModel “flipping”
Data Templates provide VM-V mapping
Silverlight requires a Type-Converter technique
Can concentrate on the logic of what ViewModel to use when and why – independent of actual View that will show

23. ViewModel-First Technique
View Switching
ViewModel-First Technique
DEMO

24. Where to next? Further technologies intertwined with MVVM
Type Converters
Validation Techniques
Design-Time Data
Dependency Injection
Frameworks

25. Frameworks Core-Framework Domain-Framework ObjectBase Relay Command
ModelBase
ViewModelBase
Page Conductors
TabbedViewModel
ToolViewModel
DialogViewModel
RibbonTab-ViewModel
Validation Rules
Type Converters
SaveableTabbed-ViewModel
Undoable-ViewModel
Event Argument Classes
Customer-ViewModel
CustomerProfile-ViewModel
Enums
Domain-Framework
View Bases
CustomerGenInfo-ViewModel
CustomerBilling-ViewModel
CustomerOrders-ViewModel

26. Frameworks
MVVM Foundation
MVVM Light
Caliburn
CSLA
Prism
Refraction

27. Finalizer ViewModels provide a great binding source for XAML views
Decoupleness allows easy testing
Can set up ViewModel inheritance chains for commonly used state or behavior
Not possible with code-behind
Much cleaner design
Take the time to setup MVVM – it’ll be worth it
Use or build a framework – at minimum, a base layer

28. Finalizer Let your ViewModel evolve naturally
Think about ViewModel inheritance where applicable
Don’t concentrate on code-behind elimination
It will happen naturally and eventually
In most cases, you may start out never using code-behind
Don’t forget your unit tests
Should have one unit test per-ViewModel

29. References Josh Smith’s Blog In the Box – MVVM Training
In the Box – MVVM Training
Karl Shifflett
Full kudos for the MVVM Before/After exercise
TONS of MVVM stuff on the web

30. DEV Track Resources http://www.microsoft.com/visualstudio

31. Resources Learning http://northamerica.msteched.com
Tech Ed North America 2010
9/21/ :03 AM
Resources
Connect. Share. Discuss.
Learning
Sessions On-Demand & Community
Microsoft Certification & Training Resources
Resources for IT Professionals
Resources for Developers
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

32. Complete an evaluation on CommNet and enter to win!
Tech Ed North America 2010
9/21/ :03 AM
Complete an evaluation on CommNet and enter to win!
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

33. Tech Ed North America 2010 9/21/2018 12:03 AM
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

34. Thank You For Attending !
Stay in touch…
Miguel A. Castro
@miguelcastro67