Using XAML Grid Panel

The WPF Grid Control is a content control that represents data in a flat columns and rows format where a row and a column may be managed independently.

The Grid element in XAML represents a WPF Grid control. The following code snippet creates a Grid control, sets its width and foreground color and ensures the grid lines are visible.

The ColumnDefinitions property is used to add columns and the RowDefinitions property is used to add rows to a Grid. The following code snippet adds three columns and three rows to a grid.
Any control in WPF can be placed within a grid using its Grid.Row and Grid.Column properties that represents what column and what row a control will be placed in. The values of rows and columns start with 0. That means, if there are three columns in a grid, the first column would be represented by the number 0. The following code snippet puts a TextBlock control in a cell that is in the second row and the third column.
Here is the complete code to create a Grid with three columns and three rows and some text data in the grid cells.
The output looks like this.



The following code snippet adds a Grid splitter to a Grid that you can use to resize a Grid row.
The Background property of a Grid sets the background colors of a Grid. The following code snippet uses linear gradient brushes to draw the background of a Grid.
The new Grid looks like Figure 1.



Figure 1

This article has moved here: WPF Grid Panel tutorial