1 00:00:00,450 --> 00:00:01,470 ‫Welcome back. 2 00:00:01,500 --> 00:00:07,980 ‫In this video, we are going to talk about stack, panel list, box, then the logical tree and the 3 00:00:07,980 --> 00:00:08,880 ‫visual tree. 4 00:00:09,030 --> 00:00:15,540 ‫So, first of all, let's go ahead and get rid of this grid because we have not touched grid yet, so 5 00:00:15,540 --> 00:00:19,920 ‫we haven't used grid correctly yet, but we will do so in one of the next videos. 6 00:00:19,920 --> 00:00:23,550 ‫So instead of a grid, I want to use a stack panel. 7 00:00:23,670 --> 00:00:31,020 ‫A Stack panel allows me to stack elements on top of each other so I simply can go ahead and add a text 8 00:00:31,020 --> 00:00:32,790 ‫block in here, for example. 9 00:00:32,970 --> 00:00:39,420 ‫And I'm going to simply write the text like, Hello, world, simple text. 10 00:00:39,450 --> 00:00:41,820 ‫And as you can see, there is my text Hello World. 11 00:00:41,850 --> 00:00:49,410 ‫Now what I also want to do is I want to align it so horizontal alignment I'm going to use center here. 12 00:00:49,410 --> 00:00:51,990 ‫So now I'm centering the text as you can see here. 13 00:00:51,990 --> 00:00:58,590 ‫Now the text is centered and also maybe a little margin towards all directions, which is 20. 14 00:00:58,620 --> 00:01:04,680 ‫So as you can see, I'm using a margin and just saying 20, which will say or which will create a margin 15 00:01:04,680 --> 00:01:08,100 ‫towards all the four directions of 20 pixels. 16 00:01:09,210 --> 00:01:16,260 ‫Now the next thing is a list box and I want to use a list box just so you see how one looks like. 17 00:01:16,260 --> 00:01:24,090 ‫So this list box here currently is empty, but we can change that very easily by creating a list box 18 00:01:24,090 --> 00:01:24,930 ‫item in there. 19 00:01:24,930 --> 00:01:28,410 ‫So let's go ahead and create a list box item. 20 00:01:28,860 --> 00:01:36,480 ‫And that item should have the content of let's say content is equal to item one. 21 00:01:36,780 --> 00:01:42,720 ‫And now instead of having an opening and closing tag, I just want to have this shorter version. 22 00:01:42,720 --> 00:01:49,860 ‫So I use this last year and Visual Studio is smart enough to get rid of the closing tag for me automatically. 23 00:01:49,860 --> 00:01:55,920 ‫So now this list box has this item one and I'm just going to copy and paste it multiple times. 24 00:01:55,920 --> 00:01:58,650 ‫So I'm going to have item one and two and three. 25 00:01:58,650 --> 00:02:01,080 ‫And now this list box takes up the whole width. 26 00:02:01,080 --> 00:02:08,040 ‫As you can see, it takes the whole parent and it's only as high or as high as it's required. 27 00:02:08,040 --> 00:02:15,090 ‫So it means only as much space is required as the elements inside of it are in their height. 28 00:02:15,090 --> 00:02:20,700 ‫So it's pretty much, let's say this item one and item two and three, they are each 30 pixels high. 29 00:02:20,700 --> 00:02:23,430 ‫So this whole box would just be 90 pixels high. 30 00:02:23,430 --> 00:02:27,990 ‫But we can change that by, let's say, adjusting the height. 31 00:02:28,230 --> 00:02:31,590 ‫And I'm just going to use a height of 100. 32 00:02:31,590 --> 00:02:35,370 ‫As you can see, it's higher than the object was before. 33 00:02:35,370 --> 00:02:38,970 ‫And now let's create a width as well of also 100 pixels. 34 00:02:39,000 --> 00:02:42,990 ‫So now you can see this box is a lot smaller and it fits right in. 35 00:02:43,470 --> 00:02:43,980 ‫All right. 36 00:02:43,980 --> 00:02:49,140 ‫Now, if I want to have a margin towards all directions, I can also give this element in margin. 37 00:02:49,140 --> 00:02:55,260 ‫But as you can see, because this Helloworld text block has a margin of 20 towards all directions, 38 00:02:55,260 --> 00:03:02,040 ‫there is also a distance between those two list elements here or between the list box and the text block. 39 00:03:03,720 --> 00:03:10,470 ‫Now, if we run that code, we will see that we have this little main window, which is beautiful and 40 00:03:10,470 --> 00:03:13,920 ‫has our list box with its elements. 41 00:03:13,920 --> 00:03:18,600 ‫So as you can see here, hello world to the text block and then those list elements, you can click 42 00:03:18,600 --> 00:03:20,880 ‫on them, you can even select them as you can see. 43 00:03:20,880 --> 00:03:26,370 ‫But nothing else happens because we have not checked out the event yet, which we will do in the next 44 00:03:26,370 --> 00:03:26,940 ‫video. 45 00:03:27,510 --> 00:03:29,790 ‫So I'm going to close that again. 46 00:03:29,910 --> 00:03:35,340 ‫And now let's quickly talk about the logical and the visual tree. 47 00:03:35,760 --> 00:03:40,530 ‫So what we have here is a logical tree or we can see the logical tree in XAML. 48 00:03:40,530 --> 00:03:44,880 ‫So the logical tree is a window inside of that window. 49 00:03:44,880 --> 00:03:46,110 ‫We have a stack panel. 50 00:03:46,110 --> 00:03:47,280 ‫Inside of that stack panel. 51 00:03:47,280 --> 00:03:49,890 ‫We have a text box block and a list box. 52 00:03:49,890 --> 00:03:56,070 ‫And within the list box, we actually have the list box, item one list box item two and three. 53 00:03:56,370 --> 00:03:58,140 ‫So that's the logical tree. 54 00:03:58,140 --> 00:04:01,080 ‫You pretty much have multiple branches. 55 00:04:01,080 --> 00:04:02,220 ‫It goes deeper and deeper. 56 00:04:02,220 --> 00:04:08,880 ‫So the window has a branch of stack panel, which has two branches, and one of them is List Box, which 57 00:04:08,880 --> 00:04:11,340 ‫has branches as well and so forth. 58 00:04:11,550 --> 00:04:15,510 ‫So as I said, again, this is the logical tree. 59 00:04:15,510 --> 00:04:21,210 ‫Now let's have a look at the visual tree, because if I, for example, add a button here and I'm going 60 00:04:21,210 --> 00:04:23,550 ‫to need that for something in a second. 61 00:04:23,550 --> 00:04:28,380 ‫So I create a new button, I give it the content of Click Me. 62 00:04:29,730 --> 00:04:36,360 ‫And I'm also going to add a method in here which will be called whenever somebody clicks. 63 00:04:36,360 --> 00:04:41,670 ‫So I'm using click here and I'm creating a new event handler. 64 00:04:41,700 --> 00:04:45,780 ‫And what that does for me, it creates a new method called Button Click. 65 00:04:45,900 --> 00:04:52,620 ‫If you look here now, we can see that there is a method called Button Click, which has an object sender 66 00:04:52,620 --> 00:04:55,710 ‫and routed event arguments called E. 67 00:04:55,740 --> 00:04:59,880 ‫So what this pretty much does is this method will be called. 68 00:04:59,990 --> 00:05:06,490 ‫Whenever we click on the button and whatever we have inside of this method, body will be executed. 69 00:05:06,500 --> 00:05:13,910 ‫So let's say we use a message box, something that we haven't used yet, and we call its method show. 70 00:05:13,940 --> 00:05:21,800 ‫We can simply show a box or a box will appear like a little pop up and which will show us some text. 71 00:05:21,800 --> 00:05:32,630 ‫So something like Thanks for clicking me and the text said Click me and the well the text that will 72 00:05:32,630 --> 00:05:33,650 ‫come up like this. 73 00:05:33,650 --> 00:05:38,540 ‫Thanks for clicking message box will show something beautiful like thanks for clicking me. 74 00:05:38,630 --> 00:05:43,850 ‫So as you can see this click me button is just below our list box. 75 00:05:43,850 --> 00:05:47,330 ‫So now please go ahead and add a little distance between them. 76 00:05:49,940 --> 00:05:50,390 ‫All right. 77 00:05:50,390 --> 00:05:51,980 ‫I hope you try to do that. 78 00:05:51,980 --> 00:05:58,340 ‫And we can either give our button a margin and I'm just going to use 20 again, or we could have given 79 00:05:58,340 --> 00:05:59,510 ‫our list box a margin. 80 00:05:59,510 --> 00:06:02,390 ‫But giving the button a margin should totally be fine. 81 00:06:02,540 --> 00:06:08,900 ‫So now if we run the code, we will get this beautiful click me button here. 82 00:06:08,900 --> 00:06:12,890 ‫So we have the hello world, we have the text and so forth or the list box. 83 00:06:12,890 --> 00:06:17,930 ‫And now if we click on Click Me, this message box pops up and checks. 84 00:06:17,960 --> 00:06:24,110 ‫Say something like Thanks for clicking me and we can click okay to close that message box again. 85 00:06:24,110 --> 00:06:25,280 ‫So let's open it up. 86 00:06:25,280 --> 00:06:27,980 ‫As you can see, click me thanks for clicking me. 87 00:06:28,670 --> 00:06:36,410 ‫So that's a message box and we can use that in a let's say similar way that we have used the console 88 00:06:36,410 --> 00:06:41,570 ‫right line in our console applications for testing purposes. 89 00:06:41,570 --> 00:06:48,380 ‫So it's pretty cool if we want to open up something after an event, we simply open a message box so 90 00:06:48,380 --> 00:06:50,870 ‫we know, okay, it worked great. 91 00:06:50,870 --> 00:06:57,080 ‫So that's the button and our logical three. 92 00:06:57,080 --> 00:06:59,300 ‫Now let's have a look at the visual tree. 93 00:06:59,450 --> 00:07:03,380 ‫So in order to get the visual tree, there are multiple ways. 94 00:07:03,380 --> 00:07:10,340 ‫But the one that I'm going to use is I'm going to add a point here, a debug point. 95 00:07:10,340 --> 00:07:15,710 ‫So it will run into debug whenever this line of code is executed. 96 00:07:15,770 --> 00:07:19,760 ‫So let me start the code or start our program. 97 00:07:19,770 --> 00:07:26,510 ‫Now I click on the button and our program stops and we get into the debug mode. 98 00:07:26,510 --> 00:07:31,580 ‫And then here I can go to the WPF tree visualizer. 99 00:07:31,580 --> 00:07:38,720 ‫So what I'm going to do is I'm going to click on that and it opens up the WPF visualizer, which has 100 00:07:38,720 --> 00:07:45,410 ‫the visual tree, which also has those properties on the top right or on the right hand side. 101 00:07:45,410 --> 00:07:50,840 ‫As you can see, there are so many properties for our button, for example, or for our list box, also 102 00:07:50,840 --> 00:07:55,250 ‫plenty of properties and even tells me all of the values of those properties. 103 00:07:55,250 --> 00:07:57,140 ‫And we didn't even set any of those. 104 00:07:57,140 --> 00:07:59,870 ‫Well, except for the margin maybe. 105 00:07:59,870 --> 00:08:02,450 ‫But other than that, there's nothing that we have set up. 106 00:08:02,450 --> 00:08:04,670 ‫And as you can see, the background is white. 107 00:08:04,670 --> 00:08:05,480 ‫That's always good. 108 00:08:05,480 --> 00:08:08,120 ‫So we could change that in code as well. 109 00:08:08,300 --> 00:08:13,280 ‫And by the way, what is important here now is our visual tree. 110 00:08:13,280 --> 00:08:17,750 ‫And you see some aspects of our logical tree in here as well. 111 00:08:17,750 --> 00:08:23,270 ‫So for example, you can see the main window, then you see the stack panel and there you see the text 112 00:08:23,270 --> 00:08:25,070 ‫block list box and the button. 113 00:08:25,880 --> 00:08:26,990 ‫But there's a lot more. 114 00:08:27,020 --> 00:08:31,640 ‫As you can see, the main window has a border, which we don't see in the logical tree, but with the 115 00:08:31,640 --> 00:08:32,510 ‫individual tree. 116 00:08:32,510 --> 00:08:38,300 ‫Then it has an a donor decorator, a content presenter, which actually shows the content, then which 117 00:08:38,300 --> 00:08:39,620 ‫is the Stack panel. 118 00:08:39,620 --> 00:08:46,910 ‫And the stack panel again has a text block, a list box which has a border, then this box has a scroll 119 00:08:46,910 --> 00:08:47,390 ‫view. 120 00:08:47,390 --> 00:08:54,200 ‫So if there are too many elements to show in the height that it has, then it will have a scroll capability. 121 00:08:54,200 --> 00:09:03,080 ‫Then there is a grid in there which contains a rectangle and a scroll content presenter which has an 122 00:09:03,080 --> 00:09:06,800 ‫items presenter visualizing stack panel. 123 00:09:06,800 --> 00:09:14,120 ‫And then in there we find our list box item one, which again has a border which has a content presenter. 124 00:09:14,120 --> 00:09:16,010 ‫And finally we can find the text block. 125 00:09:16,010 --> 00:09:21,050 ‫So you see it's a very, very long tree here, very many branches. 126 00:09:21,050 --> 00:09:30,440 ‫But in the end what you can find is all the different elements that are visually in your program. 127 00:09:31,170 --> 00:09:38,280 ‫And this can be very helpful if you want to find out more about generally what is represented or used 128 00:09:38,280 --> 00:09:41,630 ‫in your program and what you have added to your program. 129 00:09:41,640 --> 00:09:46,380 ‫But that's generally how you can find everything out about the visual tree. 130 00:09:46,380 --> 00:09:52,200 ‫And as you can see, we have a grid within our list box which we didn't set up ourselves, but it's 131 00:09:52,200 --> 00:09:53,420 ‫just there, right? 132 00:09:53,490 --> 00:09:58,200 ‫And if you click on that grid, you can also find the properties of that grid on the right hand side. 133 00:09:59,160 --> 00:09:59,910 ‫Okeydokey. 134 00:09:59,910 --> 00:10:05,070 ‫So that was pretty much it for the visual tree, the logical tree. 135 00:10:05,070 --> 00:10:06,840 ‫We have used stack panel and list box. 136 00:10:06,840 --> 00:10:09,330 ‫We will use tech panel a lot more in the future. 137 00:10:09,480 --> 00:10:11,160 ‫So get used to that. 138 00:10:11,160 --> 00:10:14,670 ‫And yeah, in the next video we will check out events. 139 00:10:14,670 --> 00:10:15,780 ‫So see you there.