Programming with MVVM

1. DEV206 Programming with MVVM Miguel A. Castro Architect IDesign

2. Agenda • XAML Data Binding • What is MVVM • Implementing the Pattern (and sticking to it) • Adding Commanding • Unit Testing • Advanced Features

3. Data Binding • Extremely powerful with XAML • Everything binds (to everything else) • Every tag has DataContext property • Value becomes underlying binding source • Provides values from tag & down visual tree • Underlying binding object should implement INotifyPropertyChanged interface • XAML binding attributes provide additional characteristics • Mode, UpdateSourceTrigger, Converter

4. XAML Data Binding • <Window> • <Grid> • <Label Content=“{Binding Name}” Width=“{Binding Size}” /> ... • ………………………………………………………………………………… • this.DataContext = myObj; • where myObj contains: • string Name • double Size

5. What is MVVM? • Pattern made specially for binding • Class provides the binding source for the entire view • Encapsulates logic for the view • Provides state and behavior • Loosely coupled to the view

6. What is MVVM? View (XAML) Layer ViewModel Layer Domain Layer Data Access Layer Data Storage Layer

7. Goals of MVVM • Make the view completely “State Driven” • Fill in for model short-comings • Decouple state and behavior from view • Provide ability to unit test • Reduction or even elimination of the code-behind class

8. Rules of MVVM • ViewModel should have NO knowledge of the View • For navigation, ViewModel can raise an event that View can hook into • Unless using ViewModel switching & Data Templates (later) • View should have a loose coupling to ViewModel (not until runtime if possible) • ViewModel can expose individual model properties or model as a whole

9. Implementing the Pattern • A ViewModel is just a class that • Wraps one or more domain models • Provides property notification • Provides validation notification (optional) • Exposes bindable properties (or model) • Contains commanding behavior • Can be tested completely independent of the view • Can fire events back to the view

10. Connecting to View • ViewModel class becomes the “DataContext” of the View • Window or UserControl • Can be set anywhere convenient • View can optionally hook into ViewModel events • Good for view navigation

11. Implementing the MVVM Pattern Demo

12. Commanding • XAML Technology • Not specifically MVVM-related • Works great with MVVM • Command classes • Inherit ICommand • Used with implementers of ICommandSource • Provide execution and determination of execution

13. Commanding Command Basics Demo

14. Commanding in MVVM • Sometimes a command needs access to ViewModel state • Saving of data entered by user • Command classes don’t “belong” to a ViewModel • Need way to hook classes together • Command execution needs to access VM state

15. Commanding in MVVM • Technique 1: • Receive copy of ViewModel into command constructor • Technique 2: • Use Delegate/Relay Command pattern • Allows passing of method pointers into command • Methods reside in ViewModel • Which technique is used depends on command reusability necessities

16. Commanding Commands in MVVM Demo

17. Putting It All Together • Think in State-Driven terms • If View has requirement, ask: • What state and behavior does the ViewModel have to expose in order to satisfy the requirement? • Exercise • Provide a view with a label to be displayed in one of two colors • Provide two buttons used to alter the colors of the label • Enable or disable the buttons accordingly when not useful • Allow for proper unit testing

18. Before & After MVVM BEFORE • View shows label and buttons • Button click events change color of label • Button click events disable button just clicked and enable other button AFTER • View shows labels and buttons • View bound to ViewModel • Label color bound to property • Buttons bound to commands • Command argument provides color • Command execution changes color property • Command determination depends on current color

19. MVVM Exercise Before & After MVVM DEMO

20. Unit Testing • ViewModel is totally decoupled from View • Has no dependency on View class • Can even reside in separate assembly • Can be instantiated like regular class • Unit test can test properties (if needed) • Unit test can set state and call upon command execution

21. Unit Testing Testing the MVVM Exercise DEMO

22. ViewModel-First • Views contain other Views • Same hierarchy for ViewModels • ViewModel exposes other ViewModels as state • Commands cause ViewModel “flipping” • Data Templates provide VM-V mapping • Silverlight requires a Type-Converter technique • Can concentrate on the logic of what ViewModel to use when and why – independent of actual View that will show

23. View Switching ViewModel-First Technique DEMO

24. Where to next? • Further technologies intertwined with MVVM • Type Converters • Validation Techniques • Design-Time Data • Dependency Injection • Frameworks

25. Frameworks ObjectBase Core-Framework Relay Command ModelBase ViewModelBase Page Conductors Validation Rules TabbedViewModel ToolViewModel DialogViewModel RibbonTab-ViewModel Type Converters Undoable-ViewModel SaveableTabbed-ViewModel Event Argument Classes Enums Customer-ViewModel CustomerProfile-ViewModel Domain-Framework View Bases CustomerGenInfo-ViewModel CustomerBilling-ViewModel CustomerOrders-ViewModel

26. Frameworks • MVVM Foundation • MVVM Light • Caliburn • CSLA • Prism • Refraction

27. Finalizer • ViewModels provide a great binding source for XAML views • Decoupleness allows easy testing • Can set up ViewModel inheritance chains for commonly used state or behavior • Not possible with code-behind • Much cleaner design • Take the time to setup MVVM – it’ll be worth it • Use or build a framework – at minimum, a base layer

28. Finalizer • Let your ViewModel evolve naturally • Think about ViewModel inheritance where applicable • Don’t concentrate on code-behind elimination • It will happen naturally and eventually • In most cases, you may start out never using code-behind • Don’t forget your unit tests • Should have one unit test per-ViewModel

29. References • Josh Smith’s Blog • http://joshsmithonwpf.wordpress.com/ • In the Box – MVVM Training • Karl Shifflett • http://karlshifflett.wordpress.com/2010/11/07/in-the-box-ndash-mvvm-training/ • Full kudos for the MVVM Before/After exercise • TONS of MVVM stuff on the web

30. DEV Track Resources • http://www.microsoft.com/visualstudio • http://www.microsoft.com/visualstudio/en-us/lightswitch • http://www.microsoft.com/expression/ • http://blogs.msdn.com/b/somasegar/ • http://blogs.msdn.com/b/bharry/ • http://www.microsoft.com/sqlserver/en/us/default.aspx • http://www.facebook.com/visualstudio

31. Resources • Connect. Share. Discuss. http://northamerica.msteched.com Learning • Sessions On-Demand & Community • Microsoft Certification & Training Resources www.microsoft.com/teched www.microsoft.com/learning • Resources for IT Professionals • Resources for Developers http://microsoft.com/technet http://microsoft.com/msdn

32. Complete an evaluation on CommNet and enter to win!

34. Thank You For Attending! Stay in touch… Miguel A. Castro miguel.castro@idesign.net @miguelcastro67 www.dotnetdude.com