Programming with MVVM

Programming with MVVM

Miguel A. CastroArchitectIDesign

DEV206

Agenda

XAML Data BindingWhat is MVVMImplementing the Pattern (and sticking to it)Adding CommandingUnit TestingAdvanced Features

Data Binding

Extremely powerful with XAMLEverything binds (to everything else)Every tag has DataContext property

Value becomes underlying binding sourceProvides values from tag & down visual tree

Underlying binding object should implement INotifyPropertyChanged interfaceXAML binding attributes provide additional characteristicsMode, UpdateSourceTrigger, Converter

XAML Data Binding<Window>

<Grid><Label Content=“{Binding Name}”

Width=“{Binding Size}” /> ...…………………………………………………………………………………this.DataContext = myObj;

where myObj contains:string Namedouble Size

What is MVVM?

Pattern made specially for bindingClass provides the binding source for the entire viewEncapsulates logic for the view

Provides state and behaviorLoosely coupled to the view

What is MVVM?

Data Access Layer

Domain Layer

ViewModel Layer

View (XAML) Layer

Data Storage Layer

Goals of MVVM

Make the view completely “State Driven”Fill in for model short-comingsDecouple state and behavior from viewProvide ability to unit test

Reduction or even elimination of the code-behind class

Rules of MVVM

ViewModel should have NO knowledge of the ViewFor 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 thatWraps one or more domain modelsProvides property notificationProvides validation notification (optional)Exposes bindable properties (or model)Contains commanding behaviorCan be tested completely independent of the viewCan fire events back to the view

Connecting to View

ViewModel class becomes the “DataContext” of the ViewWindow 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 TechnologyNot specifically MVVM-related

Works great with MVVMCommand classes

Inherit ICommandUsed with implementers of ICommandSource

Provide execution and determination of execution

Commanding

Command Basics

Demo

Commanding in MVVM

Sometimes a command needs access to ViewModel stateSaving of data entered by user

Command classes don’t “belong” to a ViewModelNeed way to hook classes together

Command execution needs to access VM state

Commanding in MVVM

Technique 1:Receive copy of ViewModel into command constructor

Technique 2:Use Delegate/Relay Command patternAllows 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 termsIf View has requirement, ask:

What state and behavior does the ViewModel have to expose in order to satisfy the requirement?

ExerciseProvide a view with a label to be displayed in one of two colorsProvide two buttons used to alter the colors of the labelEnable or disable the buttons accordingly when not usefulAllow for proper unit testing

Before & After MVVM

BEFORE

View shows label and buttonsButton click events change color of labelButton click events disable button just clicked and enable other button

AFTER

View shows labels and buttonsView bound to ViewModelLabel color bound to propertyButtons bound to commandsCommand argument provides colorCommand execution changes color propertyCommand determination depends on current color

MVVM Exercise

Before & After MVVM

DEMO

Unit Testing

ViewModel is totally decoupled from ViewHas no dependency on View classCan even reside in separate assemblyCan be instantiated like regular classUnit test can test properties (if needed)Unit test can set state and call upon command execution

Unit Testing

Testing the MVVM Exercise

DEMO

ViewModel-First

Views contain other ViewsSame hierarchy for ViewModels

ViewModel exposes other ViewModels as stateCommands cause ViewModel “flipping”Data Templates provide VM-V mapping

Silverlight requires a Type-Converter techniqueCan concentrate on the logic of what ViewModel to use when and why – independent of actual View that will show

View Switching

ViewModel-First Technique

DEMO

Where to next?

Further technologies intertwined with MVVMType ConvertersValidation TechniquesDesign-Time DataDependency InjectionFrameworks

Frameworks

Domain-Framework

Core-FrameworkViewModelBase

Customer-ViewModel

TabbedViewModel DialogViewModelToolViewModel RibbonTab-

ViewModel

Undoable-ViewModel

SaveableTabbed-ViewModel

Page Conductors

Validation Rules

View Bases

Type Converters

Event Argument Classes

Enums

CustomerGenInfo-ViewModel

CustomerProfile-ViewModel

CustomerOrders-ViewModel

CustomerBilling-ViewModel

Relay Command

ModelBase

ObjectBase

Frameworks

MVVM FoundationMVVM LightCaliburnCSLAPrismRefraction

Finalizer

ViewModels provide a great binding source for XAML viewsDecoupleness allows easy testingCan set up ViewModel inheritance chains for commonly used state or behavior

Not possible with code-behindMuch cleaner designTake the time to setup MVVM – it’ll be worth itUse or build a framework – at minimum, a base layer

Finalizer

Let your ViewModel evolve naturallyThink about ViewModel inheritance where applicableDon’t concentrate on code-behind elimination

It will happen naturally and eventuallyIn most cases, you may start out never using code-behind

Don’t forget your unit testsShould have one unit test per-ViewModel

References

Josh Smith’s Bloghttp://joshsmithonwpf.wordpress.com/

In the Box – MVVM TrainingKarl Shiffletthttp://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.aspxhttp://www.facebook.com/visualstudio

Resources

www.microsoft.com/teched

Sessions On-Demand & Community Microsoft Certification & Training Resources

Resources for IT Professionals Resources for Developers

www.microsoft.com/learning

http://microsoft.com/technet http://microsoft.com/msdn

Learning

http://northamerica.msteched.com

Connect. Share. Discuss.

Complete an evaluation on CommNet and enter to win!

Scan the Tag to evaluate this session now on myTech•Ed Mobile

Miguel A. Castro

miguel.castro@idesign.net@miguelcastro67www.dotnetdude.com

Stay in touch…