Properties order in Margin

Question

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?

Sarinasarine

Second result when searching for WPF margin order, #520922. left top right bottom – Binni

msdn.microsoft.com/en-in/library/… – Thordia

@PapaJohn To be more specific to the link @amit jha provided, look at the section titled XAML Values for the margin in that link. – Leonor

Answer 1

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.

Turntable

LTRB is the short notation to remember easily. – Veloz

Note: this is a different order than html's css order, which is Top, Right, Bottom, Left. – Etana

Anyone have any insight into why they decided to go with something different from CSS? – Zacynthus

@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. – Turntable

How about. WPF starts in the West. Netscape starts in the North? And obviously clockwise for both. – Follmer

@CharlesClayton - presumably WinForms inherited this sequence from MFC CRect which inherits Windows API structure RECT. – Ardy

Answer 2

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:

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.

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:

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

Intramural

"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. – Nesselrode

Answer 3

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)

Bearish

Answer 4

<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

Inbreathe

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. – Intramural