Model View ViewModel

1. Model ViewViewModel Architecture

2. MVVM Architecture components

3. 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 layoutand styling. • The controls in the view are data bound to the properties and commands exposed by the view model.

4. ViewModel • The ViewModel encapsulates the presentation logic and data for the view. • ViewModel knows nothing about the view's specific implementation or type. • The ViewModelimplements properties and commands to which the view can bind data and notifies the view of any state changes through change notification events.

5. 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.

6. Model • The model encapsulates business logic and data.

7. Advantages of MVVM Pattern • Separates the business and presentation logic of the applicationfromits UI. • Allows developers and UI designers developing their respective parts of the application. • Makes it much easier to test, maintain, and evolve.

8. MVVM Architecture : separation of concern Designer Developer

9. View-ViewModelinteraction 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.

11. Data Binding and Commands

12. How it works ? • User interaction is translated by passing a call to the ViewModel via Command. • ViewModelmanipulate data in the model • Model fires events for changes in a property of a model class. • ViewModelwill fire further the event . • Viewwillconsumethis event and updateitscontentaccordingly.

13. Search Command Example

14. Show Command Example

15. Select commandExample