Mastering WPF DataGrid in a Day: Hour 2 DataGrid Layout and Border

In the first hour of the series Mastering WPF DataGrid in a Day: Hour 1 Introduction, you saw how to create a WPF DataGrid using Visual Studio and how to bind and display a simple data collection in the DataGrid.

In this Hour 2 part of this series, I will talk about the control layout and border. The properties I will focus on in this article are margin, width, height and border.

Margin

Properties are one of the most important aspects of an element (control). Each element in WPF has two ways to use and set properties values. The first is at design-time by setting values in XAML and the second, at runtime by setting property values in C# code.

The Margin property sets the placement margins of a DataGrid on a window. The margin is the space between the DataGrid and other controls that will be adjacent when layout creates the user interface.

The Thickness describes the thickness of a frame around a rectangle. It has four double values that describe the left, top, right and bottom sides of the rectangle, respectively.

If you drag and drop a DataGrid on a Window and resize it, you will see a rectangle with a Blue border and four handles with double values. These values are the margin values of the DataGrid. See Figure 4.


Figure 4

The XAML code for the DataGrid element is listed in Listing 6. Listing 6 sets the Martin property of the DataGrid at design-time.

<DataGrid Height="148" HorizontalAlignment="Left" Margin="26,24,0,0"
Name=" McDataGrid" VerticalAlignment="Top" Width="225" />

Listing 6

The code snippet in Listing 7 creates a Thickness and sets the DataGrid's Margin property.

Thickness gridMargin = new Thickness();
gridMargin.Bottom = 20;
gridMargin.Left = 20;
gridMargin.Right = 24;
gridMargin.Top = 10;
DataGrid1.Margin = gridMargin;

Listing 7

Height and Width

The Width and Height properties represent the width and the height of a DataGrid. The code snippet in Listing 8 sets the height and properties of a DataGrid.

<DataGrid HorizontalAlignment="Left" Margin="26,24,0,0" VerticalAlignment="Top" Height="227" Width="458"/>

Listing 8

The code snippet in Listing 9 sets the Height and Width properties of a DataGrid at run-time.

dataGrid1.Width = 800;
dataGrid1.Height = 200;

Listing 9

Note: If you have both approaches, the run-time values will apply last.

You may want to use the runtime approach when you're not sure about the property settings. But if you already know all properties values when designing the interface, the design-time settings are recommended.

Fill Width

Often we require a DataGrid to fill the entire window horizontally. We can do so by setting the HorizontalAlignment, HorizontalContentAlignment and ColumnWidth properties to Stretch, Stretch and * respectively. See Listing 10. Also not the Margin property values have updated as well.

 

<DataGrid Margin="0,0,0,0" VerticalAlignment="Top"
Height="227" HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
ColumnWidth="*" Name="DataGrid1"/>

Border

The BorderBrush and BorderThickness properties are used to set the color and width of the border. A Border element applies a border to an element, a DataGrid in this case.

The following code snippet sets the border color to Gray and thickness to 5.

<DataGrid Margin="0,0,0,0" VerticalAlignment="Top"
Height="227" HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
ColumnWidth="*" Name="DataGrid1"
BorderBrush="Green" BorderThickness="10"/>

The DataGrid with a new border looks like Figure 5.


Figure 5

A border element can be used to do much more, even display a colorful and image filled border. Check out the article:

• Learn Border in WPF

Summary

In this first article of the Mastering WPF DataGrid series, we saw how to resize and position a DataGrid element on a Window. We also saw how to create a border of the DataGrid element.

In the next article of this series, I will cover some of the common properties of the WPF DataGrid.

<<Previous Article                                     Next Article>>