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...
Upcoming SlideShare
Loading in...5
×

Real-world Model-View-ViewModel for WPF

10,178

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
1 Comment
3 Likes
Statistics
Notes
  • Hi,

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

    Thanks
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
10,178
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
243
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

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 />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×