WPF with MVVM: From the Trenches<br />
Brent Edwards<br />Senior Consultant with Magenic<br />BrentE@magenic.com<br />@brentledwards<br />brentedwards.net<br />
Why ‘From the Trenches’?<br />
What We Will Cover<br /><ul><li>What is MVVM?
Cool WPF concepts
What is it?
Why is it cool?
How is it used?
Helpful tricks to make life easier
Useful tools that make debugging suck less
Develop sample app as we go</li></li></ul><li>What is MVVM?<br />
What is MVVM?<br />Model<br />Business logic<br />Business Object<br />View<br />Presentation<br />XAML<br />View Model<br...
Why is MVVM Cool?<br />Separates Presentation from Functionality<br />Promotes testability<br />Works great with Data Bind...
Cost of MVVM<br />No built in IDE support<br />All interactions must be manually wired up<br />New and shiny, but fragment...
Cool WPF Concepts<br />
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 ...
DataContext<br />How is it used?<br />Statically<br />OR<br />
DataContext<br />How is it used?<br />Dynamically<br />From code<br />
Data Binding<br />What is it?<br />A way for applications to present and interact with data<br />Why is it cool?<br />Simp...
Data Binding<br />How is it used?<br />Binding syntax in XAML<br />Two Way (Default Behavior)<br />Implement INotifyProper...
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 f...
Commanding<br />How is it used?<br />Expose ICommand property on View Model<br />Assign a command to the property<br />Pri...
Commanding<br />[Demo]<br />
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 ‘l...
Data Templates<br />How is it used?<br />
Data Templates<br />[Demo]<br />
Data Triggers<br />What is it?<br />Set style properties based on data values<br />Why is it cool?<br />Change presentatio...
Data Triggers<br />How is it used?<br />
Data Triggers<br />[Demo]<br />
Value Converters<br />What is it?<br />Converts data value to format required by UI<br />Why is it cool?<br />Easy way to ...
Value Converters<br />How is it used?<br />Implement IValueConverter<br />Convert, ConvertBack<br />Include in Resources w...
Value Converters<br />[Demo]<br />
Data Template Selectors<br />What is it?<br />Select DataTemplate based on custom logic<br />Why is it cool<br />Select Da...
Data Template Selectors<br />How is it used?<br />Inherit from DataTemplateSelector<br />Add properties for the DataTempla...
Data Template Selectors<br />How is it used?<br />Add DataTemplateSelector to XAML<br />Use it!<br />ContentControl<br />L...
Data Template Selectors<br />[Demo]<br />
Helpful Tricks<br />[To make life easier]<br />
Event Aggregator / Message Bus<br />What is it?<br />Centralized location to route [Events | Messages]<br />Why is it cool...
Event Aggregator / Message Bus<br />How is it used?<br />Use an IOC container<br />Castle Windsor<br />Implement as a Sing...
Event Aggregator / Message Bus<br />[Demo]<br />
Navigation<br />The Problem<br />Views coupled with other Views<br />View Models know about Views<br />No separation of co...
Navigation<br />A Solution<br />Some Convention, Some Configuration<br />Leverage [Event Aggregator | Message Bus]<br />Le...
Navigation<br />Convention<br />View Models all have default constructors<br />View Models have an optional Load method wi...
Navigation<br />Configuration – Key Players<br />ViewTargets<br />ViewConfiguration<br />ViewController<br />ViewResult<br...
Navigation<br />Configuration - ViewTargets<br />Enumerates the views which can be navigated to<br />The glue that sticks ...
Navigation<br />Configuration - ViewConfiguration<br />Pairs a View with an optional View Model<br />Associated to a ViewT...
Navigation<br />Configuration - ViewController<br />The only object that interacts with the UI framework<br />Listens for ...
Navigation<br />Configuration – ViewFactory<br />Resolves ViewConfiguration for the requested View<br />Dynamically create...
Navigation<br />Configuration – ViewResult<br />Result of the dynamic build process<br />Has the built View along with any...
Navigation<br />[Demo]<br />
Modal Dialogs<br />Problem<br />Modal dialogs stall tests<br />[MessageBox| OpenFileDialog| PrintDialog]<br />How can you ...
Modal Dialogs<br />Option 1<br />Wrap them up!<br />Define interface<br />IMessageShower<br />Define implementation<br />M...
Modal Dialogs<br />Option 2<br />[Event Aggregator | Message Bus]<br />Create [Events | Messages]<br />Create class listen...
Modal Dialogs<br />[Demo]<br />
Magic with ContentControl<br />The Problem<br />Editable View and Read Only View<br />Views have identical layout<br />Tex...
Magic with ContentControl<br />A Solution – ContentControl!<br />DataTriggers<br />Give different presentation depending o...
Magic with ContentControl<br />[Demo]<br />
Useful Tools<br />[To make debugging suck less]<br />
Snoop<br />Inspects visual tree<br />Shows properties<br />Shows events<br />Can show 3D representation<br />
Upcoming SlideShare
Loading in...5
×

WPF with MVVM: From the Trenches

6,068

Published on

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

Published in: Technology
1 Comment
10 Likes
Statistics
Notes
  • Waste of time.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
6,068
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide
  • UI Architect for 2 WPF projects leveraging MVVM.
  • This is not about WPF or MVVM. This is about WPF WITH MVVM.
  • Transcript of "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 />BrentE@magenic.com<br />@brentledwards<br />brentedwards.net<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 />http://joshsmithonwpf.wordpress.com/<br />Advanced MVVM – Book<br />Snoop<br />http://snoopwpf.codeplex.com/<br />Prism<br />http://compositewpf.codeplex.com/Wikipage<br />
    64. 64. Questions?<br />
    65. 65. Brent Edwards<br />Senior Consultant with Magenic<br />BrentE@magenic.com<br />@brentledwards<br />brentedwards.net<br />

    ×