#421 – HorizontalAlignment, Margins and Column Widths in a Grid

When working with elements in a Grid, you use the row and column height/width, alignment properties and margins to determine the size and location of each element.  In certain cases, some of the properties might be ignored, depending on the value of other properties.

In the example below, the first two columns have their Width property set to Auto, so that they auto-size to their content.  The third and fourth columns use * sizing.  The 2nd and 4th columns specify a margin of 10 on both the left and right, while the 1st and 3rd use no margins.  Elements in the 1st row set HorizontalAlignment to Center, and Left, Right and Stretch for the following rows.

Notice the following:

  • HorizontalAlignment of Stretch is the same as Center for auto-sized columns
  • Margins don’t apply for *-sized columns when HorizontalAlignment is Center
  • Element are aligned within their margins