model view viewmodel architecture. mvvm architecture components
DESCRIPTION
View (XAML) Views are visual elements, such as a window, a page, user control, or a data template. A View defines the controls contained in the view and their visual layout and styling. The controls in the view are data bound to the properties and commands exposed by the view model.TRANSCRIPT
![Page 1: Model View ViewModel Architecture. MVVM Architecture components](https://reader036.vdocuments.mx/reader036/viewer/2022082911/5a4d1baa7f8b9ab0599ca5b4/html5/thumbnails/1.jpg)
Model View ViewModel
Architecture
![Page 2: Model View ViewModel Architecture. MVVM Architecture components](https://reader036.vdocuments.mx/reader036/viewer/2022082911/5a4d1baa7f8b9ab0599ca5b4/html5/thumbnails/2.jpg)
MVVM Architecture components
![Page 3: Model View ViewModel Architecture. MVVM Architecture components](https://reader036.vdocuments.mx/reader036/viewer/2022082911/5a4d1baa7f8b9ab0599ca5b4/html5/thumbnails/3.jpg)
View (XAML)• Views are visual elements, such as a window, a
page, user control, or a data template. • A View defines the controls contained in the
view and their visual layout and styling.• The controls in the view are data bound to the
properties and commands exposed by the view model.
![Page 4: Model View ViewModel Architecture. MVVM Architecture components](https://reader036.vdocuments.mx/reader036/viewer/2022082911/5a4d1baa7f8b9ab0599ca5b4/html5/thumbnails/4.jpg)
ViewModel
• The ViewModel encapsulates the presentation logic and data for the view.
• ViewModel knows nothing about the view's specific implementation or type.
• The ViewModel implements properties and commands to which the view can bind data and notifies the view of any state changes through change notification events.
![Page 5: Model View ViewModel Architecture. MVVM Architecture components](https://reader036.vdocuments.mx/reader036/viewer/2022082911/5a4d1baa7f8b9ab0599ca5b4/html5/thumbnails/5.jpg)
ViewModel
• It provides data binding between View and model data as well as handles all UI actions by using command.
• The view model is responsible for coordinating the view's interaction with any model classes that are required.
• The view model may manipulate model data so that it can be easily consumed by the view.
![Page 6: Model View ViewModel Architecture. MVVM Architecture components](https://reader036.vdocuments.mx/reader036/viewer/2022082911/5a4d1baa7f8b9ab0599ca5b4/html5/thumbnails/6.jpg)
Model
• The model encapsulates business logic and data.
![Page 7: Model View ViewModel Architecture. MVVM Architecture components](https://reader036.vdocuments.mx/reader036/viewer/2022082911/5a4d1baa7f8b9ab0599ca5b4/html5/thumbnails/7.jpg)
Advantages of MVVM Pattern
• Separates the business and presentation logic
of the application from its UI.
• Allows developers and UI designers developing
their respective parts of the application.
• Makes it much easier to test, maintain, and
evolve.
![Page 8: Model View ViewModel Architecture. MVVM Architecture components](https://reader036.vdocuments.mx/reader036/viewer/2022082911/5a4d1baa7f8b9ab0599ca5b4/html5/thumbnails/8.jpg)
MVVM Architecture : separation of concern
Designer
Developer
![Page 9: Model View ViewModel Architecture. MVVM Architecture components](https://reader036.vdocuments.mx/reader036/viewer/2022082911/5a4d1baa7f8b9ab0599ca5b4/html5/thumbnails/9.jpg)
View-ViewModel interaction
The ViewModel implements properties and commands to which the view can data bind and notifies the view of any state changes through change notification events.
![Page 10: Model View ViewModel Architecture. MVVM Architecture components](https://reader036.vdocuments.mx/reader036/viewer/2022082911/5a4d1baa7f8b9ab0599ca5b4/html5/thumbnails/10.jpg)
![Page 11: Model View ViewModel Architecture. MVVM Architecture components](https://reader036.vdocuments.mx/reader036/viewer/2022082911/5a4d1baa7f8b9ab0599ca5b4/html5/thumbnails/11.jpg)
Data Binding and Commands
![Page 12: Model View ViewModel Architecture. MVVM Architecture components](https://reader036.vdocuments.mx/reader036/viewer/2022082911/5a4d1baa7f8b9ab0599ca5b4/html5/thumbnails/12.jpg)
How it works ?
1. User interaction is translated by passing a call to the
ViewModel via Command.
2. ViewModel manipulate data in the model
3. Model fires events for changes in a property of a model class.
4. ViewModel will fire further the event .
5. View will consume this event and update its content
accordingly.
![Page 13: Model View ViewModel Architecture. MVVM Architecture components](https://reader036.vdocuments.mx/reader036/viewer/2022082911/5a4d1baa7f8b9ab0599ca5b4/html5/thumbnails/13.jpg)
Search Command Example
![Page 14: Model View ViewModel Architecture. MVVM Architecture components](https://reader036.vdocuments.mx/reader036/viewer/2022082911/5a4d1baa7f8b9ab0599ca5b4/html5/thumbnails/14.jpg)
Show Command Example
![Page 15: Model View ViewModel Architecture. MVVM Architecture components](https://reader036.vdocuments.mx/reader036/viewer/2022082911/5a4d1baa7f8b9ab0599ca5b4/html5/thumbnails/15.jpg)
Select command Example