Create a Complex Grid

How to: Create a Complex Grid


This example shows how to use a Grid to create layout that looks like a monthly calendar.


The following example defines eight rows and eight columns by using the RowDefinition and ColumnDefinition classes. It uses the Grid.ColumnSpan and Grid.RowSpan attached properties, together with Rectangle elements, which fill the backgrounds of various columns and rows. This design is possible because more than one element can exist in each cell in a Grid, a principle difference between Grid and Table.

The example uses vertical gradients to Fill the columns and rows in order to improve the visual presentation and readability of the calendar. Styled TextBlock elements represent the dates and days of the week. TextBlock elements are absolutely positioned within their cells by using the Margin property and alignment properties that are defined within the style for the application.

© 2016 Microsoft