‫Welcome back.
‫In this video, we are going to talk about stack, panel list, box, then the logical tree and the
‫visual tree.
‫So, first of all, let's go ahead and get rid of this grid because we have not touched grid yet, so
‫we haven't used grid correctly yet, but we will do so in one of the next videos.
‫So instead of a grid, I want to use a stack panel.
‫A Stack panel allows me to stack elements on top of each other so I simply can go ahead and add a text
‫block in here, for example.
‫And I'm going to simply write the text like, Hello, world, simple text.
‫And as you can see, there is my text Hello World.
‫Now what I also want to do is I want to align it so horizontal alignment I'm going to use center here.
‫So now I'm centering the text as you can see here.
‫Now the text is centered and also maybe a little margin towards all directions, which is 20.
‫So as you can see, I'm using a margin and just saying 20, which will say or which will create a margin
‫towards all the four directions of 20 pixels.
‫Now the next thing is a list box and I want to use a list box just so you see how one looks like.
‫So this list box here currently is empty, but we can change that very easily by creating a list box
‫item in there.
‫So let's go ahead and create a list box item.
‫And that item should have the content of let's say content is equal to item one.
‫And now instead of having an opening and closing tag, I just want to have this shorter version.
‫So I use this last year and Visual Studio is smart enough to get rid of the closing tag for me automatically.
‫So now this list box has this item one and I'm just going to copy and paste it multiple times.
‫So I'm going to have item one and two and three.
‫And now this list box takes up the whole width.
‫As you can see, it takes the whole parent and it's only as high or as high as it's required.
‫So it means only as much space is required as the elements inside of it are in their height.
‫So it's pretty much, let's say this item one and item two and three, they are each 30 pixels high.
‫So this whole box would just be 90 pixels high.
‫But we can change that by, let's say, adjusting the height.
‫And I'm just going to use a height of 100.
‫As you can see, it's higher than the object was before.
‫And now let's create a width as well of also 100 pixels.
‫So now you can see this box is a lot smaller and it fits right in.
‫All right.
‫Now, if I want to have a margin towards all directions, I can also give this element in margin.
‫But as you can see, because this Helloworld text block has a margin of 20 towards all directions,
‫there is also a distance between those two list elements here or between the list box and the text block.
‫Now, if we run that code, we will see that we have this little main window, which is beautiful and
‫has our list box with its elements.
‫So as you can see here, hello world to the text block and then those list elements, you can click
‫on them, you can even select them as you can see.
‫But nothing else happens because we have not checked out the event yet, which we will do in the next
‫video.
‫So I'm going to close that again.
‫And now let's quickly talk about the logical and the visual tree.
‫So what we have here is a logical tree or we can see the logical tree in XAML.
‫So the logical tree is a window inside of that window.
‫We have a stack panel.
‫Inside of that stack panel.
‫We have a text box block and a list box.
‫And within the list box, we actually have the list box, item one list box item two and three.
‫So that's the logical tree.
‫You pretty much have multiple branches.
‫It goes deeper and deeper.
‫So the window has a branch of stack panel, which has two branches, and one of them is List Box, which
‫has branches as well and so forth.
‫So as I said, again, this is the logical tree.
‫Now let's have a look at the visual tree, because if I, for example, add a button here and I'm going
‫to need that for something in a second.
‫So I create a new button, I give it the content of Click Me.
‫And I'm also going to add a method in here which will be called whenever somebody clicks.
‫So I'm using click here and I'm creating a new event handler.
‫And what that does for me, it creates a new method called Button Click.
‫If you look here now, we can see that there is a method called Button Click, which has an object sender
‫and routed event arguments called E.
‫So what this pretty much does is this method will be called.
‫Whenever we click on the button and whatever we have inside of this method, body will be executed.
‫So let's say we use a message box, something that we haven't used yet, and we call its method show.
‫We can simply show a box or a box will appear like a little pop up and which will show us some text.
‫So something like Thanks for clicking me and the text said Click me and the well the text that will
‫come up like this.
‫Thanks for clicking message box will show something beautiful like thanks for clicking me.
‫So as you can see this click me button is just below our list box.
‫So now please go ahead and add a little distance between them.
‫All right.
‫I hope you try to do that.
‫And we can either give our button a margin and I'm just going to use 20 again, or we could have given
‫our list box a margin.
‫But giving the button a margin should totally be fine.
‫So now if we run the code, we will get this beautiful click me button here.
‫So we have the hello world, we have the text and so forth or the list box.
‫And now if we click on Click Me, this message box pops up and checks.
‫Say something like Thanks for clicking me and we can click okay to close that message box again.
‫So let's open it up.
‫As you can see, click me thanks for clicking me.
‫So that's a message box and we can use that in a let's say similar way that we have used the console
‫right line in our console applications for testing purposes.
‫So it's pretty cool if we want to open up something after an event, we simply open a message box so
‫we know, okay, it worked great.
‫So that's the button and our logical three.
‫Now let's have a look at the visual tree.
‫So in order to get the visual tree, there are multiple ways.
‫But the one that I'm going to use is I'm going to add a point here, a debug point.
‫So it will run into debug whenever this line of code is executed.
‫So let me start the code or start our program.
‫Now I click on the button and our program stops and we get into the debug mode.
‫And then here I can go to the WPF tree visualizer.
‫So what I'm going to do is I'm going to click on that and it opens up the WPF visualizer, which has
‫the visual tree, which also has those properties on the top right or on the right hand side.
‫As you can see, there are so many properties for our button, for example, or for our list box, also
‫plenty of properties and even tells me all of the values of those properties.
‫And we didn't even set any of those.
‫Well, except for the margin maybe.
‫But other than that, there's nothing that we have set up.
‫And as you can see, the background is white.
‫That's always good.
‫So we could change that in code as well.
‫And by the way, what is important here now is our visual tree.
‫And you see some aspects of our logical tree in here as well.
‫So for example, you can see the main window, then you see the stack panel and there you see the text
‫block list box and the button.
‫But there's a lot more.
‫As you can see, the main window has a border, which we don't see in the logical tree, but with the
‫individual tree.
‫Then it has an a donor decorator, a content presenter, which actually shows the content, then which
‫is the Stack panel.
‫And the stack panel again has a text block, a list box which has a border, then this box has a scroll
‫view.
‫So if there are too many elements to show in the height that it has, then it will have a scroll capability.
‫Then there is a grid in there which contains a rectangle and a scroll content presenter which has an
‫items presenter visualizing stack panel.
‫And then in there we find our list box item one, which again has a border which has a content presenter.
‫And finally we can find the text block.
‫So you see it's a very, very long tree here, very many branches.
‫But in the end what you can find is all the different elements that are visually in your program.
‫And this can be very helpful if you want to find out more about generally what is represented or used
‫in your program and what you have added to your program.
‫But that's generally how you can find everything out about the visual tree.
‫And as you can see, we have a grid within our list box which we didn't set up ourselves, but it's
‫just there, right?
‫And if you click on that grid, you can also find the properties of that grid on the right hand side.
‫Okeydokey.
‫So that was pretty much it for the visual tree, the logical tree.
‫We have used stack panel and list box.
‫We will use tech panel a lot more in the future.
‫So get used to that.
‫And yeah, in the next video we will check out events.
‫So see you there.