dev321. demo rule: any slide about ux must be charcoal gray or black

Advanced Blend for Developers: Integrating MVVM and Designability

Pete Brown (@pete_brown)Developer Community NinjaMicrosofthttp://10rem.net

DEV321

demo

Example Application

UX is part of the development process. It’s in the same position testing was 10 years ago. Now, most everyone realizes testing is a key part of the process.

Every application has a UX designer, even if they’re not calling themselves that. Someone is creating the user experience.

Rule: Any slide about UX must be charcoal gray or black

MVVM In a Single Slide

MVVM: Model, View, ViewModel

View ViewModel Model

Typical Parts of a full MVVM Solution

View ViewModel

Model

Services *

VM Locator

Service Locator

TestsUI

Tests

Commands

Binding

Method Invoke

Messaging

Events

* Not necessarily network services. “Services” used in a broader sense.

How Blend Fits In

Binding, Commands, BehaviorsDirectly support MVVM scenarios

Design-Time DataUsable with and without MVVM

User ExperienceAdd some texture to your applicationsQuickly design UIModify visual styles and templates

Blend itself was written using the MVVM pattern

Architecting for Blendability/Designability

Separate your concernsAbstract away external dependencies

ServicesDatabases

Mock anything required for the UI to functionOptionally use IOC and/or Service Locators to help resolve dependenciesOptionally use design-time data and design time data context

A highly testable and well-architected application!

bonus

!

Binding

Binding for dataEliminates most “lhs = rhs” code-behindMore design-friendly

Source of data inherited from parents in the tree

Enables easier swapping of data sourcesTypically the ViewModel in MVVM

Not just for “Data”Linking controls to each other without code

View ViewModelBinding

Design-Time/Sample Data

Created in XAML or via Blend toolingIn use:

d:DataContext and d:DesignDataUse to provide Blend with both shape and sample data

d:DataContext=“{d:DesignData Source=SomeData.xaml}”Sets design-time data context to a file with sample data

Design-Time/Sample Data

Good for initial prototyping and View-first designGreat for SketchFlow as well

Differing opinions as to its usefulness over the long term of a project

Often, an IoC approach or VM Locator is more robust

Sharing data with unit tests can be challengingIf you desire the same data in the unit test as in the UI designer

Includes data-only, not methods/commandsMust be maintained to stay useful

demo

Binding and Sample Data

Design-Friendly Binding

d:DataContext and d:DesignInstanceUse to tell Blend the shape of the data you will bind toTypically a ViewModelUse IsDesignTimeCreatable to enable execution and data

d:DataContext=“{d:DesignInstance local:MainViewModel, IsDesignTimeCreatable=True}”

Sets design-time data context to a ViewModel and instantiates it to populate with data

Works in Blend and VS2010

demo

Design-Time Friendly Binding

Behaviors/Actions/Triggers

Packaged functionalityAugments UI Layer

Interacts with other UI elementsInteracts with ViewModelProvides UI functionality

Tons of free community-written behaviors

gallery.expression.microsoft.com

CallMethodAction supports MVVM

Third-party behaviors like EventToCommand as well

View ViewModel

Behaviors

Visual State Manager and MVVM

VSM is a UI constructDiscrete controls have states, but so can viewsDesirable to trigger state changes from ViewModelOptions

Ok: Raise VM event and have code-behind to GoToStateBetter: GoToStateAction behavior, bound to ViewModel

demo

Visual State Manager and Behaviors

Commands

Actions triggered from UIUsually button / menu clicks

Commands typically wired up using binding

Designer-friendlyMVVM-friendlyEliminates code-behind events

In MVVM, commands typically wired to View Model

View ViewModelCommands

Commands

ICommandCanExecute (property)Execute (method)CanExecuteChanged (event)

Supports automatic enabling/disabling of aware controlsTypically use a generic concrete implementation like RoutedCommand or RelayCommand

demo

Commands

Summary

Designing for Blendability/Designability helps keep architecture clean and UX designable

Separate with Binding, Commands, States

Blendability, like good application architecture, isn’t freeChoose data mocking options carefully

Design-time data: less work, but limitedDummy VM: more work, limitation is based only on effort

There is always a DesignerUsing Blend and having your application Blendable will make their work much more efficient and productive

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

© 2011 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.