• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
WPF with MVVM: From the Trenches
 

WPF with MVVM: From the Trenches

on

  • 7,366 views

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

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

Statistics

Views

Total Views
7,366
Views on SlideShare
7,282
Embed Views
84

Actions

Likes
9
Downloads
0
Comments
1

4 Embeds 84

http://www.slideshare.net 76
http://www.linkedin.com 5
http://stuff.seans.com 2
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Waste of time.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • UI Architect for 2 WPF projects leveraging MVVM.
  • This is not about WPF or MVVM. This is about WPF WITH MVVM.

WPF with MVVM: From the Trenches WPF with MVVM: From the Trenches Presentation Transcript

  • WPF with MVVM: From the Trenches
  • Brent Edwards
    Senior Consultant with Magenic
    BrentE@magenic.com
    @brentledwards
    brentedwards.net
  • Why ‘From the Trenches’?
  • What We Will Cover
    • 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
  • What is MVVM?
  • What is MVVM?
    Model
    Business logic
    Business Object
    View
    Presentation
    XAML
    View Model
    Functionality
    Model for the View
  • Why is MVVM Cool?
    Separates Presentation from Functionality
    Promotes testability
    Works great with Data Binding
    Easy collaboration with Designers
    No code-behinds
  • 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
  • Cool WPF Concepts
  • 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
  • DataContext
    How is it used?
    Statically
    OR
  • DataContext
    How is it used?
    Dynamically
    From code
  • 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
  • Data Binding
    How is it used?
    Binding syntax in XAML
    Two Way (Default Behavior)
    Implement INotifyPropertyChanged on view model or business object
  • 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
  • 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
  • Commanding
    [Demo]
  • 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
  • Data Templates
    How is it used?
  • Data Templates
    [Demo]
  • Data Triggers
    What is it?
    Set style properties based on data values
    Why is it cool?
    Change presentation based on data properties
  • Data Triggers
    How is it used?
  • Data Triggers
    [Demo]
  • 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
  • Value Converters
    How is it used?
    Implement IValueConverter
    Convert, ConvertBack
    Include in Resources with a Key
    Use it!
  • Value Converters
    [Demo]
  • 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
  • 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
  • Data Template Selectors
    How is it used?
    Add DataTemplateSelector to XAML
    Use it!
    ContentControl
    ListView
    ListBox
  • Data Template Selectors
    [Demo]
  • Helpful Tricks
    [To make life easier]
  • 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
  • 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
  • Event Aggregator / Message Bus
    [Demo]
  • Navigation
    The Problem
    Views coupled with other Views
    View Models know about Views
    No separation of concerns
    No testability
  • Navigation
    A Solution
    Some Convention, Some Configuration
    Leverage [Event Aggregator | Message Bus]
    Leverage IOC
    Castle Windsor
    Leverage Reflection
  • Navigation
    Convention
    View Models all have default constructors
    View Models have an optional Load method with 0 or 1 argument(s)
  • Navigation
    Configuration – Key Players
    ViewTargets
    ViewConfiguration
    ViewController
    ViewResult
    ViewFactory
    ContainerConfiguration
  • Navigation
    Configuration - ViewTargets
    Enumerates the views which can be navigated to
    The glue that sticks everything together
  • Navigation
    Configuration - ViewConfiguration
    Pairs a View with an optional View Model
    Associated to a ViewTarget in the IOC Container
  • 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
  • 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
  • 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
  • Navigation
    [Demo]
  • Modal Dialogs
    Problem
    Modal dialogs stall tests
    [MessageBox| OpenFileDialog| PrintDialog]
    How can you leverage these and keep view models testable?
  • Modal Dialogs
    Option 1
    Wrap them up!
    Define interface
    IMessageShower
    Define implementation
    MessageShower
    Wire up with IOC Container
    Castle Windsor
    Test with mocks
    RhinoMocks
  • 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
  • Modal Dialogs
    [Demo]
  • Magic with ContentControl
    The Problem
    Editable View and Read Only View
    Views have identical layout
    TextBox in for Editable
    Label for Read Only
  • 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
  • Magic with ContentControl
    [Demo]
  • Useful Tools
    [To make debugging suck less]
  • Snoop
    Inspects visual tree
    Shows properties
    Shows events
    Can show 3D representation
  • Snoop
    [Demo]
  • Output Window
    Shows binding expression errors
    Could be in immediate window instead
  • Output Window
    [Demo]
  • Valuable Links
    Josh Smith
    http://joshsmithonwpf.wordpress.com/
    Advanced MVVM – Book
    Snoop
    http://snoopwpf.codeplex.com/
    Prism
    http://compositewpf.codeplex.com/Wikipage
  • Questions?
  • Brent Edwards
    Senior Consultant with Magenic
    BrentE@magenic.com
    @brentledwards
    brentedwards.net