XAML getting you down? Tired of the repetition of trial by error WPF or Silverlight development? If you’re not using Expression Blend to build your XAML, you’re doing it all wrong. Let’s take a look at the common pitfalls that new Silverlight developers fall into that make their code unblendable, and then leverage the patterns and techniques that allow us to unlock the virtues of Expression Blend. Testability, blendability, inner peace and maintainability are just 1 hour away

1. Blendability Barry Gervin bgervin@objectsharp.com ObjectSharp, Founding Partner www.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 Tooling Design Time Attributes, Sample Data, Visual State Manager

15. XML Data Source Attractive option for designers, but... Generates unique syntax Difficult to move to CLR object binding.

16. Practices Techniques Data Binding Model Concerns (Change Notification) MVVM Value Converters Control Templates Triggers, Actions & Behaviours Source Code Management

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

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

19. Model-View-ViewModel Pattern created by John Gossman from WPF team Inspired by MVC, MVP & Martin Fowler’s PresentationModel pattern Excellent choice for Bindability Lots of evolution, popularity, frameworks

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

22. EF/L2S Entity

23. DTO,

24. WCF ProxyDomain / Service / Repository

25. With Model-View-Presenter View Model /Business Layer Presenter Selection Save

26. With Model-View-ViewModel View Model / Business Layer ViewModel {Binding} Selection {Binding} Save {Binding}

27. ViewModel Construction publicpartialclassMainView : 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 Demo Invoking Actions, Update the UI

30. ViewModel Instantiation View Constructor Dependency Injection XAML (Easiest Blendability) ViewModelLocator Service

32. Composite WPF (Prism)

33. MVVM Foundation

34. MVVM Light Toolkit

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

37. Control Templates Expressing Intention

38. Interactivity without Code Silverlight 2 Storyboards with Animations, triggered playback Interactive Controls Data Bindings Data Templates ...and code, frequently common code

39. Interactivity without Code Silverlight 3 & 4 Triggers & Actions (a la WPF) Action = Object that is invoked to perform operation Change Property Open Window Trigger = Event that causes some behaviour Clicked Timer

40. Interactivity without Code Silverlight 3 & 4 Behaviours Self-Contained Reusable “snippets” of interactivity code, Trigger + Action? Assigned to art board content Works in Blend Excellent for Prototyping AND Production

41. Behaviours Inherit from Behaviour<T> Override OnAttached <T> AssociatedObject programmatically add xaml, storyboards, etc. Assign event handlers Implement Event Handlers (i.e. Triggers) Begin Storyboard Set Propertys, etc.

42. Behaviours Add interactivity without code.

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

44. Custom Behaviour publicclassInverseColorClickBehavior : 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!

45. Blend Design Time Support Category Support in Asset Library Categories in Asset Library using a “MetadataStore” Icons PNG image as Embedded Resource and naming in a specific format:Namespace.ControlName.[Expression].[small|medium|etc].png “Installing” Behaviors COPY TO %ProgramFiles%icrosoft Expressionlend 3ibrariesilverlight3.0

46. Issues “How do I turn a sketchflowprototype into production application?” You DON’T want to do this You DO want to create multiple prototypes You DO want to take the best of each You DO want to use XAML elements via Copy & Paste.

47. Counter Points “I don’t use ____ instead of blend for the generation of UI elements into XAML.” Lots of code-behind Old School, pre-xaml education Unfortunate Anti-Pattern

48. Takeaways Work towards incorporating Design process throughout lifecycle. Enable that with tools & practices. Don’t give up to easy, but don’t be a purist either!

49. Resources Expressionblend. Codeplex.com Expression Blend Design Gallery Behaviours Samples Themes

50. Thanks to our contributors