1 00:00:00,450 --> 00:00:01,330 ‫Welcome back. 2 00:00:01,350 --> 00:00:03,750 ‫Now it's finally time to use Grid. 3 00:00:03,750 --> 00:00:10,140 ‫And you have seen how to use stack panel before and rack panel and those to day well stacked and wrap 4 00:00:10,140 --> 00:00:10,890 ‫things up. 5 00:00:10,890 --> 00:00:17,880 ‫And now we will check out grid which allows us to position things in a grid and we will start off by 6 00:00:17,880 --> 00:00:20,880 ‫simply using a two times two grid. 7 00:00:20,880 --> 00:00:29,130 ‫And first of all, what we need for that is a column and a row definition so we can go ahead and within 8 00:00:29,130 --> 00:00:30,000 ‫our grid. 9 00:00:30,240 --> 00:00:38,940 ‫So go to your example file and then within the grid, create a grid dot column definition. 10 00:00:40,650 --> 00:00:42,990 ‫And here you can define your different columns. 11 00:00:42,990 --> 00:00:48,630 ‫So first of all, you need the column definitions, plural, and then you can go ahead and create your 12 00:00:48,630 --> 00:00:50,730 ‫individual column definitions. 13 00:00:50,730 --> 00:00:54,090 ‫For example, you can go ahead and create one here. 14 00:00:54,090 --> 00:00:58,530 ‫I'm going to keep it simple in one line, just like that. 15 00:00:58,530 --> 00:01:03,210 ‫And what I want to define in here is simply the width and the width. 16 00:01:03,210 --> 00:01:11,040 ‫I could, let's say, put it to 100 and now let's create another column, which is also going to be 17 00:01:11,040 --> 00:01:12,450 ‫100 wide. 18 00:01:12,600 --> 00:01:14,220 ‫Now that's not enough. 19 00:01:14,220 --> 00:01:18,450 ‫We also need to have rows, except we only want to have one row. 20 00:01:18,450 --> 00:01:25,110 ‫So let's start off with one row only and I'm just going to create a button first and this button is 21 00:01:25,110 --> 00:01:35,430 ‫going to be saying something like, Hi there, and it should be in the grid dot column zero. 22 00:01:36,720 --> 00:01:43,440 ‫And now I create a second button, which should be the grid, that column one. 23 00:01:43,590 --> 00:01:48,210 ‫Now if we look at our design now we can see we have our two buttons. 24 00:01:48,210 --> 00:01:48,990 ‫Hi there. 25 00:01:49,560 --> 00:01:52,410 ‫Let's run our code just to see how this looks. 26 00:01:52,920 --> 00:01:59,280 ‫By the way, they are only 100 pixels wide, as you can see here, so the width is limited to 100 pixels. 27 00:01:59,670 --> 00:02:07,680 ‫So if you add a total value here, then that will simply use it as pixels in the width. 28 00:02:07,710 --> 00:02:12,060 ‫As you can see here, that's how wide a column is. 29 00:02:12,120 --> 00:02:16,860 ‫And of course, we could say we can put some more columns in here easily. 30 00:02:16,860 --> 00:02:19,230 ‫Well, we can do that and we'll do that later on. 31 00:02:19,230 --> 00:02:22,950 ‫But before we do that, I would like to show you something very important. 32 00:02:22,950 --> 00:02:32,160 ‫So if I drag my XAML up here now, it's actually useful because we will see the difference in our UI 33 00:02:32,190 --> 00:02:33,000 ‫directly. 34 00:02:33,090 --> 00:02:38,790 ‫And I want to change the width from 100 to auto. 35 00:02:39,660 --> 00:02:41,670 ‫And as you can see, what auto does. 36 00:02:41,670 --> 00:02:47,880 ‫It automatically only takes the width that is required to fit in all the content that there is inside 37 00:02:47,880 --> 00:02:48,990 ‫of the element. 38 00:02:48,990 --> 00:02:55,650 ‫So in our case, the button has a text called Hi there, and that's how much space hi there needs or 39 00:02:55,650 --> 00:02:56,280 ‫requires. 40 00:02:56,280 --> 00:02:59,340 ‫And that's also how wide our button is going to be. 41 00:02:59,340 --> 00:03:02,010 ‫And as you can see, it's for the first column definition. 42 00:03:02,010 --> 00:03:11,460 ‫So the first column definition where our button with hi there one is that's how the or that's the button 43 00:03:11,460 --> 00:03:12,810 ‫that is changed. 44 00:03:12,810 --> 00:03:16,560 ‫As you can see now it's changed to 59.5 pixels. 45 00:03:16,560 --> 00:03:25,620 ‫If I add some more text, some more text, you can see it's widening it to 153.5 pixels. 46 00:03:25,620 --> 00:03:33,870 ‫So you can easily go ahead and well use auto if you want everything to fit in correctly based on how 47 00:03:33,870 --> 00:03:35,550 ‫much space it actually needs. 48 00:03:35,640 --> 00:03:40,560 ‫But what if I want to make the columns exactly the same width? 49 00:03:41,040 --> 00:03:48,000 ‫Well, of course I could use full values here or fixed values here, but I can also use star. 50 00:03:48,300 --> 00:03:55,830 ‫And what star will do is it will if all the all of them have star, it will simply say, okay, take 51 00:03:55,830 --> 00:03:57,300 ‫up all the space. 52 00:03:57,750 --> 00:04:04,890 ‫And in this case, it's only the space available that this specific column has, and it's exactly the 53 00:04:04,890 --> 00:04:05,820 ‫same as the others. 54 00:04:05,820 --> 00:04:07,230 ‫So there is a weighting now. 55 00:04:07,350 --> 00:04:11,280 ‫So this has a weight of one and that one has a weight of one as well. 56 00:04:11,280 --> 00:04:15,870 ‫So they are equally weighted, which means they are equally width. 57 00:04:16,200 --> 00:04:21,210 ‫If we want to change that, let's say I want to make this second one here, the second button double 58 00:04:21,210 --> 00:04:25,320 ‫as wide as the first one I can use double star. 59 00:04:25,320 --> 00:04:29,970 ‫So now this one will be twice as wide as the first one. 60 00:04:30,360 --> 00:04:38,010 ‫If I, for example, want to have three of the fifth on the left hand side and 2/5 on the right hand 61 00:04:38,010 --> 00:04:39,180 ‫side as their width. 62 00:04:39,180 --> 00:04:41,970 ‫I can simply use this approach, as you can see here. 63 00:04:41,970 --> 00:04:45,150 ‫So three times the star and two times the star. 64 00:04:45,150 --> 00:04:53,670 ‫So what it does, it actually adds it all up and then it only takes the multiple second of what is set 65 00:04:53,670 --> 00:04:54,090 ‫in here. 66 00:04:54,090 --> 00:04:55,620 ‫So let's say we have three and two. 67 00:04:55,620 --> 00:04:59,340 ‫So what it does, it says, okay, now it's five total. 68 00:04:59,690 --> 00:05:04,610 ‫Units that are available, and I'm going to take 3/5 of those units. 69 00:05:05,690 --> 00:05:07,960 ‫Now, you could even go ahead and do something like 100. 70 00:05:07,970 --> 00:05:10,370 ‫So you can see this one takes 100. 71 00:05:10,400 --> 00:05:12,710 ‫And this only take only takes two. 72 00:05:12,740 --> 00:05:17,200 ‫So so that's how you can play around with the widths. 73 00:05:17,210 --> 00:05:19,480 ‫And the same goes for the heights. 74 00:05:19,490 --> 00:05:23,030 ‫So now let's go ahead and create a row definition. 75 00:05:23,030 --> 00:05:26,390 ‫So grid dot row definitions. 76 00:05:26,480 --> 00:05:30,160 ‫And in here we can go ahead and create our row definitions. 77 00:05:30,170 --> 00:05:35,120 ‫So the first one, and I'm going to keep it simple as well, like in one row. 78 00:05:35,630 --> 00:05:37,670 ‫And this one needs a height. 79 00:05:37,670 --> 00:05:41,180 ‫So I'm just going to say, okay, I want to have the star height. 80 00:05:41,870 --> 00:05:46,580 ‫And now we use the same thing again for the second row. 81 00:05:46,580 --> 00:05:49,100 ‫And as you can see now we have two rows. 82 00:05:49,100 --> 00:05:52,700 ‫So one here and the second one at the bottom. 83 00:05:52,700 --> 00:05:55,670 ‫And as you can see, the second row doesn't have any content yet. 84 00:05:55,850 --> 00:06:03,500 ‫So now let's change that by let's say, first of all, putting this button here to the bottom. 85 00:06:03,500 --> 00:06:04,070 ‫Right. 86 00:06:04,310 --> 00:06:05,520 ‫And how can we do that? 87 00:06:05,540 --> 00:06:12,320 ‫Well, we simply use grid dot row and we say it's at row one. 88 00:06:12,560 --> 00:06:14,330 ‫Now, you might wonder, why is it one? 89 00:06:14,330 --> 00:06:15,320 ‫Why is it not two? 90 00:06:15,350 --> 00:06:21,710 ‫Well, as you probably know already in programming, we start counting with zero. 91 00:06:21,710 --> 00:06:25,880 ‫So the first row is zero, the second row is one. 92 00:06:25,880 --> 00:06:31,310 ‫So now high there is the second row, which is row one. 93 00:06:31,970 --> 00:06:39,800 ‫Now let's go ahead and create two more buttons and maybe even change their names to something that has 94 00:06:39,800 --> 00:06:44,800 ‫more to say about their actual info. 95 00:06:44,810 --> 00:06:51,110 ‫So I'm going to put that into the column zero in row one and that one actually, I'm going to put it 96 00:06:51,110 --> 00:07:02,450 ‫back to zero one and that one will be at one one and actually that will be column one and row zero like 97 00:07:02,450 --> 00:07:02,750 ‫that. 98 00:07:02,750 --> 00:07:07,340 ‫So now we have all the buttons and that one will be one. 99 00:07:07,820 --> 00:07:12,890 ‫That one will be button two, button three and button four. 100 00:07:14,130 --> 00:07:14,660 ‫Great. 101 00:07:14,670 --> 00:07:17,790 ‫So now if we start that, you will see that. 102 00:07:18,000 --> 00:07:21,210 ‫Well, it counts as well for the UI itself. 103 00:07:21,210 --> 00:07:22,770 ‫So one, two, three, four. 104 00:07:23,190 --> 00:07:23,850 ‫All right. 105 00:07:24,270 --> 00:07:29,010 ‫Now a little challenge for you as you have seen how to use grid columns and rows. 106 00:07:29,010 --> 00:07:36,480 ‫Please go ahead and make a three times three grid here with eight buttons. 107 00:07:36,480 --> 00:07:40,110 ‫So 1 to 8 should be buttons and the ninth position. 108 00:07:40,110 --> 00:07:45,840 ‫So the bottom right hand position or grid element should be a text block. 109 00:07:46,560 --> 00:07:49,020 ‫So please pause the video and try to do that. 110 00:07:52,000 --> 00:07:52,560 ‫All right. 111 00:07:52,560 --> 00:07:53,730 ‫I hope you tried it. 112 00:07:54,750 --> 00:08:02,370 ‫So what I'm going to do is I'm going to add another column by adding a column definition here, and 113 00:08:02,370 --> 00:08:06,080 ‫it's going to be equal width and the same for the height. 114 00:08:06,090 --> 00:08:08,250 ‫It's going to be equal height. 115 00:08:08,700 --> 00:08:14,130 ‫And now, as you can see, the buttons, they look a bit weird. 116 00:08:14,340 --> 00:08:16,500 ‫But that's just because I haven't. 117 00:08:18,540 --> 00:08:19,340 ‫A zoomed out yet. 118 00:08:19,350 --> 00:08:20,850 ‫So now we can see it correctly. 119 00:08:20,970 --> 00:08:24,230 ‫Now we have our buttons with zero one and so forth. 120 00:08:24,240 --> 00:08:30,890 ‫So I'm going to copy that button here and I'm going to position it at column two. 121 00:08:30,900 --> 00:08:33,540 ‫So Row zero and column two. 122 00:08:33,570 --> 00:08:38,550 ‫Now, you could, of course, argue it makes more sense to start off with the row and then enter the 123 00:08:38,550 --> 00:08:39,160 ‫column. 124 00:08:39,180 --> 00:08:43,440 ‫Well, you can do that, but in my case, it's the other way round. 125 00:08:44,100 --> 00:08:49,200 ‫In the end, what matters is that you use both of them correctly. 126 00:08:49,350 --> 00:08:52,750 ‫Now we have the three buttons at the top. 127 00:08:52,770 --> 00:08:57,660 ‫Now let's go ahead and create the second row or finalize the second row. 128 00:08:57,660 --> 00:09:00,540 ‫And that's the column two. 129 00:09:01,560 --> 00:09:07,710 ‫And I'm going to copy that three times, actually, two times enough. 130 00:09:08,010 --> 00:09:16,350 ‫And that one will be row to position zero and row two, position one or column one. 131 00:09:16,740 --> 00:09:18,750 ‫Now, of course, we need to change the values. 132 00:09:18,750 --> 00:09:26,660 ‫So one, two, three, four, five, six, seven and eight. 133 00:09:26,670 --> 00:09:30,930 ‫And as I said, at the bottom left, I would like to have a text block. 134 00:09:31,260 --> 00:09:34,980 ‫So the text block has the same approach with grids. 135 00:09:35,010 --> 00:09:37,550 ‫You need to have a column and a row. 136 00:09:37,560 --> 00:09:46,110 ‫So I'm just going to say this is going to be column two and grid row two as well. 137 00:09:46,140 --> 00:09:50,730 ‫So now we're at the bottom, left or bottom right now we can go ahead and give it some text. 138 00:09:50,730 --> 00:09:52,800 ‫And I'm just going to say something like text. 139 00:09:53,160 --> 00:09:55,550 ‫Now you might say, oh, I don't like it. 140 00:09:55,560 --> 00:09:57,520 ‫The text is at the top left. 141 00:09:57,540 --> 00:10:06,500 ‫Well, you can easily change that by entering something like horizontal alignment and use center here. 142 00:10:06,510 --> 00:10:08,810 ‫So now it's centered horizontally. 143 00:10:08,820 --> 00:10:10,200 ‫Let's zoom in so you can see. 144 00:10:10,200 --> 00:10:10,800 ‫All right. 145 00:10:10,800 --> 00:10:17,850 ‫And now if I want to center it vertically as well, I simply use vertical alignment and I use center 146 00:10:17,850 --> 00:10:18,970 ‫here as well. 147 00:10:18,990 --> 00:10:24,360 ‫So now as you see, the button is centered perfectly and we can even go ahead and change the font size 148 00:10:24,360 --> 00:10:30,050 ‫just because we can and let's make it a little bigger like 32. 149 00:10:30,060 --> 00:10:37,890 ‫And now you can see we have a three times three grid with eight buttons and a text. 150 00:10:38,070 --> 00:10:45,730 ‫Now you could go ahead and align all different kinds of elements in your window here in your main window 151 00:10:45,730 --> 00:10:46,550 ‫and your grid. 152 00:10:46,560 --> 00:10:48,690 ‫So that's the beauty about using grids. 153 00:10:48,690 --> 00:10:51,990 ‫And as you have seen, you can stack up things. 154 00:10:51,990 --> 00:10:58,920 ‫You could create a stack panel with multiple grids and additionally you have a text in between or something 155 00:10:58,920 --> 00:10:59,460 ‫like that. 156 00:10:59,460 --> 00:11:04,810 ‫So you're not limited to use one element in here. 157 00:11:04,830 --> 00:11:09,210 ‫As you can see, we could go ahead and let's say put that into a stack panel. 158 00:11:10,620 --> 00:11:13,650 ‫Stack panel like that. 159 00:11:13,650 --> 00:11:15,150 ‫So I'm going to drag the grid. 160 00:11:15,150 --> 00:11:21,480 ‫As you can see now, it's complaining because the window example, main window only knows the first 161 00:11:21,480 --> 00:11:21,690 ‫one. 162 00:11:21,690 --> 00:11:28,020 ‫So it only will see the STACK panel if we now check out our appearance. 163 00:11:29,530 --> 00:11:33,760 ‫Actually, let's stop it so we can see now it says invalid markup. 164 00:11:33,760 --> 00:11:42,040 ‫So if we take the whole grid inside of our Stack panel, as you can see, it's there and it's text it 165 00:11:42,040 --> 00:11:42,220 ‫up. 166 00:11:42,220 --> 00:11:44,110 ‫So at the bottom there is plenty of space. 167 00:11:44,110 --> 00:11:50,380 ‫So here we could add another button, just so you see that this is possible and this one is going to 168 00:11:50,380 --> 00:11:53,530 ‫be to have a height of 100. 169 00:11:53,830 --> 00:11:57,610 ‫And now, as you can see, it's all stacking up there at the top. 170 00:11:57,610 --> 00:12:04,450 ‫And even though we have this height that they are all the same height, this text needed so much space 171 00:12:04,450 --> 00:12:05,800 ‫that it's ignoring that. 172 00:12:05,800 --> 00:12:08,020 ‫So the font size is too big. 173 00:12:08,020 --> 00:12:10,900 ‫So if we go back to 16, it's still too big. 174 00:12:10,900 --> 00:12:14,410 ‫If we go to let's say 12 now it seems more like it. 175 00:12:14,860 --> 00:12:20,710 ‫So whenever you use row definitions with this star, you have to be careful. 176 00:12:20,710 --> 00:12:25,720 ‫If a element needs more space than there is, then it will overflow. 177 00:12:26,710 --> 00:12:27,100 ‫All right. 178 00:12:27,100 --> 00:12:28,450 ‫So that's two grids. 179 00:12:28,450 --> 00:12:32,110 ‫I'm going to go back to the beautiful standard grid that we had there. 180 00:12:32,800 --> 00:12:39,640 ‫And generally, what I always recommend after you have seen something like that and after you have learned 181 00:12:39,640 --> 00:12:42,790 ‫something like that, please go ahead and play around with it. 182 00:12:42,790 --> 00:12:46,030 ‫Just play around with some different types of elements. 183 00:12:46,030 --> 00:12:50,380 ‫You've seen some already, and we'll look into a lot more controls later on. 184 00:12:50,380 --> 00:12:55,570 ‫So the ones that we have used so far are mainly buttons, right, and text blocks, but we will use 185 00:12:55,570 --> 00:12:59,380 ‫different beautiful controls in the future videos. 186 00:12:59,380 --> 00:13:00,610 ‫So see you there.