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.