Chapter 3. MVVM—the model-view–view model design pattern

 

This chapter covers

  • A more detailed look at what’s in the model, view model, view, and binding layers
  • How a view model provides cross-platform UI logic by modeling state and behavior
  • Using property-changed notifications
  • Using commands
  • How the binding layer glues the view and view-model layers together
  • Value conversion in the view model and value converters
  • What happens in the application layer
  • Navigation patterns for MVVM apps

In the previous chapter we looked at the MVVM UI design pattern, before creating our first cross-platform example app. We’re going to examine that example app in a lot more detail, but first we need to look at the layers in an MVVM app in more depth. To do this we’ll take an example calculator app (figure 3.1) and look at how we’d write this using MVVM.

Figure 3.1. A simple square-root calculator app that calculates the square root of a given number

To understand how to build this app we need to look at how the user will interact with the UI, and see how those interactions move up and down through the layers of MVVM. Figure 3.2 shows a high-level overview.

Figure 3.2. A typical user interaction with our square-root calculator

3.1. The model layer

3.2. The view-model layer

3.3. The view layer

3.4. Binding

3.5. The application layer

3.6. Navigation

3.7. Revisiting the square-root calculator app

Summary