This content requires Flash

To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

Download the free Flash Player now!

Okay so now let me tell you a little bit about a property called Margin. This is a property that works which is at about any panel. In this any panel where there is a sensible to make use of the margin property. And that includes the StackPanel which we have already seen, WrapPanel, and then even a number of panels which we have looked that including one we are about to see called grid.

A margin is essentially a place holder. In other words, it adds space to the outside of the item that the margin property is set on. It can be confusing to keep track of margin in another property called padding. So do not let this tear you off. Padding is much less a general than margin. Only at certain elements have a padding property and those are only elements that have content.

Padding gets applied on the inside around the content where margin gets applied on the outside of the object. And by those can be used with essentially any element to gets placed inside of a panel. And that is basically any element that shows upon the screen. And this is one of the things that might appear up. If you are coming the ---background and the concept of margin probably is a familiar ones here. You have probably used margin before in CSS and it is a great way to use content around and ensure that there is space between two elements.

On the other hand, do not let the way that you specify the value throw you off just like CSS, you can specify a margin using four numbers but the difference is that the first number corresponds to the left and the subsequent numbers go clockwise around the element from there. So watch will happens is we will plan a margin to an element. But first, let us change our big gray element back to the uniform size so that we can see what is happening.

So let us come back up in here and define our gray element which is right here. Then I will change to this back to 100 by 100. Here, we continue to work with that same elements so we can identify it by its color. And let us go ahead and set our margin property on it.

Okay, so we are setting the margin property to a value of 30 ---and that when we do a refresh by hitting F5, watch would happens. You can see that we have just the left margin property. And now if we set the subsequent values, you can what happens. First of all, let us set the second one and that is the top. Now we will set the third on and that is on the right. And now, let us set the fourth one, and that is on the bottom.

In some panels including a WrapPanel either support the motion of a negative margin. And this can be kind of hard to conceptualize but a figure is a positive margin with essentially pushed out the boundaries of the element that the margin was applied to. Now with the negative margin, we are pulling this back in. The effect of the StackPanel is not to make objects smaller but it does move it around in the opposite direction of what a positive margin would do. So watch what will happens if we get our gray element and negative margin on the left.

So you can see that when we do this, we essentially shift the ellipse back over to the left. And in fact, there is overlapping out and ---before it. There certainly had situation to where this can actually be really handy. So the last things that I want to show you is a couple of shortcuts to the way that you can use those syntax for setting the margin property.

So the first thing is, if you just set two values, let me show you what happens. Okay so you can there that the first value gets interpreted as the left in the right margin. And the second value gets interpreted as the top and the bottom. So this is essentially the same as if would type four values that are 50---

Honestly, I learn to use the syntax but it is interesting to know about so you can see what it is going on. The syntax that I do use quite a lot though is the single value syntax. And you can set that by just setting a single value. So let me show you what happens when you do that.

So now if we update by hitting F5, you can see that in setting a margin of the single value at 50, we will essentially set the value 50 on all four side of the object.

Okay so now let me tell you a little bit about a property called Margin. This is a property that works which is at about any panel. In this any panel where there is a sensible to make use of the margin property. And that includes the StackPanel which we... click to read more