The Margin attribute of XAML elements acts different than in HTML. There are still the three ways of describing this information. The first way is simply, make all sides the same. These are identical in HTML and XAML (except that margin is capitalized in XAML).
| HTML | XAML |
|---|---|
| margin: 10px | Margin=“10” |
XAML only allows you to work in pixels. So you do not need to mark the 10 wit"uo"uot; as you do in HTML. This will give the object a nice 10 pixel margin on all sides.
What if you wanted the top and bottom to have one margin and the left and right to have a different one? Well to do that will describe the first difference between HTML and XAML:
| HTML | XAML |
|---|---|
| margin: 10px 20px; | Margin=“40,20” |
Wait… What?!?
There are a couple of things going on here. The first is that you describe the left/right margin first in XAML and you describe top/bottom first in HTML. The second thing to notice is that in XAML you add the left to the right or the top to the bottom and enter that value. The HTML and XAML will both produce 10 pixels of margin at the top, 10 pixels of margin at the bottom, 20 pixels of margin on the right, and 20 pixels on the left. But keep in mind that XAML lists the left/right first and you add the two together.
Think you got it? Well now for the final element of twist:
| HTML | XAML |
|---|---|
| margin: 5px 10px 15px 20px; | Margin=“20,5,10,15” |
I bet you had it all figured out didn’t you? Well this is also simple, but you need to keep it in mind when doing Silverlight. XAML expects Margin to be listed as Left, Top, Right, Bottom. HTML is Top, Right, Bottom, Left. They both go clockwise around the box, but HTML starts on the top and XAML starts on the left.
I hope this helps anyone out there.
