‫Welcome back.
‫Now it's finally time to use Grid.
‫And you have seen how to use stack panel before and rack panel and those to day well stacked and wrap
‫things up.
‫And now we will check out grid which allows us to position things in a grid and we will start off by
‫simply using a two times two grid.
‫And first of all, what we need for that is a column and a row definition so we can go ahead and within
‫our grid.
‫So go to your example file and then within the grid, create a grid dot column definition.
‫And here you can define your different columns.
‫So first of all, you need the column definitions, plural, and then you can go ahead and create your
‫individual column definitions.
‫For example, you can go ahead and create one here.
‫I'm going to keep it simple in one line, just like that.
‫And what I want to define in here is simply the width and the width.
‫I could, let's say, put it to 100 and now let's create another column, which is also going to be
‫100 wide.
‫Now that's not enough.
‫We also need to have rows, except we only want to have one row.
‫So let's start off with one row only and I'm just going to create a button first and this button is
‫going to be saying something like, Hi there, and it should be in the grid dot column zero.
‫And now I create a second button, which should be the grid, that column one.
‫Now if we look at our design now we can see we have our two buttons.
‫Hi there.
‫Let's run our code just to see how this looks.
‫By the way, they are only 100 pixels wide, as you can see here, so the width is limited to 100 pixels.
‫So if you add a total value here, then that will simply use it as pixels in the width.
‫As you can see here, that's how wide a column is.
‫And of course, we could say we can put some more columns in here easily.
‫Well, we can do that and we'll do that later on.
‫But before we do that, I would like to show you something very important.
‫So if I drag my XAML up here now, it's actually useful because we will see the difference in our UI
‫directly.
‫And I want to change the width from 100 to auto.
‫And as you can see, what auto does.
‫It automatically only takes the width that is required to fit in all the content that there is inside
‫of the element.
‫So in our case, the button has a text called Hi there, and that's how much space hi there needs or
‫requires.
‫And that's also how wide our button is going to be.
‫And as you can see, it's for the first column definition.
‫So the first column definition where our button with hi there one is that's how the or that's the button
‫that is changed.
‫As you can see now it's changed to 59.5 pixels.
‫If I add some more text, some more text, you can see it's widening it to 153.5 pixels.
‫So you can easily go ahead and well use auto if you want everything to fit in correctly based on how
‫much space it actually needs.
‫But what if I want to make the columns exactly the same width?
‫Well, of course I could use full values here or fixed values here, but I can also use star.
‫And what star will do is it will if all the all of them have star, it will simply say, okay, take
‫up all the space.
‫And in this case, it's only the space available that this specific column has, and it's exactly the
‫same as the others.
‫So there is a weighting now.
‫So this has a weight of one and that one has a weight of one as well.
‫So they are equally weighted, which means they are equally width.
‫If we want to change that, let's say I want to make this second one here, the second button double
‫as wide as the first one I can use double star.
‫So now this one will be twice as wide as the first one.
‫If I, for example, want to have three of the fifth on the left hand side and 2/5 on the right hand
‫side as their width.
‫I can simply use this approach, as you can see here.
‫So three times the star and two times the star.
‫So what it does, it actually adds it all up and then it only takes the multiple second of what is set
‫in here.
‫So let's say we have three and two.
‫So what it does, it says, okay, now it's five total.
‫Units that are available, and I'm going to take 3/5 of those units.
‫Now, you could even go ahead and do something like 100.
‫So you can see this one takes 100.
‫And this only take only takes two.
‫So so that's how you can play around with the widths.
‫And the same goes for the heights.
‫So now let's go ahead and create a row definition.
‫So grid dot row definitions.
‫And in here we can go ahead and create our row definitions.
‫So the first one, and I'm going to keep it simple as well, like in one row.
‫And this one needs a height.
‫So I'm just going to say, okay, I want to have the star height.
‫And now we use the same thing again for the second row.
‫And as you can see now we have two rows.
‫So one here and the second one at the bottom.
‫And as you can see, the second row doesn't have any content yet.
‫So now let's change that by let's say, first of all, putting this button here to the bottom.
‫Right.
‫And how can we do that?
‫Well, we simply use grid dot row and we say it's at row one.
‫Now, you might wonder, why is it one?
‫Why is it not two?
‫Well, as you probably know already in programming, we start counting with zero.
‫So the first row is zero, the second row is one.
‫So now high there is the second row, which is row one.
‫Now let's go ahead and create two more buttons and maybe even change their names to something that has
‫more to say about their actual info.
‫So I'm going to put that into the column zero in row one and that one actually, I'm going to put it
‫back to zero one and that one will be at one one and actually that will be column one and row zero like
‫that.
‫So now we have all the buttons and that one will be one.
‫That one will be button two, button three and button four.
‫Great.
‫So now if we start that, you will see that.
‫Well, it counts as well for the UI itself.
‫So one, two, three, four.
‫All right.
‫Now a little challenge for you as you have seen how to use grid columns and rows.
‫Please go ahead and make a three times three grid here with eight buttons.
‫So 1 to 8 should be buttons and the ninth position.
‫So the bottom right hand position or grid element should be a text block.
‫So please pause the video and try to do that.
‫All right.
‫I hope you tried it.
‫So what I'm going to do is I'm going to add another column by adding a column definition here, and
‫it's going to be equal width and the same for the height.
‫It's going to be equal height.
‫And now, as you can see, the buttons, they look a bit weird.
‫But that's just because I haven't.
‫A zoomed out yet.
‫So now we can see it correctly.
‫Now we have our buttons with zero one and so forth.
‫So I'm going to copy that button here and I'm going to position it at column two.
‫So Row zero and column two.
‫Now, you could, of course, argue it makes more sense to start off with the row and then enter the
‫column.
‫Well, you can do that, but in my case, it's the other way round.
‫In the end, what matters is that you use both of them correctly.
‫Now we have the three buttons at the top.
‫Now let's go ahead and create the second row or finalize the second row.
‫And that's the column two.
‫And I'm going to copy that three times, actually, two times enough.
‫And that one will be row to position zero and row two, position one or column one.
‫Now, of course, we need to change the values.
‫So one, two, three, four, five, six, seven and eight.
‫And as I said, at the bottom left, I would like to have a text block.
‫So the text block has the same approach with grids.
‫You need to have a column and a row.
‫So I'm just going to say this is going to be column two and grid row two as well.
‫So now we're at the bottom, left or bottom right now we can go ahead and give it some text.
‫And I'm just going to say something like text.
‫Now you might say, oh, I don't like it.
‫The text is at the top left.
‫Well, you can easily change that by entering something like horizontal alignment and use center here.
‫So now it's centered horizontally.
‫Let's zoom in so you can see.
‫All right.
‫And now if I want to center it vertically as well, I simply use vertical alignment and I use center
‫here as well.
‫So now as you see, the button is centered perfectly and we can even go ahead and change the font size
‫just because we can and let's make it a little bigger like 32.
‫And now you can see we have a three times three grid with eight buttons and a text.
‫Now you could go ahead and align all different kinds of elements in your window here in your main window
‫and your grid.
‫So that's the beauty about using grids.
‫And as you have seen, you can stack up things.
‫You could create a stack panel with multiple grids and additionally you have a text in between or something
‫like that.
‫So you're not limited to use one element in here.
‫As you can see, we could go ahead and let's say put that into a stack panel.
‫Stack panel like that.
‫So I'm going to drag the grid.
‫As you can see now, it's complaining because the window example, main window only knows the first
‫one.
‫So it only will see the STACK panel if we now check out our appearance.
‫Actually, let's stop it so we can see now it says invalid markup.
‫So if we take the whole grid inside of our Stack panel, as you can see, it's there and it's text it
‫up.
‫So at the bottom there is plenty of space.
‫So here we could add another button, just so you see that this is possible and this one is going to
‫be to have a height of 100.
‫And now, as you can see, it's all stacking up there at the top.
‫And even though we have this height that they are all the same height, this text needed so much space
‫that it's ignoring that.
‫So the font size is too big.
‫So if we go back to 16, it's still too big.
‫If we go to let's say 12 now it seems more like it.
‫So whenever you use row definitions with this star, you have to be careful.
‫If a element needs more space than there is, then it will overflow.
‫All right.
‫So that's two grids.
‫I'm going to go back to the beautiful standard grid that we had there.
‫And generally, what I always recommend after you have seen something like that and after you have learned
‫something like that, please go ahead and play around with it.
‫Just play around with some different types of elements.
‫You've seen some already, and we'll look into a lot more controls later on.
‫So the ones that we have used so far are mainly buttons, right, and text blocks, but we will use
‫different beautiful controls in the future videos.
‫So see you there.