What is MVVM
• MVVM is a design pattern
• MVVM stands for Model-View-ViewModel
• Design patterns are a set of guidelines
• Design patterns are Not a set of rules
MVC vs MVVM
• MVC – The view sits at the top of the architecture, the
controller sits below the view. The model sits below the
controller. So the view knows about the controller, the
controller knows the model. The view is notified when the
• MVVM – The controller is replaced with a view model. the
view model sits below the UI layer. The view model exposes
the data and command objects that the view needs. You could
think of this as a container object that view goes to to get its
data and actions from. The view model pulls its data from the
What is MVVM
• MVVM is a three-layer architectural pattern
• Mostly used in Windows 8, WPF and Silverlight applications.
• Used to separate presentation logic from business logic.
• MVVM makes it easier
• For the developer and the front-ender to work on the same
• Change the presentation layer at any point.
• Extend the project with less difficulties.
• Testing components.
• MVVM consists of three layers
• View is the Presentation Layer
• Contains only GUI elements, but no functionality
• Model refers to
• An object model that represents the real state content
• A data access layer that represents that content
• ViewModel is a "Model of the View"
Abstraction of the View
Serves in data binding between the View and the Model
Acts as a data binder/converter
Changes Model information into View information
Passes commands from the View into the Model
Exposes public properties, commands, and abstractions
MVVM Layers Connections
• The main idea of MVVM is that each pair of layers is coupled
as loosely as possible
• The View only knows about the ViewModel
• The View has no idea of the Model
• The ViewModel only knows about the Model
• The ViewModel has no idea of the View
• The Model knows nothing about the other layers
• The View knows the ViewModel but the ViewModel
does not know the View.
• You can very easily replace the View without affecting
• This is very useful in Developer/Designer teams where
the Developer improves the ViewModel and the
Designer enhances the View.
• What happens when an user clicks a Button?
The View fires event that a button was clicked
The View calls a Method in the ViewModel
The ViewModel gets/sets some data from/in the Model
The View Shows
the new data
• A question pops out
• How does the View know about changes in the ViewModel?
• How the ViewModel knows about changes in the Model?
• There is no reversed connection, right?
• The answer is simple
• The INotifyPropertyChanged interface
• Gives an event to notify about changes
• The INotifyPropertyChanged interface contains
only one event
PropertyChanged(object sender, PropertyChangedEventArgs e)
• The point of this event is to be called when the data is
• Both Model and ViewModel should implement this
• In small project only the ViewModel can implement it
Microsoft Patterns & Practices Guidelines
Prism for Windows-RT
Inversion of Control
Inversion of Control
How does normal control flow look like?
Common in Framework Extensions
Inevitable if you want to build loosely coupled modules
But How to decide which module gets the call?
Caller doesn’t have to know the callee
Dependency resolution not caller’s headache anymore
Interaction is now based on defined interfaces
Types of DI
• Constructor Injection*
• Setter Injection
• Interface Injection
When to Validate
• When property value is set?
• When a command is fired?
• Error Message Binding
• Restoring Error State