In this part we’ll build the XAMLs for the two edit windows. They are fairly similar so we can create them in one go.

Remember, this is what the edit customer page should look like:

We’ll build the page with a UniformGrid with two columns – the ListBox left and the TextBoxes right. We do not implement the “Main Menu” button yet! This will be part of the main window.

Create a new UserControl and name it EditCustomerPage. Create a UniformGrid with two columns:

Put a ListBox in the left column and a Grid with 7 rows and 2 columns in the right column:

Insert the Labels and TextBoxes according to the screen shot:

Note: The text box for the age should be read only – it will be calculated. The text box for the discount should be right aligned, and the “New Customer” button should stretch over the two columns.

You might have noticed that the page looks quite different from what we expected. The font is too small, the TextBoxes don’t really fit etc.

It’s time for a couple of styles – you remember Suggestion #2? Use styles!

Put new styles for the Labels and TextBoxes in the App.xaml file:

Now turning to the product edit page  – this is how it should look like:

Since it’s almost the same as the edit customer page you could copy most of the XAML. So, create a new UserControl, name it EditProductPage and insert the UniformGrid, ListBox and Labels and TextBoxes:

Now where we’ve got the first three pages we will build the basic view model system, so we can connect everything.

Nest step: SimpleMVVM, Part 3: The basic view model system