Page Navigation (Part 3 of 6)

This part of the tutorial will show you how to add navigation between pages in a module. The goal is to add a second page to the Customers module and add a button on the Overview page that will navigate to this new page when clicked.

Add a second page to Customers

1. Double-click the Customers.mod file in the AdventureWorksDemo.Module project to bring up the module designer.
2. In the module designer click on Pages, then click the + button to add a new page.
3. Name this page CustomerEdit and click Next.
4. From the layout selection page, select the Empty (top-left) layout and click Finish.

Adding a button to the Overview page

There are several ways for adding controls to a page. You might want to use the Visual Studio WPF designer, XAML editor or open the project in Microsoft Expression Blend.

One way to add a button is as follow:

1. On the Customers designer, click on Pages and select the Overview page from the pages list at the top.
2. Next click the Change Template button on the toolbar above the page design view.


Figure 21 : Change Template button

3. From the Change Page Layout dialog box, select the DockPanel with Bottom layout template and click Finish.
Note: Do not pay attention to PART_1 being at the bottom for now. This is because of the way DockPanel works with its children. We are going to fix this in the next steps.
4. Click the View XAML button on the toolbar to jump to the XAML code for this page.
5. Above the ListView opening tag, write the following code:



<Button HorizontalAlignment="Right" Height="30" Width="75" Margin="0, 10, 0, 0" 

        Content="Edit" Command="{vi:OpenPage CustomerEdit}" />	

Note: You may also want to change the x:Name attribute from the ListView to “PART_2” and add x:Name=”PART_1” to the button.

The OpenPage Extension

The value for the Command in the above button XAML code is what makes the button open the other page. The OpenPage extension accepts the name of the page to open as its argument. In case you need to pass a parameter to the newly opened page, you can bind the CommandParameter. We will do this in the next part of the tutorial series.

Launching the application

1. Run the application by pressing CTRL+F5 or the Play button on the toolbar.
2. In the application, click the Customers module and select the Overview page from the popup menu.
3. Clicking the Edit button on the bottom right will open the empty CustomerEdit page.