YouTube Tutorial #

Grid is one of the most flexible layout options.

It not only allows you to add multiple controls but also setup column and row-wise alignment of them.

There is one Grid present by default on your form, which you can see by clicking on it or from the XAML below:

There is a light blue shadow at the left and top of the grid.

It is from where you can add rows and columns.

Simply click on it to add as many rows or columns you want and drag them to adjust the size as shown below:

Adjusting size of rows and columns in Grid #

Relative Sizing #

Relative Sizing is done by adding the * after the value.

What it basically does is adjust the sizes accordingly to total the number to 10.

For instance, 6* and 4* will make the first column take 60% of the space while the other 40%.

This sizing will however adjust accordingly as per the change of size of the grid.

This is how the division of 2* and 8* looks in the Grid:

By setting up all to 1*, you can get four equal quadrants as follows:

Auto Sizing #

This sort of sizing allows the column or row to expand as per the size of controls within it.

It will occupy just as much space as required to hold the controls in it completely.

For this, you need to add the keyword of auto in the sizing.

The image below shows its implementation:

As you can see, the columns adjust the size to fit the long TextBlock accordingly.

Changing the Grid Row and Column of the Control #

Every control has the Grid Row and Column number attached to it in accordance with its location in the Grid.

By default, the foremost space in grid is started from 0.

As you can see the TextBlock is located in Column and Row 0 of the Grid.

You can change this by selecting the control and navigating to the Grid Row and Grid Column under the Layout options in the Properties Tab.

By incrementing the Row by 1, you will see the Button has shifted to the row below while being in the column 0:

Grid Row Span and Grid Column Span #

By Row Span or Column Span, you can merge the desired number of columns or rows to the right or below of the current column or row respectively.

To understand this, follow the steps below:

Drag a Border from the TOOLBOX onto the form. Add color to it from the PROPERTIES tab to make it visible enough for comprehension.

Right-click on the border and select Fill Parent which will make the border fill the part of Grid you have dragged it in which happens to be the Column and Row 0.

Select the Border, and navigate to the Layout options under the Properties tab.

Increment the Grid RowSpan or Grid ColumnSpan as per the choice. This is how the application will look like after the ColumnSpan of 2

You can set up the Grid RowSpan as well, making the application look like as follows:

Properties, Events and Methods #

All of the properties, methods, and events can be found in Microsoft’s documentation at:

https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.grid?view=windowsdesktop-6.0