SlideShare ist ein Scribd-Unternehmen logo
1 von 9
M-V-VM

Model View ViewModel for WPF
       (Design Pattern)
Highlights

Created By John Gossman (WPF and Silverlight
Architect at Microsoft)

This pattern is a simple and effective set of Guidelines
for Designing and Implementing a WPF application

Allows you to create a strong separation between
data, behavior and presentation (UI)
Uses

Databinding for 2 way communication between View
                (UI) and ViewModel

  Uses Command pattern (ICommand interface) for
communicating actions or events that happen on View
                       (UI)

  Dependency Properties alongwith Data Binding to
communicate data changes to and from the View (UI)
WPF MVVM Application Layers
What is View, Model and ViewModel?

View                               ViewModel                          Model
• represents the UI that the end   • is the abstraction of the View   • Represents the data classes
  user sees                          (UI)                               and contains the data, bound
• can be a user control or Data    • Communicates data                  to view and modified by view
  Template                           modifications to the Model       • Hold only the data or
• shouldn’t contain any logic or     from the View                      information related to an
  code that is to be tested        • Data changes in Model are          Object;
                                     reflected in the View through    • It doesn’t contain the
                                     ViewModel by making use of         behaviors or services that
                                     data Binding and dependency        manipulate this data or
                                     properties                         information, though
                                                                        sometimes it may contain data        View knows
                                                                        validation logic                                                                  Multiple Views : 1
                                                                                                        ViewModel, ViewModel
                                                                      • Example is “The Contact                                 1 View : 1 ViewModel   ViewModel (for Wizard
                                                                        information of a person” like    knows Model, but not
                                                                                                                                                        kind of applications)
                                                                        Name, Phone                           vice versa
                                                                        No, Email, Address, Zip Code
                                                                        etc.
Advantages
ViewModel classes are easy to unit test the complete UI without touching the UI code

Testing through ViewModel provides free and fast regression testing which helps to
reduce cost of maintaining application over time

Helps create a smooth Designer/developer workflow

 • Design team can focus on creating user-friendly views while,
 • Development team can focus on creating robust ViewModel classes
 • Which can then be integrated to ensure proper data bindings exist in the View’s XAML file

Takes full advantage of WPF’s Data Templates and Commands

Gives more flexibility to change UI without having to refactor the logic or change other
code base
What do u need to Understand in
 Order to Learn and Implement MVVM
Data Binding in WPF
  • http://msdn.microsoft.com/magazine/cc700358

Command Pattern Implementation in WPF
  • ICommand Interface usage
       public interface Icommand
       {
         bool CanExecute(object param);
         void Execute(object param);
         event EventHandler CanExecuteChanged;
       }

  • RelayCommand pattern
  • Routed Events and Commands in WPF
    • http://msdn.microsoft.com/magazine/cc785480

Composite Application Library from Microsoft
  • http://msdn.microsoft.com/library/cc707890

For Unit Testing:
  • Nunit
  • Moq Framework for .Net (Third Party classes for testing .Net Apps)
References and Resources
WPF Model-View-ViewModel Toolkit

•http://wpf.codeplex.com/wikipage?title=WPF%20Model-View-ViewModel%20Toolkit

MVVM Foundation on codeplex (A set of classes that helps build WPF Apps based on MVVM)

•http://mvvmfoundation.codeplex.com/

Super Simple MVVM Explained video:

•http://www.charlieblog.net/SuperSimpleMVVM/Large/SuperSimple_MVVM_large/SuperSimple_MVVM_large.html

MVVM MSDN Article:

•http://msdn.microsoft.com/en-us/magazine/dd419663.aspx

MVVM Channel9 video with Karl Shifflett

•http://channel9.msdn.com/shows/Continuum/MVVM/

WPF MVVM Video by Jason Dolinger

•http://hugeonion.com/2009/03/08/wpf-mvvm-video-by-jason-dolinger/

MVVM Explained

•http://csharperimage.jeremylikness.com/2010/04/model-view-viewmodel-mvvm-explained.html
Last Note on MVVM
• It is said that if you have not given names for
  your UI Elements and still able to run and
  process the application properly, the MVVM
  Implementation is clean, complete and proper



  – THANKS

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Android MVVM
Android MVVMAndroid MVVM
Android MVVM
 
MVVM with DataBinding on android
MVVM with DataBinding on androidMVVM with DataBinding on android
MVVM with DataBinding on android
 
Introduction to mvc architecture
Introduction to mvc architectureIntroduction to mvc architecture
Introduction to mvc architecture
 
Vue.js
Vue.jsVue.js
Vue.js
 
iOS architecture patterns
iOS architecture patternsiOS architecture patterns
iOS architecture patterns
 
MVC Architecture
MVC ArchitectureMVC Architecture
MVC Architecture
 
An Overview on Nuxt.js
An Overview on Nuxt.jsAn Overview on Nuxt.js
An Overview on Nuxt.js
 
Asp.net web api
Asp.net web apiAsp.net web api
Asp.net web api
 
MVC Framework
MVC FrameworkMVC Framework
MVC Framework
 
MVC ppt presentation
MVC ppt presentationMVC ppt presentation
MVC ppt presentation
 
ASP.MVC Training
ASP.MVC TrainingASP.MVC Training
ASP.MVC Training
 
Ch9 .Best Practices for Class-Based Views
Ch9 .Best Practices  for  Class-Based ViewsCh9 .Best Practices  for  Class-Based Views
Ch9 .Best Practices for Class-Based Views
 
Java Server Faces 2
Java Server Faces 2Java Server Faces 2
Java Server Faces 2
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Asp.net mvc
Asp.net mvcAsp.net mvc
Asp.net mvc
 
Blazor
BlazorBlazor
Blazor
 
An introduction to Vue.js
An introduction to Vue.jsAn introduction to Vue.js
An introduction to Vue.js
 
SOLID principles
SOLID principlesSOLID principles
SOLID principles
 
The effective use of Django ORM
The effective use of Django ORMThe effective use of Django ORM
The effective use of Django ORM
 
Front end architecture
Front end architectureFront end architecture
Front end architecture
 

Ähnlich wie MVVM with WPF

Mvc pattern and implementation in java fair
Mvc   pattern   and implementation   in   java fairMvc   pattern   and implementation   in   java fair
Mvc pattern and implementation in java fair
Tech_MX
 
Mvvm in the real world tccc10
Mvvm in the real world   tccc10Mvvm in the real world   tccc10
Mvvm in the real world tccc10
Bryan Anderson
 

Ähnlich wie MVVM with WPF (20)

MVVM Presentation
MVVM PresentationMVVM Presentation
MVVM Presentation
 
Introduction To MVVM
Introduction To MVVMIntroduction To MVVM
Introduction To MVVM
 
Architectural Design & Patterns
Architectural Design&PatternsArchitectural Design&Patterns
Architectural Design & Patterns
 
MVVM and Prism
MVVM and PrismMVVM and Prism
MVVM and Prism
 
Knockout js
Knockout jsKnockout js
Knockout js
 
Mvc pattern and implementation in java fair
Mvc   pattern   and implementation   in   java fairMvc   pattern   and implementation   in   java fair
Mvc pattern and implementation in java fair
 
MVC
MVCMVC
MVC
 
Adopting MVVM
Adopting MVVMAdopting MVVM
Adopting MVVM
 
MVP Clean Architecture
MVP Clean  Architecture MVP Clean  Architecture
MVP Clean Architecture
 
Web engineering - MVC
Web engineering - MVCWeb engineering - MVC
Web engineering - MVC
 
Using mvvm inside mvc in domain driven design
Using mvvm inside mvc in domain driven designUsing mvvm inside mvc in domain driven design
Using mvvm inside mvc in domain driven design
 
MVC
MVCMVC
MVC
 
GUI patterns : My understanding
GUI patterns : My understandingGUI patterns : My understanding
GUI patterns : My understanding
 
Models used in iOS programming, with a focus on MVVM
Models used in iOS programming, with a focus on MVVMModels used in iOS programming, with a focus on MVVM
Models used in iOS programming, with a focus on MVVM
 
Mvc, mvp & mvvm (erp)
Mvc, mvp & mvvm (erp)Mvc, mvp & mvvm (erp)
Mvc, mvp & mvvm (erp)
 
WPF For Beginners - Learn in 3 days
WPF For Beginners  - Learn in 3 daysWPF For Beginners  - Learn in 3 days
WPF For Beginners - Learn in 3 days
 
Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS
Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOSSoftware architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS
Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS
 
Mvvm in the real world tccc10
Mvvm in the real world   tccc10Mvvm in the real world   tccc10
Mvvm in the real world tccc10
 
SUE AGILE MVVM (English)
SUE AGILE MVVM (English)SUE AGILE MVVM (English)
SUE AGILE MVVM (English)
 
Mobile App Architectures & Coding guidelines
Mobile App Architectures & Coding guidelinesMobile App Architectures & Coding guidelines
Mobile App Architectures & Coding guidelines
 

Kürzlich hochgeladen

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Kürzlich hochgeladen (20)

presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 

MVVM with WPF

  • 1. M-V-VM Model View ViewModel for WPF (Design Pattern)
  • 2. Highlights Created By John Gossman (WPF and Silverlight Architect at Microsoft) This pattern is a simple and effective set of Guidelines for Designing and Implementing a WPF application Allows you to create a strong separation between data, behavior and presentation (UI)
  • 3. Uses Databinding for 2 way communication between View (UI) and ViewModel Uses Command pattern (ICommand interface) for communicating actions or events that happen on View (UI) Dependency Properties alongwith Data Binding to communicate data changes to and from the View (UI)
  • 5. What is View, Model and ViewModel? View ViewModel Model • represents the UI that the end • is the abstraction of the View • Represents the data classes user sees (UI) and contains the data, bound • can be a user control or Data • Communicates data to view and modified by view Template modifications to the Model • Hold only the data or • shouldn’t contain any logic or from the View information related to an code that is to be tested • Data changes in Model are Object; reflected in the View through • It doesn’t contain the ViewModel by making use of behaviors or services that data Binding and dependency manipulate this data or properties information, though sometimes it may contain data View knows validation logic Multiple Views : 1 ViewModel, ViewModel • Example is “The Contact 1 View : 1 ViewModel ViewModel (for Wizard information of a person” like knows Model, but not kind of applications) Name, Phone vice versa No, Email, Address, Zip Code etc.
  • 6. Advantages ViewModel classes are easy to unit test the complete UI without touching the UI code Testing through ViewModel provides free and fast regression testing which helps to reduce cost of maintaining application over time Helps create a smooth Designer/developer workflow • Design team can focus on creating user-friendly views while, • Development team can focus on creating robust ViewModel classes • Which can then be integrated to ensure proper data bindings exist in the View’s XAML file Takes full advantage of WPF’s Data Templates and Commands Gives more flexibility to change UI without having to refactor the logic or change other code base
  • 7. What do u need to Understand in Order to Learn and Implement MVVM Data Binding in WPF • http://msdn.microsoft.com/magazine/cc700358 Command Pattern Implementation in WPF • ICommand Interface usage public interface Icommand { bool CanExecute(object param); void Execute(object param); event EventHandler CanExecuteChanged; } • RelayCommand pattern • Routed Events and Commands in WPF • http://msdn.microsoft.com/magazine/cc785480 Composite Application Library from Microsoft • http://msdn.microsoft.com/library/cc707890 For Unit Testing: • Nunit • Moq Framework for .Net (Third Party classes for testing .Net Apps)
  • 8. References and Resources WPF Model-View-ViewModel Toolkit •http://wpf.codeplex.com/wikipage?title=WPF%20Model-View-ViewModel%20Toolkit MVVM Foundation on codeplex (A set of classes that helps build WPF Apps based on MVVM) •http://mvvmfoundation.codeplex.com/ Super Simple MVVM Explained video: •http://www.charlieblog.net/SuperSimpleMVVM/Large/SuperSimple_MVVM_large/SuperSimple_MVVM_large.html MVVM MSDN Article: •http://msdn.microsoft.com/en-us/magazine/dd419663.aspx MVVM Channel9 video with Karl Shifflett •http://channel9.msdn.com/shows/Continuum/MVVM/ WPF MVVM Video by Jason Dolinger •http://hugeonion.com/2009/03/08/wpf-mvvm-video-by-jason-dolinger/ MVVM Explained •http://csharperimage.jeremylikness.com/2010/04/model-view-viewmodel-mvvm-explained.html
  • 9. Last Note on MVVM • It is said that if you have not given names for your UI Elements and still able to run and process the application properly, the MVVM Implementation is clean, complete and proper – THANKS