Step 5: Adding UI Elements to the List Page

In this step you will add a Label, Auto-Complete TextBox and a DataGrid to the List page. By default, the Window has a DataGrid and three buttons on the List page.

You need to add an MM .NET Auto-Complete TextBox above the DataGrid, but in WPF you don't just drag and drop controls as you do in Windows Forms. Instead, you use layout grids (different than DataGrids) to lay out your user interface controls. This allows your WPF user interfaces to look great regardless of the dpi or font settings on end user computers. When you're finished your List page will look like this:

1. From the Visual Studio View menu, select Other Windows | Document Outline. Pin the Document Outline window so you can easily go back and forth between it and your WPF Window as you lay out the user interface:

   

   The Document Outline window provides a hierarchical view of your WPF user interface. You can select an item in the Document Outline window and it automatically selects the corresponding user interface element in the WPF design surface.

2. In the Document Outline window, select the grdDataGrid below the tabList:

   

   When you do this, the layout Grid in the WPF Window design surface is highlighted:

   

   This layout Grid has two columns. The column on the left contains a WPF DataGrid. The column on the right contains a StackPanel control that in turn contains three buttons.

3. Currently, there are no rows in the layout Grid. You can add three rows--one to hold a label, one to hold the Auto-Complete TextBox, and the other to hold the DataGrid.

   With the layout Grid selected, go to the Properties window under the Layout section, find the RowDefinitions property and click the associated ellipses button. This lauches the Collection Editor dialog. Click the Add button three times to add three Row Definitions:

   

4. By default, the height of each column is marked with an * which indicates that each row will take an even distribution of the available height. Since you want the DataGrid to take up most of the space, change the first row's Height property to .1 Star, the second row's Height property to .15 Star and the third row to 1 Star. This divides the available space into a .10/.15/* ratio where the first row takes up 10% of the space, the second row takes up 15% of the space and the third row takes the remainder of the space. Click the OK button to save these settings.

5. Notice that by default, the DataGrid is placed in the first row of the layout Grid. To move it to the third row, select the DataGrid in the design surface (by clicking on it directly or by clicking on its representation in the Document Outline window) and in the Properties Window change the Row property to 2. This moves the DataGrid down to the third row:

   

6. Notice the buttons on the far right have also been placed in the first row of the layout Grid. You want these buttons to span the full height of the Grid. To do this, select the stpButtons StackPanel in the Document Outline panel that contains these buttons, go to the Properties Window and set the RowSpan property to 3. This centers the StackPanel:

   

7. Go back to the Document Outline window and reselect the layout Grid (the item below tabList in the Document Outline window). Then go to the Visual Studio Toolbox under the Common WPF Controls tab double-click the Label control. This adds the control to the upper left corner of the layout Grid's first column and first row:

   

   With the Label selected, go to the Properties Window and set the following properties:

   Property	Value
   Content	Customer ID:
   RowSpan	1
   Margin	5, 5, 5, 5
   Padding	0, 0, 0, 0
   VerticalAlignment	Bottom

8. Go back to the Document Outline window and reselect the layout Grid. Now go to the Toolbox under the MM .NET WPF Controls tab and double-click the mmAutoCompleteTextBox control. This adds the control to the upper left corner of the layout Grid's first column and first row.

   With the Auto-Complete TextBox selected, go to the Properties Window and set the following properties:

   Property	Value
   Name	actCustomerID
   Row	1
   RowSpan	2
   HorizontalAlignment	Stretch
   ListDisplayMember	CustomerID
   ListSelectedValueMember	CustomerID
   Margin	5, 5, 5, 5
   Width	Auto

9. In the Document Outline window, select the TabControl, then go to the Properties panel and set the Margin to 5, 5, 5, 5.

10. Select the grdDataGrid in the Document Outline, then go to the Properties panel and set its Name property to grdOrders.

11. Sadly, changing the name of the DataGrid in the designer does not automatically change associated code, so go to the Solution Explorer and open the CustomerOrdersWindow.xaml.cs file and change the code at the bottom of the window to reference grdOrders:

    this.NavigationControl = this.grdOrders;

    
    

When you're finished, your List page should look like this:

See Also:
Step 6: Adding UI Elements to the Properties Page