An introduction to MVVM design pattern

1. Intro to MVVM
Dareen Alhiyari
Senior Consultant
Dareen@Softact.com
Dareen.Alhiyari@gmail.com

2. What is MVVM
• MVVM is a design pattern
• MVVM stands for Model-View-ViewModel

3. Design Patterns
• Design patterns are a set of guidelines
• Design patterns are Not a set of rules

4. Model
It is your data or classes that represent
entities in your application. It normally
contains no WPF-specific code.
• Entity
• Service Proxy
• POCO (Plain Old CLR Object)

5. View
This is the User Interface element visible to
the user. Its DataContext is its ViewModel.
• XAML (WPF)
• XAML with Code Behind (Silverlight)

6. ViewModel
It contains all the data that needs to be
displayed and procedures to modify the model
at will. The magic about MVVM is that the
ViewModel knows nothing about the View.
• State
• Operations
• Not dependent on the view

7. MVVM Relations
ViewModel
Commands
Binding
View Model

8. Loosely Coupled
• The View knows the ViewModel but the ViewModel does
not know the View.
• You can very easily replace the View without affecting the
ViewModel.
• This is very useful in Developer/Designer teams where the
Developer improves the ViewModel and the Designer
enhances the View.

9. User Interaction
We always have had commands in WPF. MVVM
leverages on this feature. Instead of writing event
handling code for button clicks, we bind the buttons
(or MenuItems) in the View to Commands in the
ViewModel.

10. Commands

11. Commands

12. MVVM vs. MVC (Model-View-Controller)
MVVM MVC
View
View
* *
1
1
ViewModel Controller
Model
Model

13. Benefits of MVVM
• Loose coupling
• Testable code
• Maintainable code

14. Some MVVM Frameworks
Check out this handy tool to compare MVVM frameworks: MVVM Comparison Tool - Silverlight
• PRISM (Microsoft) • Core MVVM
• MVVM Light (Laurent Bugnion) • Onyx
• WPF Application Framework • nRoute
• Chinch • MVVM Foundation
• Caliburn Micro • How to build your own MVVM Framework

15. Thank you!
Dareen Alhiyari
Senior Consultant
Dareen@Softact.com
Dareen.Alhiyari@gmail.com