The document discusses 'blendability', emphasizing the collaboration between developers and designers using Expression Blend, particularly with the MVVM model. It highlights the importance of separation of concerns, data binding, and the use of behaviors and triggers to enhance interactivity without code. The text encourages incorporating design practices throughout the development lifecycle while balancing flexibility and maintainability.

1. BlendabilityBarry Gervinbgervin@objectsharp.comObjectSharp, Founding Partnerwww.ObjectSharp.com/blogs/barry

2. We should...

3. But sometimes we...

4. We Should...

5. But sometimes we...

8. What is “Blendability”?“Ability to work on a project in Expression Blend”“Developers and Designers can work within their own tools, in harmony with each other, throughout the development lifecycle”“Valuing the declaration of intention in our code overthe fine grain control of proceduraloperations.”

9. does it blend?

10. Not Blendable!

12. It Blends!

13. Blendability

14. Demo: Blend ToolingDesign Time Attributes, Sample Data, Visual State Manager

15. XML Data SourceAttractive option for designers, but...Generates unique syntaxDifficult to move to CLR object binding.

16. PracticesTechniquesData BindingModel Concerns (Change Notification)MVVMValue ConvertersControl TemplatesTriggers, Actions & BehavioursSource Code Management

17. Model ConcernspublicstringViewModelProperty { get{ returnthis.viewModelProperty; } set{ this.viewModelProperty = value; this.NotifyPropertyChanged("ViewModelProperty"); } }

18. Model ConcernspublicclassItemCollection : ObservableCollection<Item> { .. }...privateItemCollection _myCollection =newItemCollection(); //make it blend!publicItemCollectionMyCollection{ get { returnthis._myCollection; } }

19. Model-View-ViewModelPattern created by John Gossman from WPF teamInspired by MVC, MVP & Martin Fowler’s PresentationModel patternExcellent choice for BindabilityLots of evolution, popularity, frameworks

20. Why MVVM?Separation of Concerns (UI & Business Logic)Event driven code is not very unit testableViews & View Models don’t have to be changed by changes in each other.Blendability

21. MVVM.DataContextViewViewModelModel{Binding .. }WindowUser ControlPOCO,

22. EF/L2S Entity

23. DTO,

24. WCF ProxyDomain / Service / Repository

25. With Model-View-PresenterViewModel /Business LayerPresenterSelectionSave

26. With Model-View-ViewModelViewModel / Business LayerViewModel{Binding}Selection{Binding}Save{Binding}

27. ViewModel ConstructionpublicpartialclassMainView : UserControl{ publicMainView() { this.DataContext = newMyViewModel(); InitializeComponent(); } }Not very blendable, neither is DI.

28. ViewModel Construction<UserControl.Resources><local:MainViewModelx:Key="MainViewModelDataSource"/></UserControl.Resources><Grid x:Name="LayoutRoot"DataContext="{Binding Source={StaticResourceMainViewModelDataSource}}" d:DataContext="{d:DesignData /SampleData/MainViewModelSampleData.xaml}">Nice!

29. MVVM DemoInvoking Actions, Update the UI

30. ViewModel InstantiationView ConstructorDependency InjectionXAML (Easiest Blendability)ViewModelLocator Service

31. MVVM FrameworksMVVM Toolkit

32. Composite WPF (Prism)

33. MVVM Foundation

34. MVVM Light Toolkit

35. OnyxDefined as part of a binding definition:<TextBox.Background> <Binding Path=“AccountBalance"> <Binding.Converter> <local:BalanceToBrushConverter/> </Binding.Converter> </Binding></TextBox.Background>Blendable, but do you always want to do this?Value Converter in XAML

36. Value Converter vs. View ModelFull Name = LastName + “, “ + FirstNameBetter candidate on the Model or ViewModelAsk yourself...How reusable is this? Will I need to test this as part of the test for the View Model?

37. Control TemplatesExpressing Intention

38. Interactivity without CodeSilverlight 2Storyboards with Animations, triggered playbackInteractive Controls Data BindingsData Templates...and code, frequently common code

39. Interactivity without CodeSilverlight 3 & 4Triggers & Actions (a la WPF)Action = Object that is invoked to perform operation Change PropertyOpen WindowTrigger = Event that causes some behaviourClickedTimer

40. Interactivity without CodeSilverlight 3 & 4BehavioursSelf-ContainedReusable“snippets” of interactivity code, Trigger + Action?Assigned to art board contentWorks in BlendExcellent for Prototyping AND Production

41. BehavioursInherit from Behaviour<T>OverrideOnAttached<T> AssociatedObjectprogrammatically add xaml, storyboards, etc.Assign event handlersImplement Event Handlers (i.e. Triggers)Begin StoryboardSet Propertys, etc.

42. BehavioursAdd interactivity without code.

43. Triggers, Actions & BehavioursTrigger: Event that causes a behaviourAction: Behaviour that is invoked on some trigger.Behaviour: Much more, but think Trigger + Action

44. Custom BehaviourpublicclassInverseColorClickBehavior :Behavior<FrameworkElement>{ protectedoverridevoidOnAttached(){ base.OnAttached(); this.AssociatedObject.MouseLeftButtonDown += newMouseButtonEventHandler( AssociatedObject_MouseLeftButtonDown );}privatevoidAssociatedObject_MouseLeftButtonDown( object sender, MouseButtonEventArgs e ){ this.AssociatedObject.Effect = this.AssociatedObject.Effect == null ? this.AssociatedObject.Effect = this.inverseColor : this.AssociatedObject.Effect = null;}}Determines type of AssociatedObject, and what you can do?Event handlers, customize element.Don’t forget to clean up in Detached!