The document presents an in-depth exploration of the Model-View-ViewModel (MVVM) pattern in WPF applications, highlighting its benefits such as separation of presentation from functionality, promoting testability, and facilitating collaboration. It discusses various WPF concepts like DataContext, data binding, commanding, data templates, and navigation, along with helpful tips and tools for effective development and debugging. The document also includes practical demonstrations and useful resources for further learning.

1. WPF with MVVM: From the Trenches

2. Brent EdwardsSenior Consultant with MagenicBrentE@magenic.com@brentledwardsbrentedwards.net

3. Why ‘From the Trenches’?

4. What We Will CoverWhat is MVVM?

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

11. Develop sample app as we goWhat is MVVM?

12. What is MVVM?ModelBusiness logicBusiness ObjectViewPresentationXAMLView ModelFunctionalityModel for the View

13. Why is MVVM Cool?Separates Presentation from FunctionalityPromotes testabilityWorks great with Data BindingEasy collaboration with DesignersNo code-behinds

14. Cost of MVVMNo built in IDE supportAll interactions must be manually wired upNew and shiny, but fragmentedLots of different frameworksLots of different opinions

15. Cool WPF Concepts

16. DataContextWhat is it?A way to give elements a scope for data bindingWhy is it cool?Makes it easy to bind controlsCan be static or dynamic

17. DataContextHow is it used?StaticallyOR

18. DataContextHow is it used?DynamicallyFrom code

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

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

21. CommandingWhat is it?A way to bind commands to a DataContextWhy is it cool?Can wire UI events to fire commands on View ModelCan pass parameters via binding

22. CommandingHow is it used?Expose ICommand property on View ModelAssign a command to the propertyPrism’s DelegateCommandBind to command in XAML

23. Commanding[Demo]

24. Data TemplatesWhat is it?A way to define the presentation of your dataWhy is it cool?Can give a ‘look’ to your business objectsYou can leverage data binding

25. Data TemplatesHow is it used?

26. Data Templates[Demo]

27. Data TriggersWhat is it?Set style properties based on data valuesWhy is it cool?Change presentation based on data properties

28. Data TriggersHow is it used?

29. Data Triggers[Demo]

30. Value ConvertersWhat is it?Converts data value to format required by UIWhy is it cool?Easy way to convert DateTime, Decimals, Integers or Booleans

31. Value ConvertersHow is it used?Implement IValueConverterConvert, ConvertBackInclude in Resources with a KeyUse it!

32. Value Converters[Demo]

33. Data Template SelectorsWhat is it?Select DataTemplate based on custom logicWhy is it coolSelect DataTemplate based on properties on view models or business objectsCan be unit tested

34. Data Template SelectorsHow is it used?Inherit from DataTemplateSelectorAdd properties for the DataTemplates to select fromOverride SelectTemplateAdd logic to actually select the templateAdd DataTemplates to XAML

35. Data Template SelectorsHow is it used?Add DataTemplateSelector to XAMLUse it!ContentControlListViewListBox

36. Data Template Selectors[Demo]

37. Helpful Tricks[To make life easier]

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

39. Event Aggregator / Message BusHow is it used?Use an IOC containerCastle WindsorImplement as a SingletonStatic propertyImportant that all calls route through same instanceOptionsPrism’s Event AggregatorRoll your own

40. Event Aggregator / Message Bus[Demo]

41. NavigationThe ProblemViews coupled with other ViewsView Models know about ViewsNo separation of concernsNo testability

42. NavigationA SolutionSome Convention, Some ConfigurationLeverage [Event Aggregator | Message Bus]Leverage IOCCastle WindsorLeverage Reflection

43. NavigationConventionView Models all have default constructorsView Models have an optional Load method with 0 or 1 argument(s)

44. NavigationConfiguration – Key PlayersViewTargetsViewConfigurationViewControllerViewResultViewFactoryContainerConfiguration

45. NavigationConfiguration - ViewTargetsEnumerates the views which can be navigated toThe glue that sticks everything together

46. NavigationConfiguration - ViewConfigurationPairs a View with an optional View ModelAssociated to a ViewTarget in the IOC Container

47. NavigationConfiguration - ViewControllerThe only object that interacts with the UI frameworkListens for [Events | Messages] related to showing viewsGives view details to ViewFactory to be built

48. NavigationConfiguration – ViewFactoryResolves ViewConfiguration for the requested ViewDynamically creates the View and View ModelLoads the View Model with optional params using reflectionGives back a ViewResult

49. NavigationConfiguration – ViewResultResult of the dynamic build processHas the built View along with any relevant dataUsed by ViewController to show the View

50. Navigation[Demo]

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

52. Modal DialogsOption 1Wrap them up!Define interfaceIMessageShowerDefine implementationMessageShowerWire up with IOC ContainerCastle WindsorTest with mocksRhinoMocks

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

54. Modal Dialogs[Demo]

55. Magic with ContentControlThe ProblemEditable View and Read Only ViewViews have identical layoutTextBox in for EditableLabel for Read Only

56. Magic with ContentControlA Solution – ContentControl!DataTriggersGive different presentation depending on data valuesWorks dynamicallyDataTemplateSelectorSelect which DataTemplate to useOnly works when initially bound

57. Magic with ContentControl[Demo]

58. Useful Tools[To make debugging suck less]

59. SnoopInspects visual treeShows propertiesShows eventsCan show 3D representation

60. Snoop[Demo]

61. Output WindowShows binding expression errorsCould be in immediate window instead

62. Output Window[Demo]

63. Valuable LinksJosh Smithhttp://joshsmithonwpf.wordpress.com/Advanced MVVM – BookSnoophttp://snoopwpf.codeplex.com/Prismhttp://compositewpf.codeplex.com/Wikipage

64. Questions?

65. Brent EdwardsSenior Consultant with MagenicBrentE@magenic.com@brentledwardsbrentedwards.net