Step 12: Enhancing the DataGrids

In this step you will enhance the appearance of the Order and Order Detail DataGrids.

Enhancing the Orders DataGrid

In the Solution Explorer, select the CustomerOrdersWindow.xaml file, and then select the Order DataGrid on the List page. Go to the Properties panel and under the Columns section, uncheck the AutoGenerateColumns check box.
Under the Grid Lines section, set the GridLinesVisibility property to None.
Under Headers, set the HeaderVisibility to Column. This prevents the row headers from appearing and gives the DataGrid a cleaner look.
In the Properties panel under the Rows section, set the SelectionMode to Single. This specifies that clicking in any DataGrid column selects the entire row.
In the Columns section, click the Columns (Collection) ellipses button [...] to launch the DataGridColumn Collection Editor.
At the bottom of the Collection Editor dialog, select DataGridTextColumn from the drop down list. Click the Add button to add the new text box column to the DataGrid.
Add five more DataGridTextColumns to the DataGrid as you did in the previous step, so you have a total of six (0-5) columns in the DataGrid:
In the DataGrid Collection Editor dialog, select [0] DataGridTextColumn. In the Properties list on the right under Layout, set the Width property to .16*.
In the Properties list under Cell Binding, click the tiny Advanced Property Option square to the right of the Binding property, and select Create Data Binding... from the shortcut menu. In the Create Data Binding dialog, the Binding Type should already be set to Data Context. Select the OrderID property, then click OK:
Under the Header section, set the Header property to Order ID:
Now select the [1] DataGridTextColumn. Set its Width to .2*.
Afterwards, bind this column as you did in the previous step, but this time to the OrderEntity's ShipName property.
Next, set its Header property to Name.
The next three columns contain dates and need to be handled a little differently.
Select [2] DataGridTextColumn and set its Width to .16*.
Afterwards, click the tiny Advanced Properties square to the right of the Binding property, but this time select Custom Expression... from the shortcut menu.
In the Custom Expression popup, set the value of custom expression to:
```
{Binding OrderDate, Mode=Default, StringFormat=\{0:MM/dd/yyyy\}}
```
Press Enter to close the popup. This binds the DataGrid column to the OrderDate property of the entity object, and formats the value to a short date.
Next, set the Header property to Date.
Select [3] DataGridTextColumn and set its Width to .16*.
Next, as in the previous step, set the Binding property's Custom Expression..., but this time set the value to:
```
{Binding RequiredDate, Mode=Default, StringFormat=\{0:MM/dd/yyyy\}}
```
Afterwards, set the Header property to Required.
Select [4] DataGridTextColumn, and set its Width to .16*.
Next, as in the previous step, set the Binding property's Custom Expression..., but this time set the value to:
```
{Binding ShippedDate, Mode=Default, StringFormat=\{0:MM/dd/yyyy\}}
```
Afterwards, set the Header property to Shipped.
Select [5] DataGridTextColumn and set its Width to .16*.
This isn't a date column, so you can set the Binding as you did for the first two columns. This time bind the column to the ShipCountry property of the entity, and set the Header property to Country.
Click OK to close the DataGrid Column Collection Editor dialog. Your Orders DataGrid should look something like this:

Enhancing the Order Detail DataGrid

Select the Customer Orders window in design mode, then select the Order Detail DataGrid on the Properties page. Go to the Properties panel and under the Columns section, uncheck the AutoGenerateColumns check box.
Under the Grid Lines section, set the GridLinesVisibility property to None.
Under Headers, set the HeaderVisibility to Column.
In the Properties panel under the Rows section, set the SelectionMode to Single.
In the Columns section, click the Columns (Collection) ellipses button [...] to launch the DataGridColumn Collection Editor.
At the bottom of the dialog, select DataGridTextColumn from the combo box. Click the Add button to add the new text box column to the DataGrid:
Add four more DataGridTextColumns to the DataGrid as you did in the previous step, so you have a total of five (0-4) columns in the DataGrid:
In the DataGrid Collection Editor dialog, select [0] DataGridTextColumn. In the Properties list on the right under Layout, set the Width property to .2*.
In the Properties list under Common Properties, click the tiny Advanced Property Option square to the right of the Binding property, and select Create Data Binding... from the shortcut menu. In the Create Data Binding dialog, the Binding Type should be set to Data Context . Under the OrderDetailEntity node, select the OrderID property, then click OK.
Under the Headers section, set the Header property to Order ID.
Select the [1] DataGridTextColumn and set its Width to .2*.
Afterwards, bind this column as you did in the previous step, but this time to the OrderDetailEntity's ProductID property.
Next, set its Header property to Product.
Select [2] DataGridTextColumn and set its Width to .2*.
Afterwards, bind this column to the OrderDetailEntity's UnitPrice property.
Next, set the Header property to Price.
Select [3] DataGridTextColumn and set its Width to .2*.
Afterwards, bind this column to the OrderDetailEntity's Quantity property.
Next, set the Header property to Qty.
Select [3] DataGridTextColumn and set its Width to .2*.
Afterwards, bind this column to the OrderDetailEntity's Discount property.
Next, set the Header property to Discount.
Click OK to close the DataGrid Column Collection Editor dialog. Your Order Detail DataGrid should look something like this:
To see how the enhanced grids look at run time, click the Visual Studio run button and launch the Customer Orders window.