251

If I have such string in XAML:

Storyboard.TargetProperty="Margin" From="1,2,3,4" To="0,0,0,0"

What is Top Bottom Right and Left? 1- right 2- top 3- left 4 - bottom

Is that right?

3

4 Answers 4

485
Margin="1,2,3,4"
  1. Left,
  2. Top,
  3. Right,
  4. Bottom

It is also possible to specify just two sizes like this:

Margin="1,2"
  1. Left AND right
  2. Top AND bottom

Finally you can specify a single size:

Margin="1"
  1. used for all sides

The order is the same as in WinForms.

6
  • 8
    LTRB is the short notation to remember easily.
    – Sai
    Oct 14, 2014 at 3:01
  • 57
    Note: this is a different order than html's css order, which is Top, Right, Bottom, Left.
    – Ruskin
    Jan 23, 2015 at 12:01
  • 9
    Anyone have any insight into why they decided to go with something different from CSS? Jun 15, 2015 at 22:21
  • 6
    @crclayton - As I wrote; the order is the same as in WinForms. WinForms is the natural predecessor for WPF so software (developers) would upgrade from WinForms to WPF.
    – Emond
    Jun 16, 2015 at 3:52
  • 36
    How about. WPF starts in the West. Netscape starts in the North? And obviously clockwise for both. May 19, 2016 at 5:30
47

There are three unique situations:

  • 4 numbers, e.g. Margin="a,b,c,d".
  • 2 numbers, e.g. Margin="a,b".
  • 1 number, e.g. Margin="a".

4 Numbers

If there are 4 numbers, then its left, top, right, bottom (a clockwise circle starting from the middle left margin). First number is always the "West" like "WPF":

<object Margin="left,top,right,bottom"/>

Example: if we use Margin="10,20,30,40" it generates:

enter image description here

2 Numbers

If there are 2 numbers, then the first is left & right margin thickness, the second is top & bottom margin thickness. First number is always the "West" like "WPF":

<object Margin="a,b"/> // Equivalent to Margin="a,b,a,b".

Example: if we use Margin="10,30", the left & right margin are both 10, and the top & bottom are both 30.

enter image description here

1 Number

If there is 1 number, then the number is repeated (its essentially a border thickness).

<object Margin="a"/> // Equivalent to Margin="a,a,a,a".

Example: if we use Margin="20" it generates:

enter image description here

Update 2020-05-27

Have been working on a large-scale WPF application for the past 5 years with over 100 screens. Part of a team of 5 WPF/C#/Java devs. We eventually settled on either using 1 number (for border thickness) or 4 numbers. We never use 2. It is consistent, and seems to be a good way to reduce cognitive load when developing.


The rule:

All width numbers start on the left (the "West" like "WPF") and go clockwise (if two numbers, only go clockwise twice, then mirror the rest).

1
  • 1
    "If there are 2 numbers, then the first is left & right margin thickness" But in the example the first number is 30, and it ends up being the top & bottom margin. May 27, 2020 at 9:05
23

Just because @MartinCapodici 's comment is awesome I write here as an answer to give visibility.

All clockwise:

  • WPF start West (left->top->right->bottom)
  • Netscape (ie CSS) start North (top->right->bottom->left)
7
<object Margin="left,top,right,bottom"/>
- or - 
<object Margin="left,top"/>
- or - 
<object Margin="thicknessReference"/>

See here: http://msdn.microsoft.com/en-us/library/system.windows.frameworkelement.margin.aspx

1
  • 4
    For the second example, "left,top", its actually repeated: the first number refers to left & right, the second to top & bottom, see my answer below.
    – Contango
    Jun 27, 2013 at 16:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.