MohamedG's Log


Margin in XAML vs. CSS

According to W3C:

“The ‘margin’ property is a shorthand property for setting ‘margin-top’, ‘margin-right’, ‘margin-bottom’, and ‘margin-left’ at the same place in the style sheet” respectively. Here’s the example W3C used to illustrate the order of properties in the shorthand:

margin: 10px 20px 30px 40px;

Top padding is 10px, right padding is 20px, bottom padding is 30px, left padding is 40px.

If you’re like me, used to CSS, you will have a problem getting adjusted to the margin property in XAML:

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

You see, the type of this property is System.Windows.Thickness, and its constructor looks like this:

public Thickness(
    double left,
    double top,
    double right,
    double bottom

So, you will have to perform a mental shift when you go back and forth between the two formats, or you can use the explicit properties instead:


.class {
    margin-top: 10px;
    margin-bottom: 20px;
    margin-right: 30px;
    margin-left: 40px;


    <Thickness Left="left" Top="top" Right="right" Bottom="bottom"/>