Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WPF with MVVM: From the Trenches

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

  • Login to see the comments

WPF with MVVM: From the Trenches

  1. 1. WPF with MVVM: From the Trenches<br />
  2. 2. Brent Edwards<br />Senior Consultant with Magenic<br /><br />@brentledwards<br /><br />
  3. 3. Why ‘From the Trenches’?<br />
  4. 4. What We Will Cover<br /><ul><li>What is MVVM?
  5. 5. Cool WPF concepts
  6. 6. What is it?
  7. 7. Why is it cool?
  8. 8. How is it used?
  9. 9. Helpful tricks to make life easier
  10. 10. Useful tools that make debugging suck less
  11. 11. Develop sample app as we go</li></li></ul><li>What is MVVM?<br />
  12. 12. What is MVVM?<br />Model<br />Business logic<br />Business Object<br />View<br />Presentation<br />XAML<br />View Model<br />Functionality<br />Model for the View<br />
  13. 13. Why is MVVM Cool?<br />Separates Presentation from Functionality<br />Promotes testability<br />Works great with Data Binding<br />Easy collaboration with Designers<br />No code-behinds<br />
  14. 14. Cost of MVVM<br />No built in IDE support<br />All interactions must be manually wired up<br />New and shiny, but fragmented<br />Lots of different frameworks<br />Lots of different opinions<br />
  15. 15. Cool WPF Concepts<br />
  16. 16. DataContext<br />What is it?<br />A way to give elements a scope for data binding<br />Why is it cool?<br />Makes it easy to bind controls<br />Can be static or dynamic<br />
  17. 17. DataContext<br />How is it used?<br />Statically<br />OR<br />
  18. 18. DataContext<br />How is it used?<br />Dynamically<br />From code<br />
  19. 19. Data Binding<br />What is it?<br />A way for applications to present and interact with data<br />Why is it cool?<br />Simple syntax to set up, WPF does the rest<br />
  20. 20. Data Binding<br />How is it used?<br />Binding syntax in XAML<br />Two Way (Default Behavior)<br />Implement INotifyPropertyChanged on view model or business object<br />
  21. 21. Commanding<br />What is it?<br />A way to bind commands to a DataContext<br />Why is it cool?<br />Can wire UI events to fire commands on View Model<br />Can pass parameters via binding<br />
  22. 22. Commanding<br />How is it used?<br />Expose ICommand property on View Model<br />Assign a command to the property<br />Prism’s DelegateCommand<br />Bind to command in XAML<br />
  23. 23. Commanding<br />[Demo]<br />
  24. 24. Data Templates<br />What is it?<br />A way to define the presentation of your data<br />Why is it cool?<br />Can give a ‘look’ to your business objects<br />You can leverage data binding<br />
  25. 25. Data Templates<br />How is it used?<br />
  26. 26. Data Templates<br />[Demo]<br />
  27. 27. Data Triggers<br />What is it?<br />Set style properties based on data values<br />Why is it cool?<br />Change presentation based on data properties<br />
  28. 28. Data Triggers<br />How is it used?<br />
  29. 29. Data Triggers<br />[Demo]<br />
  30. 30. Value Converters<br />What is it?<br />Converts data value to format required by UI<br />Why is it cool?<br />Easy way to convert DateTime, Decimals, Integers or Booleans<br />
  31. 31. Value Converters<br />How is it used?<br />Implement IValueConverter<br />Convert, ConvertBack<br />Include in Resources with a Key<br />Use it!<br />
  32. 32. Value Converters<br />[Demo]<br />
  33. 33. Data Template Selectors<br />What is it?<br />Select DataTemplate based on custom logic<br />Why is it cool<br />Select DataTemplate based on properties on view models or business objects<br />Can be unit tested<br />
  34. 34. Data Template Selectors<br />How is it used?<br />Inherit from DataTemplateSelector<br />Add properties for the DataTemplates to select from<br />Override SelectTemplate<br />Add logic to actually select the template<br />Add DataTemplates to XAML<br />
  35. 35. Data Template Selectors<br />How is it used?<br />Add DataTemplateSelector to XAML<br />Use it!<br />ContentControl<br />ListView<br />ListBox<br />
  36. 36. Data Template Selectors<br />[Demo]<br />
  37. 37. Helpful Tricks<br />[To make life easier]<br />
  38. 38. Event Aggregator / Message Bus<br />What is it?<br />Centralized location to route [Events | Messages]<br />Why is it cool?<br />Great way to decouple view models<br />Makes testing a breeze<br />
  39. 39. Event Aggregator / Message Bus<br />How is it used?<br />Use an IOC container<br />Castle Windsor<br />Implement as a Singleton<br />Static property<br />Important that all calls route through same instance<br />Options<br />Prism’s Event Aggregator<br />Roll your own<br />
  40. 40. Event Aggregator / Message Bus<br />[Demo]<br />
  41. 41. Navigation<br />The Problem<br />Views coupled with other Views<br />View Models know about Views<br />No separation of concerns<br />No testability<br />
  42. 42. Navigation<br />A Solution<br />Some Convention, Some Configuration<br />Leverage [Event Aggregator | Message Bus]<br />Leverage IOC<br />Castle Windsor<br />Leverage Reflection<br />
  43. 43. Navigation<br />Convention<br />View Models all have default constructors<br />View Models have an optional Load method with 0 or 1 argument(s)<br />
  44. 44. Navigation<br />Configuration – Key Players<br />ViewTargets<br />ViewConfiguration<br />ViewController<br />ViewResult<br />ViewFactory<br />ContainerConfiguration<br />
  45. 45. Navigation<br />Configuration - ViewTargets<br />Enumerates the views which can be navigated to<br />The glue that sticks everything together<br />
  46. 46. Navigation<br />Configuration - ViewConfiguration<br />Pairs a View with an optional View Model<br />Associated to a ViewTarget in the IOC Container<br />
  47. 47. Navigation<br />Configuration - ViewController<br />The only object that interacts with the UI framework<br />Listens for [Events | Messages] related to showing views<br />Gives view details to ViewFactory to be built<br />
  48. 48. Navigation<br />Configuration – ViewFactory<br />Resolves ViewConfiguration for the requested View<br />Dynamically creates the View and View Model<br />Loads the View Model with optional params using reflection<br />Gives back a ViewResult<br />
  49. 49. Navigation<br />Configuration – ViewResult<br />Result of the dynamic build process<br />Has the built View along with any relevant data<br />Used by ViewController to show the View<br />
  50. 50. Navigation<br />[Demo]<br />
  51. 51. Modal Dialogs<br />Problem<br />Modal dialogs stall tests<br />[MessageBox| OpenFileDialog| PrintDialog]<br />How can you leverage these and keep view models testable?<br />
  52. 52. Modal Dialogs<br />Option 1<br />Wrap them up!<br />Define interface<br />IMessageShower<br />Define implementation<br />MessageShower<br />Wire up with IOC Container<br />Castle Windsor<br />Test with mocks<br />RhinoMocks<br />
  53. 53. Modal Dialogs<br />Option 2<br />[Event Aggregator | Message Bus]<br />Create [Events | Messages]<br />Create class listen for [Events | Messages] that get published<br />Test by verifying [Events | Messages] are published<br />Good for “Fire and Forget”<br />Breaks down if results are returned<br />
  54. 54. Modal Dialogs<br />[Demo]<br />
  55. 55. Magic with ContentControl<br />The Problem<br />Editable View and Read Only View<br />Views have identical layout<br />TextBox in for Editable<br />Label for Read Only<br />
  56. 56. Magic with ContentControl<br />A Solution – ContentControl!<br />DataTriggers<br />Give different presentation depending on data values<br />Works dynamically<br />DataTemplateSelector<br />Select which DataTemplate to use<br />Only works when initially bound<br />
  57. 57. Magic with ContentControl<br />[Demo]<br />
  58. 58. Useful Tools<br />[To make debugging suck less]<br />
  59. 59. Snoop<br />Inspects visual tree<br />Shows properties<br />Shows events<br />Can show 3D representation<br />
  60. 60. Snoop<br />[Demo]<br />
  61. 61. Output Window<br />Shows binding expression errors<br />Could be in immediate window instead<br />
  62. 62. Output Window<br />[Demo]<br />
  63. 63. Valuable Links<br />Josh Smith<br /><br />Advanced MVVM – Book<br />Snoop<br /><br />Prism<br /><br />
  64. 64. Questions?<br />
  65. 65. Brent Edwards<br />Senior Consultant with Magenic<br /><br />@brentledwards<br /><br />