Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Real-world MVVM in WPF<br />Paul Stovell<br />Senior Consultant<br />Technical specialist: WPF<br />
Agenda<br />Part 1: Introducing MVVM<br />Refactoring to MVVM<br />Unit testing MVVM<br />Commands<br />Part 2: Formalizin...
About You<br />Awesome coder<br />Know some WPF<br />Love binding! <br />This is you...<br />
Introducing MVVM<br />Part 1<br />
Demo<br />Refactoring to MVVM<br />
Demo<br />Unit testing MVVM<br />
What did we just do?<br />Employee = the Model<br />SearchView.xaml = the View<br />SearchViewModel = the ViewModel<br />
Demo<br />Using Commands<br />
Demo<br />New requirement:  search-as-you-type<br />
Formalizing MVVM<br />Part 2<br />
History<br />Presentation Model<br />MVVM<br />Martin Fowler<br />John Gossman<br />
Model-View-ViewModel<br />void Button_Click(...)<br />{<br />   viewModel.Search();<br />}<br /><Button Command="{Binding ...
Model-View-ViewModel<br /><TextBox Text="{Binding SearchText}" /><br />Commands<br />Methods<br />View<br />ViewModel<br /...
Model-View-ViewModel<br />viewModel.SessionClosed += (s,e) => Close();<br />Commands<br />Methods<br />View<br />ViewModel...
ViewModel-First MVVM<br />ViewModel.Search();<br />Commands<br />Methods<br />View<br />ViewModel<br />External services<b...
ViewModel-First MVVM<br />public event EventHandlerSearchRequested;<br />Commands<br />Methods<br />View<br />ViewModel<br...
Model-View-Presenter<br />public event EventHandlerSearchRequested;<br />Methods<br />View<br />Presenter<br />External se...
Model-View-Presenter<br />public void ShowResults(List<SearchResult> results)<br />{<br />    listBox1.ItemsSource = resul...
The Model<br />Service messages/DTO’s<br />Domain entities/value objects<br />DataSets<br />LINQ to SQL objects<br />Or:<b...
Instantiation and wire-up<br />Internal creation:<br />public CalculatorView()<br />{<br />InitializeComponent();<br />Dat...
Instantiation and wire-up<br />ViewModel as a dependency:<br />public CalculatorView(CalculatorViewModel model)<br />{<br ...
Instantiation and wire-up<br />ViewModel via XAML:<br /><UserControl ...><br />    <UserControl.DataContext><br />        ...
Instantiation and wire-up<br />5 more ways:http://is.gd/dv7aN<br />
Playing with Others<br />Part 3<br />
Navigation<br />INavigator.Navigate(...)<br />Event<br />View+ViewModel<br />View<br />ViewModel<br />URI<br />
Demo<br />Adding navigation with Magellan<br />
Composition<br />Shell ViewModel<br />Search ViewModel<br />Weather ViewModel<br />Shell<br />Search<br />Weather<br />
Composition<br />Bottom-Up<br />Order List<br />Top Region<br />2. Place<br />Infrastructure<br />Bottom Region<br />1. Re...
Inter-view Communication<br />Standard .NET events<br />Search View Model<br />Child model raises event<br />Parent model ...
Inter-view Communication<br />Mediator (e.g., Prism EventAggregator)<br />Results ViewModel<br />Criteria ViewModel<br />b...
Conclusion<br />MVVM is about separation of concerns<br />View has UI-specific code<br />VM has behaviour and state<br />B...
What’s next?<br />Inversion of Control containers<br />Modular applications<br />Pub/sub messaging<br />Inductive user int...
Links<br />MVVM Light: http://is.gd/duX2Q<br />Caliburn: http://is.gd/duX5L<br />More: http://is.gd/duWWG<br />Magellan: h...
Thanks!<br />Paul Stovell<br />paul.stovell@readify.net<br />www.paulstovell.com<br />
DeveloperDeveloperDeveloper! Events would not be possible<br />With out the generous support from our sponsors…<br />We wo...
Nächste SlideShare
Wird geladen in …5
×

Real-world Model-View-ViewModel for WPF

11.808 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
  • Hi,

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

    Thanks
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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:http://is.gd/dv7aN<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: http://is.gd/duX2Q<br />Caliburn: http://is.gd/duX5L<br />More: http://is.gd/duWWG<br />Magellan: http://is.gd/duX70<br />Reuxables: http://is.gd/duX8G<br />
  34. 34. Thanks!<br />Paul Stovell<br />paul.stovell@readify.net<br />www.paulstovell.com<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 />

×