Margin in XAML vs. CSS

  • Article

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:

In CSS:

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

In XAML:

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