Real-world Model-View-ViewModel for WPF

  • 9,697 views
Uploaded on

Slides from a talk I gave at the DeveloperDeveloperDeveloper Sydney event. I introduce the MVVM pattern by refactoring some existing code to use MVVM, introduce commands, add some unit tests, then …

Slides from a talk I gave at the DeveloperDeveloperDeveloper Sydney event. I introduce the MVVM pattern by refactoring some existing code to use MVVM, introduce commands, add some unit tests, then describe the pattern in detail.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Hi,

    Here is the link of implementation of MVVM pattern in WPF with Example
    http://wpftutorial.co/WPF-MVVM-Patern

    Thanks
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
9,697
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
226
Comments
1
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Real-world MVVM in WPF
    Paul Stovell
    Senior Consultant
    Technical specialist: WPF
  • 2. Agenda
    Part 1: Introducing MVVM
    Refactoring to MVVM
    Unit testing MVVM
    Commands
    Part 2: Formalizing MVVM
    History
    Model-View-ViewModel
    ViewModel-First
    Part 3: Playing with Others
    Navigation
    Composition
    Communication
  • 3. About You
    Awesome coder
    Know some WPF
    Love binding!
    This is you...
  • 4. Introducing MVVM
    Part 1
  • 5. Demo
    Refactoring to MVVM
  • 6. Demo
    Unit testing MVVM
  • 7. What did we just do?
    Employee = the Model
    SearchView.xaml = the View
    SearchViewModel = the ViewModel
  • 8. Demo
    Using Commands
  • 9. Demo
    New requirement: search-as-you-type
  • 10. Formalizing MVVM
    Part 2
  • 11. History
    Presentation Model
    MVVM
    Martin Fowler
    John Gossman
  • 12. Model-View-ViewModel
    void Button_Click(...)
    {
    viewModel.Search();
    }
    <Button Command="{Binding Search}" />
    Commands
    Methods
    View
    ViewModel
    External services
    Properties
    public void Search()
    {
    }
    ICommand Search { get;set; }
    Events
  • 13. Model-View-ViewModel
    <TextBox Text="{Binding SearchText}" />
    Commands
    Methods
    View
    ViewModel
    public string SearchText
    {
    get { ... }
    set {
    ... Search();
    }
    }
    External services
    Properties
    Events
  • 14. Model-View-ViewModel
    viewModel.SessionClosed += (s,e) => Close();
    Commands
    Methods
    View
    ViewModel
    External services
    Properties
    Events
    public event EventArgsSessionClosed;
  • 15. ViewModel-First MVVM
    ViewModel.Search();
    Commands
    Methods
    View
    ViewModel
    External services
    Properties
    View.Close();
    Events
  • 16. ViewModel-First MVVM
    public event EventHandlerSearchRequested;
    Commands
    Methods
    View
    ViewModel
    External services
    Properties
    Events
    public event EventHandlerSessionClosed;
  • 17. Model-View-Presenter
    public event EventHandlerSearchRequested;
    Methods
    View
    Presenter
    External services
    Events
    private void View_SearchRequested(...)
    {
    // Do search
    }
  • 18. Model-View-Presenter
    public void ShowResults(List<SearchResult> results)
    {
    listBox1.ItemsSource = results;
    }
    Methods
    View
    Presenter
    External services
    Events
    View.ShowResults(results);
  • 19. The Model
    Service messages/DTO’s
    Domain entities/value objects
    DataSets
    LINQ to SQL objects
    Or:
    View-specific objects mapped from above
  • 20. Instantiation and wire-up
    Internal creation:
    public CalculatorView()
    {
    InitializeComponent();
    DataContext = new CalculatorViewModel();
    }
  • 21. Instantiation and wire-up
    ViewModel as a dependency:
    public CalculatorView(CalculatorViewModel model)
    {
    InitializeComponent();
    DataContext = model;
    }
    varviewModel = new CalculatorViewModel();
    var view = new CalculatorView(viewModel);
  • 22. Instantiation and wire-up
    ViewModel via XAML:
    <UserControl ...>
    <UserControl.DataContext>
    <local:CalculatorViewModel />
    </UserControl.DataContext>
  • 23. Instantiation and wire-up
    5 more ways:http://is.gd/dv7aN
  • 24. Playing with Others
    Part 3
  • 25. Navigation
    INavigator.Navigate(...)
    Event
    View+ViewModel
    View
    ViewModel
    URI
  • 26. Demo
    Adding navigation with Magellan
  • 27. Composition
    Shell ViewModel
    Search ViewModel
    Weather ViewModel
    Shell
    Search
    Weather
  • 28. Composition
    Bottom-Up
    Order List
    Top Region
    2. Place
    Infrastructure
    Bottom Region
    1. Resolve
    Search
    Weather
  • 29. Inter-view Communication
    Standard .NET events
    Search View Model
    Child model raises event
    Parent model forwards event
    Results View Model
    Criteria View Model
  • 30. Inter-view Communication
    Mediator (e.g., Prism EventAggregator)
    Results ViewModel
    Criteria ViewModel
    bus.Subscribe<SearchMessage>(HandleSearch);
    Publish
    Handle
    Hub
    Publish
    Handle
    Advert ViewModel
    Recent Searches ViewModel
    bus.Publish(new SearchMessage(searchText));
  • 31. Conclusion
    MVVM is about separation of concerns
    View has UI-specific code
    VM has behaviour and state
    Behaviour = methods/commands
    State = properties
    Separation of concerns makes code easy to test
    It’s easy: just one extra class!
  • 32. What’s next?
    Inversion of Control containers
    Modular applications
    Pub/sub messaging
    Inductive user interfaces
    p&p Prism
  • 33. Links
    MVVM Light: http://is.gd/duX2Q
    Caliburn: http://is.gd/duX5L
    More: http://is.gd/duWWG
    Magellan: http://is.gd/duX70
    Reuxables: http://is.gd/duX8G
  • 34. Thanks!
    Paul Stovell
    paul.stovell@readify.net
    www.paulstovell.com
  • 35. DeveloperDeveloperDeveloper! Events would not be possible
    With out the generous support from our sponsors…
    We would like to thank the following for their support: