M-V-VM

Model View ViewModel for WPF
       (Design Pattern)
Highlights

Created By John Gossman (WPF and Silverlight
Architect at Microsoft)

This pattern is a simple and effective set of Guidelines
for Designing and Implementing a WPF application

Allows you to create a strong separation between
data, behavior and presentation (UI)
Uses

Databinding for 2 way communication between View
                (UI) and ViewModel

  Uses Command pattern (ICommand interface) for
communicating actions or events that happen on View
                       (UI)

  Dependency Properties alongwith Data Binding to
communicate data changes to and from the View (UI)
WPF MVVM Application Layers
What is View, Model and ViewModel?

View                               ViewModel                          Model
• represents the UI that the end   • is the abstraction of the View   • Represents the data classes
  user sees                          (UI)                               and contains the data, bound
• can be a user control or Data    • Communicates data                  to view and modified by view
  Template                           modifications to the Model       • Hold only the data or
• shouldn’t contain any logic or     from the View                      information related to an
  code that is to be tested        • Data changes in Model are          Object;
                                     reflected in the View through    • It doesn’t contain the
                                     ViewModel by making use of         behaviors or services that
                                     data Binding and dependency        manipulate this data or
                                     properties                         information, though
                                                                        sometimes it may contain data        View knows
                                                                        validation logic                                                                  Multiple Views : 1
                                                                                                        ViewModel, ViewModel
                                                                      • Example is “The Contact                                 1 View : 1 ViewModel   ViewModel (for Wizard
                                                                        information of a person” like    knows Model, but not
                                                                                                                                                        kind of applications)
                                                                        Name, Phone                           vice versa
                                                                        No, Email, Address, Zip Code
                                                                        etc.
Advantages
ViewModel classes are easy to unit test the complete UI without touching the UI code

Testing through ViewModel provides free and fast regression testing which helps to
reduce cost of maintaining application over time

Helps create a smooth Designer/developer workflow

 • Design team can focus on creating user-friendly views while,
 • Development team can focus on creating robust ViewModel classes
 • Which can then be integrated to ensure proper data bindings exist in the View’s XAML file

Takes full advantage of WPF’s Data Templates and Commands

Gives more flexibility to change UI without having to refactor the logic or change other
code base
What do u need to Understand in
 Order to Learn and Implement MVVM
Data Binding in WPF
  • http://msdn.microsoft.com/magazine/cc700358

Command Pattern Implementation in WPF
  • ICommand Interface usage
       public interface Icommand
       {
         bool CanExecute(object param);
         void Execute(object param);
         event EventHandler CanExecuteChanged;
       }

  • RelayCommand pattern
  • Routed Events and Commands in WPF
    • http://msdn.microsoft.com/magazine/cc785480

Composite Application Library from Microsoft
  • http://msdn.microsoft.com/library/cc707890

For Unit Testing:
  • Nunit
  • Moq Framework for .Net (Third Party classes for testing .Net Apps)
References and Resources
WPF Model-View-ViewModel Toolkit

•http://wpf.codeplex.com/wikipage?title=WPF%20Model-View-ViewModel%20Toolkit

MVVM Foundation on codeplex (A set of classes that helps build WPF Apps based on MVVM)

•http://mvvmfoundation.codeplex.com/

Super Simple MVVM Explained video:

•http://www.charlieblog.net/SuperSimpleMVVM/Large/SuperSimple_MVVM_large/SuperSimple_MVVM_large.html

MVVM MSDN Article:

•http://msdn.microsoft.com/en-us/magazine/dd419663.aspx

MVVM Channel9 video with Karl Shifflett

•http://channel9.msdn.com/shows/Continuum/MVVM/

WPF MVVM Video by Jason Dolinger

•http://hugeonion.com/2009/03/08/wpf-mvvm-video-by-jason-dolinger/

MVVM Explained

•http://csharperimage.jeremylikness.com/2010/04/model-view-viewmodel-mvvm-explained.html
Last Note on MVVM
• It is said that if you have not given names for
  your UI Elements and still able to run and
  process the application properly, the MVVM
  Implementation is clean, complete and proper



  – THANKS

MVVM with WPF

  • 1.
    M-V-VM Model View ViewModelfor WPF (Design Pattern)
  • 2.
    Highlights Created By JohnGossman (WPF and Silverlight Architect at Microsoft) This pattern is a simple and effective set of Guidelines for Designing and Implementing a WPF application Allows you to create a strong separation between data, behavior and presentation (UI)
  • 3.
    Uses Databinding for 2way communication between View (UI) and ViewModel Uses Command pattern (ICommand interface) for communicating actions or events that happen on View (UI) Dependency Properties alongwith Data Binding to communicate data changes to and from the View (UI)
  • 4.
  • 5.
    What is View,Model and ViewModel? View ViewModel Model • represents the UI that the end • is the abstraction of the View • Represents the data classes user sees (UI) and contains the data, bound • can be a user control or Data • Communicates data to view and modified by view Template modifications to the Model • Hold only the data or • shouldn’t contain any logic or from the View information related to an code that is to be tested • Data changes in Model are Object; reflected in the View through • It doesn’t contain the ViewModel by making use of behaviors or services that data Binding and dependency manipulate this data or properties information, though sometimes it may contain data View knows validation logic Multiple Views : 1 ViewModel, ViewModel • Example is “The Contact 1 View : 1 ViewModel ViewModel (for Wizard information of a person” like knows Model, but not kind of applications) Name, Phone vice versa No, Email, Address, Zip Code etc.
  • 6.
    Advantages ViewModel classes areeasy to unit test the complete UI without touching the UI code Testing through ViewModel provides free and fast regression testing which helps to reduce cost of maintaining application over time Helps create a smooth Designer/developer workflow • Design team can focus on creating user-friendly views while, • Development team can focus on creating robust ViewModel classes • Which can then be integrated to ensure proper data bindings exist in the View’s XAML file Takes full advantage of WPF’s Data Templates and Commands Gives more flexibility to change UI without having to refactor the logic or change other code base
  • 7.
    What do uneed to Understand in Order to Learn and Implement MVVM Data Binding in WPF • http://msdn.microsoft.com/magazine/cc700358 Command Pattern Implementation in WPF • ICommand Interface usage public interface Icommand { bool CanExecute(object param); void Execute(object param); event EventHandler CanExecuteChanged; } • RelayCommand pattern • Routed Events and Commands in WPF • http://msdn.microsoft.com/magazine/cc785480 Composite Application Library from Microsoft • http://msdn.microsoft.com/library/cc707890 For Unit Testing: • Nunit • Moq Framework for .Net (Third Party classes for testing .Net Apps)
  • 8.
    References and Resources WPFModel-View-ViewModel Toolkit •http://wpf.codeplex.com/wikipage?title=WPF%20Model-View-ViewModel%20Toolkit MVVM Foundation on codeplex (A set of classes that helps build WPF Apps based on MVVM) •http://mvvmfoundation.codeplex.com/ Super Simple MVVM Explained video: •http://www.charlieblog.net/SuperSimpleMVVM/Large/SuperSimple_MVVM_large/SuperSimple_MVVM_large.html MVVM MSDN Article: •http://msdn.microsoft.com/en-us/magazine/dd419663.aspx MVVM Channel9 video with Karl Shifflett •http://channel9.msdn.com/shows/Continuum/MVVM/ WPF MVVM Video by Jason Dolinger •http://hugeonion.com/2009/03/08/wpf-mvvm-video-by-jason-dolinger/ MVVM Explained •http://csharperimage.jeremylikness.com/2010/04/model-view-viewmodel-mvvm-explained.html
  • 9.
    Last Note onMVVM • It is said that if you have not given names for your UI Elements and still able to run and process the application properly, the MVVM Implementation is clean, complete and proper – THANKS