WPF Margin Property
Posted by Vadim on October 5, 2008
I finally decided to spend some time to learn WPF. One of the thing I learned today is Margin property.
<Button Margin="10 0 10 5" />
Every control that derives from FrameworkElement class has this 
property.
I’m not going to describe this property here. However, I want to share with you how I memorized the sequence of margin. It goes like this: Left, Top, Right, Bottom.
The easiest way for me to remember is to start from Left and then go clock wise: Top, Right, Bottom.
There are two main reasons why I blog and both of them selfish.
First reason is because writing helps me remember and understand better new things I learn.
The second reason is that people who read my blog comment and correct any mistakes I make and that helps me to learn too.
I have a question for WPF gurus. I understand that if all margins are the same (for example left, top, right, and bottom are equal to 5), it’s possible to assign margin like this:
<Button Margin="5" />
The both assignments with one number and four numbers make sense because Margin is of type Thickness and this struct has two constructors:
public Thickness(double uniformLength)
public Thickness(double left, double top, double right, double bottom)
Here comes my question: I discovered that it’s possible to assign Margin declaratively with two numbers.
<Button Margin="10 5" />
How is it possible if Thickness doesn’t have a constructor with two parameters?
Rune Jacobsen said
Hi there,
I am by no means a WPF guru, but I am learning as well.
Just like with LINQ, the compiler does a LOT of magic behind the scenes when churning XAML into something binary. The XAML you create can be quite different from the actual object structure the compiler builds for you. So my guess would be that something tells the compiler that “x y” must be the same as “x y x y”..
Rune
ilovetocode said
Hi,
Rune has it right. Some properties of WPF objects have implicit converters attached to them (based on type). This allows the input string to take several different forms without having to specify a converter in XAML for each use.
The converter at work here is a ThicknessConverter which parses the input string and attempts to map the values given in the string to one of the Thickness object constructor overloads.
For more information take a look at http://msdn.microsoft.com/en-us/library/ms752059.aspx#typeconverterenabled
Sam.
Vadim said
Rune & Sam,
Thanks a lot for you help. You’re absolutely right ThnicknessConverter does the job.
It has internal method FromString that include the code bellow:
switch (index)
{
case 1:
return new Thickness(numArray[0]);
case 2:
return new Thickness(numArray[0], numArray[1], numArray[0], numArray[1]);
case 4:
return new Thickness(numArray[0], numArray[1], numArray[2], numArray[3]);
}
WPF Margin demystified. « Vadim’s Weblog said
[...] Margin demystified. In my previous post I asked a question about this line of [...]
Jason said
My question is: why didn’t the WPF programmers use the well known HTML order for this: Top, Right, Bottom, Left?
Brett Peirce said
Well, why does any company do anything differently? Usually, you can boil it down to money:
– save money by doing something a different, cheaper way,
-or-
– do something a different, better way and you might profit off of it later.
Not sure how either might apply to this, but Microsoft probably thought it was better (makes enough sense to me: left to right and top to bottom, like many languages, including English), they sought to generate a bit of steam behind setting a new standard, and they didn’t think programmers would think was a buig hurdle to get over to use this new technology.
Microsoft easily has the market share to take that chance.
Doron said
I think it’s more about complete disregard for standards/conventions that is typical of Microsoft’s “everyone will soon convert to our way of doing things” mentality. I.e., ego trip.
Paul said
Actually the Windows standards predate css, and are more consistent with mathematics. The css folks blew it.
imma said
but doesn’t maths conventionally start on the right(x-axis) and go anti-clockwise? … Right, Top, Left, Bottom
eg: see http://en.wikipedia.org/wiki/Sign_(mathematics)#Sign_of_an_angle
Typographically, however, I think(imho) the most important margin is the top one – major movement being down the page, then the left for insetting, the others just give the area bounds … Top, Left, Bottom, Right
either way, clockwise feels wrong starting from the top & starting with the left margin also seems a strange choice
Attila said
Hello all i think the explanation is more simple.
When you define areas you think of rectangles between points (X1, Y1) (X2, Y2)
I question myself in this order because in this order I define the components of the points
How far do i want my point1 to be on the X axis -> left margin
How far do i want my point1 to be on the Y axis -> top margin
How far do i want my point2 to be on the X axis -> right margin
How far do i want my point2 to be on the Y axis -> bottom margin
I think this is more closer how you work with math (rectangles, lines, polygons, shapes etc …)
imma said
good point, that makes a lot of sense :-)
PS said
Vadim,
Just came across this page while looking for an explanation of WPF margins – love the little diagram, it was exactly what I needed to see in order to quickly understand.
Thanks!
Putrajaya Property said
Putrajaya Property…
[...]WPF Margin Property « Vadim's Weblog[...]…
Deanna said
Very helpful thanks!!!
jokecamp said
Simple answer to my question. Thanks!