Andy De George
da363692ff
* Reset branch for WPF changes * Convert BMP to PNG; fix link-out-of-scope err * Add snippets for WPF... 6794 files!!!! * Add missing snippets * update file updated between migration * Fix paths to include * update breadcrumb and toc * fix index links * fix index links * fix index links * fix markdown
2.4 KiB
title, description, ms.date, helpviewer_keywords, ms.assetid
| title | description | ms.date | helpviewer_keywords | ms.assetid | |||
|---|---|---|---|---|---|---|---|
| How to create a complex Grid | An example on how to use a Grid control to create a layout that looks like a monthly calendar. | 03/30/2017 |
|
4ce3040a-a156-4364-9596-98ca1eca5550 |
How to create a complex Grid
This example shows how to use a xref:System.Windows.Controls.Grid control to create a layout that looks like a monthly calendar.
Example
The following example defines eight rows and eight columns by using the xref:System.Windows.Controls.RowDefinition and xref:System.Windows.Controls.ColumnDefinition classes. It uses the xref:System.Windows.Controls.Grid.ColumnSpan%2A?displayProperty=nameWithType and xref:System.Windows.Controls.Grid.RowSpan%2A?displayProperty=nameWithType attached properties, together with xref:System.Windows.Shapes.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 xref:System.Windows.Controls.Grid, a principle difference between xref:System.Windows.Controls.Grid and xref:System.Windows.Documents.Table.
The example uses vertical gradients to xref:System.Windows.Shapes.Shape.Fill%2A the columns and rows to improve the visual presentation and readability of the calendar. Styled xref:System.Windows.Controls.TextBlock elements represent the dates and days of the week. xref:System.Windows.Controls.TextBlock elements are absolutely positioned within their cells by using the xref:System.Windows.FrameworkElement.Margin%2A property and alignment properties that are defined within the style for the application.
[!code-xamlGridComplex#1]
The following image shows the resulting control, a customizable calendar:
