Model View ViewModel

Architecture

MVVM Architecture components

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.

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.

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.

Model

• The model encapsulates business logic and data.

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.

MVVM Architecture : separation of concern

Designer

Developer

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.

Data Binding and Commands

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.

Search Command Example

Show Command Example

Select command Example