Properties order in Margin

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?

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

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

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