We’ll start with the EditCustomerPage. As a reminder – that’s how it looks:

First of all we need a view model class. Create a class named EditCustomerPageVM, and derive it from the class PageVM. Add a constructor with a parameter of type ISystemConnector and pass the parameter to the base class constructor:

The page is actually displayed when the “Edit Customer Page” button is clicked. That means that the MainMenuPageVM class must be able to switch to another page. Most pages require the ability to open new pages. Since the PageFrame class holds the current page, all pages require access to the page frame.

Modify the PageVM constructor to expect another parameter of type PageFrameVM in the constructor and store the value in a new field; encapsulate the field with a property:

Also modify the constructor of the EditCustomerPageVM class…:

…and the constructor of the MainMenuPageVM class:

And modify the construction of the MainMenuPageVM object in SimpleMVVMApp:

Note: When things turn more complex, it might be a good idea to decouple PageVM and PageFrameVM by using one (or two) interfaces. But we are keeping things simple for now…

Create a new RelayCommand named ShowEditCustomerPageCommand in MainMenuPageVM:

Create a new EditCustomerPageVM object in ExecuteShowEditCustomerPageCommand() and assign it to the CurrentPage property of the page frame object:

Bind to the new command in MainMenuPage.xaml:

We finally need a data template for the page itself in App.xaml:

If you run the application, the page should display now.