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.

Real-world Model-View-ViewModel for WPF


Published 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 describe the pattern in detail.

Published in: Technology
  • Follow the link, new dating source: ❶❶❶ ❶❶❶
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❶❶❶ ❶❶❶
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi,

    Here is the link of implementation of MVVM pattern in WPF with Example

    Are you sure you want to  Yes  No
    Your message goes here

Real-world Model-View-ViewModel for WPF

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