M-V-VM All-Day

1. M-V-VM All-Day Jaime Rodriguez http://blogs.msdn.com/jaimer January 2009

2. Agenda • MVVM Intro ( 0:30 ) • Trees ( 0: 20 ) • Commands (0:30) • Break (0:15) • Views ( 0:35 ) • Validation ( 0:45 ) • UI Data binding Exceptions (0:20) • Lunch (1:00) • Logging ( 0:20 ) • Testing (0:20) • Tips & Tricks ( 1:00 ) • Lab & Q&A.

3. Introduction to Model-View-ViewModel

4. An architecture mindset…

7. Model,View, View/Model View Resource Dictionaries Styles Controls Data Triggers Control Templates Triggers Data templates Commands Events Binding ViewModel Test Events Model *Proportions not exact, but do illustrate a point

8. Benefits of M-V-VM • Separation of Concerns • Loose coupling • Testability • Maintainability • Reuse • Designer & developer friendly • Richer User Interface • Higher fidelity in design • Skinning • Productivity

9. Southridge demo

10. Trees

11. Logical, Visual & Inheritance tree • Logical Tree • What you put in the XAML • Visual Tree • The visuals to be rendered • Inheritance tree • Hybrid of two above + freezables.

12. <DockPanel …. <Button Content='Content' DockPanel.Dock='Top' /> <ListBox> <ListBoxItem>test</ListBoxItem> test2 <Button Content='inside listbox' /> </ListBox> </DockPanel> Trees demo

13. Why should you care? • DataContext is inherited via the Inheritance tree • Resources prefer’ the logical tree • Routed Events & RoutedCommands prefer through the visual tree • Except Menus, they are focus scope so they go back to focused element in window.

14. Views

15. Where to start…

16. DataTemplates as Views • ViewModel is instantiated • Views are DataTemplates

17. UserControl as View • View is instantiated • ViewModel is instantiated by view or it is passed into view via DataContext

18. Navigation

19. Life-cycle • Initialization • Setting DataContext before view is initialized is better for Command’s CanExecute and for performance. • Shut-down/Closing • Clean up command bindings and events • Be careful with DelegateCommand and CanExecuteChanged, it needs to be a weak reference.

20. CanExecuteChanged wiring • For commands w/ out CanExecute • For commands with CanExecute • Weak Event pattern on MSDN public event EventHandlerCanExecutChanged { { add {}; remove{}; } public event EventHandlerCanExecutChanged { { add {CommandManager.RequerySuggested += value;}; remove{CommandManager.RequerySuggested -= value;}; }

21. Tips & Tricks

22. Think Data First • Attached Behaviors for events • Blend Design time • Forward DataContext through “inheritance tree” • Sharing ViewModels • Not all data is a ViewModel • Caution!! Datatriggers • Data integrity on ViewModel wrappers • Avoid CommandManager whenever possible.

24. Thank You!!

26. Presentation Model = MVVM • Presentation Model: • Self contained class representing all data & behavior but no rendering. • Contains the Dynamic state of the view • Tight synchronization with the view • View projects state of the presentation model