Miguel A. Castro Architect IDesign 9/21/2018 12:03 AM DEV206 Programming with MVVM Miguel A. Castro Architect IDesign © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

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

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

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

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

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

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

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

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

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

Implementing the MVVM Pattern Demo

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

Commanding Command Basics Demo

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

Commanding in MVVM Technique 1: Technique 2: 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

Commanding Commands in MVVM Demo

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

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

MVVM Exercise Before & After MVVM DEMO

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

Testing the MVVM Exercise Unit Testing Testing the MVVM Exercise DEMO

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

ViewModel-First Technique View Switching ViewModel-First Technique DEMO

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

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

Frameworks MVVM Foundation MVVM Light Caliburn CSLA Prism Refraction

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

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

References Josh Smith’s Blog In the Box – MVVM Training 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

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

Resources Learning http://northamerica.msteched.com Tech Ed North America 2010 9/21/2018 12:03 AM 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 © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Complete an evaluation on CommNet and enter to win! Tech Ed North America 2010 9/21/2018 12:03 AM Complete an evaluation on CommNet and enter to win! © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Tech Ed North America 2010 9/21/2018 12:03 AM © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

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