Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The MVVM Pattern


Published on

A primer on the Model-View-ViewModel pattern, based on the article “WPF Apps With The Model-View-ViewModel Design Pattern” by Josh Smith, published in the Feb 2009 issue of MSDN Magazine.

Published in: Technology
  • Be the first to comment

The MVVM Pattern

  1. 1. The MVVM PatternChris Charabaruk
  2. 2. The Model-View-ViewModelPatternWhat Why HowArchitecture design pattern for developingtestable, dynamic applicationsSpecialization of the Model-View-Controllerand Presentation Model patternsOften implemented as part of a frameworkThree main components: Model, View,ViewModelTwo support components: Binding,Commands
  3. 3. The Model-View-ViewModelPatternWhat Why HowDecouple model from application specificconcernsSimplify work required by developersBetter testability & mocking of programsSeparates behaviour and style of userinterface
  4. 4. The Model-View-ViewModelPatternWhat Why HowModel: business logic and data application agnostic what the program operates onView: user interface look & feel can be created by designers without any programmingViewModel: adapts model to view application logic manipulates model provides commands & bindings to viewManagers: frameworkcomponents Provide binding & command support
  5. 5. ComponentsBinding CommandsBindings are how View and ViewModel staysyncedBinding manager monitors for propertychanges and mirrors themBindings can include value converters if Viewrequires different format than provided byViewModel
  6. 6. ComponentsBinding Commands ViewModel: property changed View: bound control property changed Manager: find property bindings Manager: find binding for control Manager: update bindings Manager: update binding1. Find converter for 2. Run converter on 3. Set bound control 3. Set ViewModel 2. Run converter in 1. Find converter binding new value if needed property property reverse if needed for binding View: bound controls visually updated ViewModel: property updated
  7. 7. ComponentsBinding CommandsCommands are how View View: bound button clickedpasses operations toViewModelBuilds on bindings Manager: execute bound command Controls in View can 1. Get command parameter if set 2. Run command Execute method bind to command properties on ViewModel Command: executeCommand managerinforms View of whencommands can be run ViewModel: update state based on command
  8. 8. ResourcesWPF Apps With The Model-View-ViewModel DesignPattern Josh Smith, MSDN Magazine (Feb 2009) to Model/View/ViewModel pattern forbuilding WPF apps John Gossman (8 Oct 2005) Model Martin Fowler