Step 11. Setting up Window Navigation

In this step you will set up window-level navigation, specifying the Orders DataGrid as the window's primary navigation control.

1. First, let's take a look at some code that is already in place in the Customer Orders window. In the Solution Explorer, right-click the CustomerOrdersWindow.xaml file and select View Code from the shortcut menu.

2. At the bottom of the CustomerOrdersWindow constructor method, notice this line of code that has been automatically added for you:

   	this.NavigationControl = this.grdOrders;
   }

   This registers the Orders DataGrid as the primary navigation control on the window. In the next step you will add a Navigation Toolbar that works in conjunction with this Navigation Control.
   

Setting Up a Navigation ToolBar

1. Open the CustomerOrdersWindow in design mode. Go to the Documents Outline window and under the Border element, select the LayoutRoot element:

   

2. In the Properties Window under Layout, select the RowDefinitions ellipses button [...]. In the Collection Editor, click the Add button twice to add two rows to the layout Grid. Afterwards, click OK to close the dialog. This creates two equal-size rows (we'll change this in just a bit), and places your TabControl in the first row:

   

3. Go to the Document Outline window and select the TabControl element. Then go to the Properties panel and set the Row property to 1. This moves the TabControl to second row of the layout Grid.

4. In the Document Outline window, reselect the LayoutRoot nestled directly below the Border, then go to the Visual Studio Toolbox and under the All WPF Controls tab, double-click a ToolBarTray element to add it to the layout Grid.

   Afterwards, go to the Properties Panel, and set the following properties:

   • Row = 0
     
   • Margin = 0, 0, 0, 0
     
   • HorizontalAlignment = Stretch
     
   • Width = Auto
     

   Save your changes by pressing Ctrl+S or selecting the Save button in the Visual Studio toolbar.

5. With the ToolBar Tray still selected, go to the Visual Studio Toolbok and under the MM .NET WPF Controls section, double-click on mmNavigationToolbar to add the Navigation ToolBar to the ToolBar Tray.

   You should now see the Navigation ToolBar at the top of the Window.

6. Next, go to the Document Outline window, select the ToolBarTray and then go to the Properties panel and set the Height property to Auto. The navigation toolbar should now look like this:

   

7. Select the Navigation ToolBar in design mode, then go to the Properties panel and make sure the Margin property is set to 0, 0, 0, 0.

8. Go to the Document Outline window and select the LayoutRoot element. Then go to the Properties panel and select the RowDefinitions ellipses button [...].

   Select the first RowDefinition in the list, set its Height property to Auto, then click OK to close the dialog and save changes.

   Now the first row of the layout Grid should auto-size to only take up enough space to fit the ToolBar Tray:

   

Simply adding the Navigation ToolBar to the window is all you need to do to integrate it with the window's navigation features. The Navigation ToolBar automatically registers itself with the Window and can be used to navigate through the window's records. It also responds properly when a user manually selects items in the Navigation Control DataGrid.

Testing the Navigation ToolBar

1. Press the Visual Studio Start button to build and run the application, then launch the Customer Orders window.

2. Notice the navigation toolbar in the upper left corner of the window:

   

   All buttons are disabled because there are currently no records in the Orders DataGrid.

3. In the Customer ID Auto Complete TextBox enter Q, and select QUEDE from the drop down list to select all orders for this customer.

   Notice the first and second navigation buttons are disabled, and the third and fourth are enabled. This is because the row pointer in the Orders DataGrid is sitting on the first record. Try clicking the different navigation buttons and you will see the row pointer in the DataGrid automatically move to the corresponding record.

   While this may not seem useful, now click on the Properties page, and click the different navigation buttons. Now you can easily navigate through all orders for the current customer without going back to the List page.

4. Now go back to the List page and try clicking on the DataGridView to select the first, last, and other records. Notice the navigation toolbar buttons automatically enable and disable based on this manual navigation. This occurs because the navigation toolbar is listening to the RowChanged event of the DataGridView.

Specifying Elements to Receive Focus

If the application is still running, close it. Go to the Solution Explorer and double-click CustomerOrdersWindow.xaml.vb to open it in the code editor.

In the window's constructor, there are already a few lines of code that set focus to the New button when the user clicks Cancel, first loads the window, or clicks Save (you can change this code to set focus to a different element if you prefer):

Me.FocusOnCancelElement = Me.btnNew

Me.FocusOnLoadElement = Me.btnNew

Me.FocusOnSaveElement = Me.btnNew

Change the FocusOnLoadElement to the actCustomerID auto-complete text box. Then add another line of code that sets the FocusOnNewElement to the txtCustomerID:

Me.FocusOnCancelElement = Me.btnNew

Me.FocusOnLoadElement = Me.actCustomerID

Me.FocusOnSaveElement = Me.btnNew

Me.FocusOnNewElement = Me.txtCustomerName

Now if you run the window again, notice the auto-complete text box gets focus when the window first loads. If you click the New button, focus is set to the txtCustomerName text box. If you go to the Properties tab and click on the Cancel and Save buttons focus is set to the New button on the List tab.

See Also:
Step 12. Enhancing the DataGrids