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?

Alexander Abakumov
  • 13,617
  • 16
  • 88
  • 129
Papa John
  • 3,764
  • 3
  • 26
  • 23
  • https://msdn.microsoft.com/en-in/library/system.windows.frameworkelement.margin – amit jha May 02 '16 at 12:36
  • 3
    Second result when searching for WPF margin order, https://stackoverflow.com/questions/520422/why-does-xaml-margin-not-follow-css-norm. left top right bottom – Lukazoid Dec 15 '11 at 14:59
  • @PapaJohn To be more specific to the link `@amit jha` provided, look at the section titled `XAML Values` for the margin in that link. – nam Apr 21 '19 at 23:12

4 Answers4

482
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.

Emond
  • 50,210
  • 11
  • 84
  • 115
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).

Community
  • 1
  • 1
Contango
  • 76,540
  • 58
  • 260
  • 305
  • 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. – Peter Bruins May 27 '20 at 09: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)
Askolein
  • 3,250
  • 3
  • 28
  • 40
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

chopikadze
  • 4,219
  • 26
  • 30
  • 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 '13 at 16:15