One panel that does a really great job corresponding to the content that is placed it in and it called StackPanel. A StackPanel comes in two flavors; the vertical StackPanel and the horizontal StackPanel but those actually are both encapsulated in one control called just plain StackPanel. So let us take a look at how StackPanel works.
First thing I want to do is let us change our canvas to a StackPanel. So notice what happen, now those two ellipses are being stack one at a top of the other. We have also had a whole bunch of extraneous properties in here that do not make sense anymore. These were the properties that we set related to the canvas. If these do not make sense anymore, let us go ahead and get rid of them.
All right, you will notice how StackPanel does its job. It creates a stack from top to bottom of all of the elements that you place inside of it. You will probably also notice that by default, these are all lining up in the middle. Now, this is because of another property and this is not an attach property. It is actually a regular property on every element and it is called Horizontal alignment. And this property describes the alignment of the object horizontally within the panel. One thing that is interesting about the alignment properties that is worth noting is the fact that it is actually up to every panel to decide what to do with the alignment properties. In some panels like canvas ignore them completely and that is because alignment really does not make sense in a grid layout or a coordinate layout like canvas.
Another hand panels like StackPanels, some of the other panels that we will look out later do dig a great advantage of the alignment properties. For horizontal alignment, the possible values are left, right, center, and stretch. And since these objects are lining up in the center, you might assume that the default value for the horizontal alignment property is at the center but it is not, and in fact if we remove the width property on one of these ellipses, you can see that.
The horizontal alignment is actually stretched, but the width’s property that we had set on before access a constraint to that. And since the panel cannot stretch it, it does the next best thing and it places right in the center at the specified width. Even more surprising though is what would happen if we set the horizontal alignment property to be center on that element that does not have a width.
Okay so it disappeared. You can see that it is still taking up some vertical space but it looks like it is gone and that is because its width defaults to a value called auto. An auto gets interpreted as zero in this situation when the panel tries to center it. It is being centered it is just that its width is being interpreted as zero. The same would apply if we would set the horizontal alignment property to a left or right on an object where we had and explicitly set the width like this one. So let us go ahead and fix that and let us change our tomato to be an ellipse of height 100 as well.
The counter part two horizontal alignment is a property called vertical alignment. And vertical alignment is essentially does the same thing but it does it in other direction. So possible values for a vertical alignment are top and bottom and you move left and right. And that it shows the value stretch in the center with the horizontal alignment. For this StackPanel, these are actually are meaningless. And this is because the vertical space is always exactly the size of the object that is placed in it. If for example we got a width of the height property on one of these object, the objects would just collapse.
On the other hand, StackPanel can be used to create a horizontal stack as well. To get that, we can just set the orientation property on the panel to be horizontal. So let me show you how that looks.
So there you can see that the object are being stacked from left to right instead of top to bottom. Now once we have done that, the horizontal alignment property no longer applies, but the vertical alignment property does. Watch will happens
Transcription by:
Scribe4you Transcription Services