Cool concepts, tips and tricks that will help you leverage MVVM with WPF. This is the slide deck for my code-heavy presentation.

1. WPF with MVVM: From the Trenches

2. Brent Edwards Senior Consultant with Magenic BrentE@magenic.com @brentledwards brentedwards.net

3. Why ‘From the Trenches’?

5. Cool WPF concepts

6. What is it?

7. Why is it cool?

8. How is it used?

9. Helpful tricks to make life easier

10. Useful tools that make debugging suck less

12. What is MVVM? Model Business logic Business Object View Presentation XAML View Model Functionality Model for the View

13. Why is MVVM Cool? Separates Presentation from Functionality Promotes testability Works great with Data Binding Easy collaboration with Designers No code-behinds

14. Cost of MVVM No built in IDE support All interactions must be manually wired up New and shiny, but fragmented Lots of different frameworks Lots of different opinions

15. Cool WPF Concepts

16. DataContext What is it? A way to give elements a scope for data binding Why is it cool? Makes it easy to bind controls Can be static or dynamic

17. DataContext How is it used? Statically OR

18. DataContext How is it used? Dynamically From code

19. Data Binding What is it? A way for applications to present and interact with data Why is it cool? Simple syntax to set up, WPF does the rest

20. Data Binding How is it used? Binding syntax in XAML Two Way (Default Behavior) Implement INotifyPropertyChanged on view model or business object

21. Commanding What is it? A way to bind commands to a DataContext Why is it cool? Can wire UI events to fire commands on View Model Can pass parameters via binding

22. Commanding How is it used? Expose ICommand property on View Model Assign a command to the property Prism’s DelegateCommand Bind to command in XAML

23. Commanding [Demo]

24. Data Templates What is it? A way to define the presentation of your data Why is it cool? Can give a ‘look’ to your business objects You can leverage data binding

25. Data Templates How is it used?

26. Data Templates [Demo]

27. Data Triggers What is it? Set style properties based on data values Why is it cool? Change presentation based on data properties

28. Data Triggers How is it used?

29. Data Triggers [Demo]

30. Value Converters What is it? Converts data value to format required by UI Why is it cool? Easy way to convert DateTime, Decimals, Integers or Booleans

31. Value Converters How is it used? Implement IValueConverter Convert, ConvertBack Include in Resources with a Key Use it!

32. Value Converters [Demo]

33. Data Template Selectors What is it? Select DataTemplate based on custom logic Why is it cool Select DataTemplate based on properties on view models or business objects Can be unit tested

34. Data Template Selectors How is it used? Inherit from DataTemplateSelector Add properties for the DataTemplates to select from Override SelectTemplate Add logic to actually select the template Add DataTemplates to XAML

35. Data Template Selectors How is it used? Add DataTemplateSelector to XAML Use it! ContentControl ListView ListBox

36. Data Template Selectors [Demo]

37. Helpful Tricks [To make life easier]

38. Event Aggregator / Message Bus What is it? Centralized location to route [Events | Messages] Why is it cool? Great way to decouple view models Makes testing a breeze

39. Event Aggregator / Message Bus How is it used? Use an IOC container Castle Windsor Implement as a Singleton Static property Important that all calls route through same instance Options Prism’s Event Aggregator Roll your own

40. Event Aggregator / Message Bus [Demo]

41. Navigation The Problem Views coupled with other Views View Models know about Views No separation of concerns No testability

42. Navigation A Solution Some Convention, Some Configuration Leverage [Event Aggregator | Message Bus] Leverage IOC Castle Windsor Leverage Reflection

43. Navigation Convention View Models all have default constructors View Models have an optional Load method with 0 or 1 argument(s)

44. Navigation Configuration – Key Players ViewTargets ViewConfiguration ViewController ViewResult ViewFactory ContainerConfiguration

45. Navigation Configuration - ViewTargets Enumerates the views which can be navigated to The glue that sticks everything together

46. Navigation Configuration - ViewConfiguration Pairs a View with an optional View Model Associated to a ViewTarget in the IOC Container

47. Navigation Configuration - ViewController The only object that interacts with the UI framework Listens for [Events | Messages] related to showing views Gives view details to ViewFactory to be built

48. Navigation Configuration – ViewFactory Resolves ViewConfiguration for the requested View Dynamically creates the View and View Model Loads the View Model with optional params using reflection Gives back a ViewResult

49. Navigation Configuration – ViewResult Result of the dynamic build process Has the built View along with any relevant data Used by ViewController to show the View

50. Navigation [Demo]

51. Modal Dialogs Problem Modal dialogs stall tests [MessageBox| OpenFileDialog| PrintDialog] How can you leverage these and keep view models testable?

52. Modal Dialogs Option 1 Wrap them up! Define interface IMessageShower Define implementation MessageShower Wire up with IOC Container Castle Windsor Test with mocks RhinoMocks

53. Modal Dialogs Option 2 [Event Aggregator | Message Bus] Create [Events | Messages] Create class listen for [Events | Messages] that get published Test by verifying [Events | Messages] are published Good for “Fire and Forget” Breaks down if results are returned

54. Modal Dialogs [Demo]

55. Magic with ContentControl The Problem Editable View and Read Only View Views have identical layout TextBox in for Editable Label for Read Only

56. Magic with ContentControl A Solution – ContentControl! DataTriggers Give different presentation depending on data values Works dynamically DataTemplateSelector Select which DataTemplate to use Only works when initially bound

57. Magic with ContentControl [Demo]

58. Useful Tools [To make debugging suck less]

59. Snoop Inspects visual tree Shows properties Shows events Can show 3D representation

60. Snoop [Demo]

61. Output Window Shows binding expression errors Could be in immediate window instead

62. Output Window [Demo]

63. Valuable Links Josh Smith http://joshsmithonwpf.wordpress.com/ Advanced MVVM – Book Snoop http://snoopwpf.codeplex.com/ Prism http://compositewpf.codeplex.com/Wikipage

64. Questions?

65. Brent Edwards Senior Consultant with Magenic BrentE@magenic.com @brentledwards brentedwards.net