In this lecture, you will explore the grid.
Now, one thing to mention before we get started is that in line eight for me, for example, you can
see the title which says Main Window, which is exactly what you can see here in the graphical user
interface in the main window.
And we can specify a height for 150 800.
Well, if we want to adjust that, we can simply change the numbers here, right?
So now for sure, our application has a fixed size of 500 pixels.
Now just want to remove that.
I just wanted to show you that you can for sure adjust those properties.
Right here we have our grid, but that doesn't look like a grid right now.
A grid is always made up.
Well, columns and rows.
Just think of an Excel spreadsheet.
For example, you have, let's say, three columns and then you have, let's say 3 or 5 rows.
So if we want to create rows inside of a grid, we will have to add column definitions and row definitions.
Now one thing to mention is that we for sure have different tags.
So here we have a grid tag.
This is called an open tag and associated to an open tag.
We always have a closing tag which you can identify by searching for the slash.
So the grid open tag right here.
This is the closing tag.
And in between we can specify more tags.
Now let's set up our grid column definitions.
Therefore, we simply open up a new tag.
We create a open tag called grid dot column definitions.
There we go.
We got some auto suggest here.
Right?
And then add a closing tag automatically.
The closing tag got created right here, which is perfect.
That saves us a lot of time and headache.
Now let's open it up.
And in between those column definitions, I will just resize that real quick.
Inside of those column definitions, we can now create our column definition.
So let's create a new column definition.
Now we can specify our first column.
Some text in WPF are self-closing, so we can shorten it up.
Instead of having an open tag and a closing tag, we can just combine it, remove the closing tag and
simply add a slash.
In that way, we cannot add something in between, but we can still make use of the column and we'll
add a property here.
Let's say we make the width of that column.
We want to set it to, let's say 100 pixel.
In that way, we have now created our first column.
Let's take a look at our application real quick.
Well, you cannot really notice it, so let's simply continue.
Let's copy and duplicate those columns.
Let's create three in total where the middle one is set to a width of 200 pixel.
Now, if you take a look at the designer right here, you can now see or notice that we have three columns,
the first one, the second one, and the third one.
Same applies for the rows.
So as a sibling to the column definitions or as another child in the grid tag, we now simply go ahead
and open up our grid row definitions.
So create a row definitions tag.
Closing tag will automatically get created, hit, enter.
And inside here we now want to create our row definition just like this and add a slash here so that
we have a self-closing tag.
Now instead of adding a width, we want to add a height here.
So let's say height is equals to 50.
Let's copy that row.
So that we have two in total and we set for the second one, we set it to 100.
Now let's take a look at our application again.
We now have two rows here.
We got the first one.
Just follow along with my cursor and then we have a second one right here.
Now what you can see like those differences between, okay, my let's say height is like set to 100.
This is not 100.
Right.
So we got way more than 100 pixels.
And this is because the sum of this 150 does not end up in our entire height of 450.
So WPF simply says like, okay, then the last row in that case, same applies for the columns.
We'll get the rest of the space which is required to build that entire width and height of our application,
what we have specified right here.
Great.
So now let's take a look on how we can make that way more dynamic because we really don't want to provide
any hardcoded values like 100, 250 and 100 right here.
That does not always make sense.
Sometimes we want to add that, let's say, for example, to create a border.
But in most scenarios we want to build it as dynamic as possible.
So pay attention in the next lecture that one is really important.