Step 6: Adding UI Elements to the Properties Tab
In this step you will add user interface elements to the Properties tab that allow you to edit the Order Header and Order Details. First, you are going to delete a few user interface elements that you don't need for this Window. When you're finished with this step, your Properties tab should look like this:
Deleting Existing User Interface Elements
- Go to the Document Outline window and select the tabProperties node. This displays the Properties tab in the design surface.
- Click on the + sign to expand the tabProperties node, then expand the Grid subnode, then select the nested StackPanel node:
This selects the StackPanel containing the buttons at the bottom of the in the WPF Window. Right-click the StackPanel node in the Document Outline and then press the Delete key to delete it from the window.
Setting up the Layout Grid
- Go back to the Document Outline window and select the GroupBox (it should already be selected). This selects the GroupBox in the WPF Window design surface. Right-click the four-headed arrow at the upper left corner of the GroupBox, then select Delete from the shortcut menu to remove it from the Window:
- Go back to the Document Outline and select the nested layout Grid (it may already be selected). Go to the Properties Window and set the Margin to 5, 5, 5, 5.
- With the layout Grid selected, go to the Properties Window and click the ColumnDefinitions ellipses button [...].
In the Collection Editor, click the Add button four times to add four columns to the layout Grid. Set the Width property of each column as follows:
Column Number Width Column 0 .2* Column 1 .4* Column 2 .2* Column 3 .4* When you're finished, click OK to close the dialog.
- Go back to the Properties Window and click the RowDefinitions ellipses button [...].
In the Collection Editor, click the Add button eight times to add eight rows to the layout Grid (for a total of ten). Set the Height property of each column as follows:
Row Number Height Row 0 30 pixels Row 1 .1 Star Row 2 .1 Star Row 3 .1 Star Row 4 .1 Star Row 5 .1 Star Row 6 .1 Star Row 7 .1 Star Row 8 30 pixel Row 9 .3 Star Click OK to close the Collection Editor dialog. Your layout Grid should look like this:
Adding Controls to the Layout Grid
- Drag a Label from the Visual Studio Toolbox and drop it in Column 0, Row 0 of the layout Grid (upper left corner). Set the following properties on the Label:
Property Value Content Order Header Row 0 RowSpan 1 Column 0 ColumnSpan 1 Margin 0, 0, 0, 0 VerticalAlignment Center Width Auto - Add a second Label to the Window and place it in Column 0, Row 1. Set the following properties:
Property Value Content Order ID: Row 1 RowSpan 1 Column 0 ColumnSpan 1 HorizontalAlignment Right Margin 0, 0, 0, 0 VerticalAlignment Center Width Auto - When you're finished with the first two labels, your Window should look like this (one label justified left and the other justified right):
- Now add other Labels in the appropriate column/row so your Window looks like this. It's easiest to copy and paste the existing labels rather than drag a new Label each time from the Toolbox:
Note that the property settings don't always transfer from one object to another when you copy and paste, so always check the settings listed in the following table to make sure they are set correctly:Property Value Content (the text displayed in the image): HorizontalAlignment Right Margin 0 VerticalAlignment Center Width Auto - From the Visual Studio Toolbox, drag and drop TextBoxes onto the layout Grid as shown here. After dropping each TextBox, make sure the Margin is set to 0 , VerticalAlignment to Center, HorizontalAlignment to Stretch and Width to Auto:
- Next, select the text boxes identified by their associated labels and set their Name property to something descriptive. For example:
Label Name Order ID: txtOrderID Customer: txtCustomerID Name: txtCustomerName Address: txtAddress City: txtCity Region: txtRegion Postal Code: txtPostalCode Country: txtCountry Freight: txtFreight - From the Visual Studio Toolbox, drag and drop two ComboBoxes and a DataGrid on the layout Grid as shown below.
- Set the ComboBoxes' Margin to 0 , Vertical Alignment to Center, Horizontal Alignment to Stretch, and Width to Auto.
- Set the DataGrid Margin to 0 , its ColumnSpan to 3, Horizontal and Vertical Alignment to Stretch, and Height and Width to Auto.
- Afterwards, change the name of the first ComboBox to cboShippers and the name of the second ComboBox to cboEmployees.
Select the DataGrid, go to the Properties Window and set its Name property to grdOrderDetail.
- From the Visual Studio Toolbox's All WPF Controls tab, drag a GroupBox and drop it on the cell to the right of the Order Header label. Drop a second GroupBox on the cell to the right of the Order Detail label. Afterwards, go to the Properties Window and set both GroupBox properties as shown here:
Property Value RowSpan 1 Header (delete all text) Width Auto Height Auto Margin 0, 0, 0, 0 HorizontalAlignment Stretch VerticalAlignment Center - Select the Name and Address TextBoxes and the GroupBoxes. Go to the Properties Window and set the ColumnSpan property to 3. This causes the selected controls to span three columns:
- Next, buttons need to be added to the Window. This presents a small challenge because typically buttons come in sets of two or more that need to be positioned close to each other. Fortunately, you can use nested layout Grids to solve this problem.
Drag a Grid from the Visual Studio Toolbox and drop it into the cell directly below the Freight TextBox. Afterwards, set these properties:
Property Value Column 3 ColumnSpan 1 Row 7 RowSpan 1 Margin 0, 0, 0, 0 Width Auto Height Auto Horizontal Alignment Stretch Vertical Alignment Center - Next, go to the ColumnDefinitions property and add two columns to the layout Grid. You can leave the default width settings so the width of the layout Grid is split evenly between the two columns:
- Go to the Visual Studio Toolbox MM .NET WPF Controls tab and drag an mmButtonCancel and mmButtonSave and drop them in the cells of the nested layout Grid. Afterwards, set the Margin property of the buttons to 0 , set the VerticalAlignment and HorizontalAlignment properties of the buttons to Center and set the Content of the buttons to Cancel and Save respectively:
Afterwards, change the name of the buttons to btnCancel and btnSave.
- New and Delete buttons also need to be added to the Window for adding and deleting Order Detail items. These buttons should be stacked vertically so the setup is a little different.
Drag and drop a layout Grid from the Visual Studio Toolbox into the cell directly to the right of the Order Detail DataGrid. Afterwards, set these properties:
Property Value Width Auto Height Auto Row 9 RowSpan 1 Column 3 ColumnSpan 1 HorizontalAlignment Stretch VerticalAlignment Stretch Margin 0, 0, 0, 0 - With the layout Grid selected, go to the Properties Window and click the RowDefinitions ellipses button [...].
In the Collection Editor, click the Add button four times. This adds four rows of the same height to the layout Grid. When you're finished, your layout Grid should look like this:
- Go to the Visual Studio Toolbox Common tab, drag a Button control and drop it in the second row of the four-row layout Grid you just created. Afterwards, set the following properties:
Property Value Name btnOrderDetailNew Content New Row 1 RowSpan 1 HorizontalAlignment Center VerticalAlignment Center Margin 0, 0, 0, 0 - Next, go to the Visual Studio Toolbox MM .NET WPF Controls tab, drag an mmButtonDelete control and drop it on the third row of the layout Grid. Afterwards, set the following properties:
Property Value Name btnOrderDetailDelete Content Delete Row 2 RowSpan 1 HorizontalAlignment Center VerticalAlignment Center Margin 0, 0, 0, 0 When you're finished, the buttons should look like this:
- Next, select all the text boxes in the window (hold the Control key down and click on each one), and then go to the Properties window, click the small square to the right of the Text property and select Reset from the shortcut menu. This clears all text from the TextBoxes.
- Finally, select the txtOrderID text box, and in the Properties panel, check the IsReadOnly property check box.
See Also:
Step 7: Running the Window
Comment or report problem with topic