Files
docs-desktop/dotnet-desktop-guide/framework/wpf/controls/how-to-create-a-grid-element.md
T
Andy (Steve) De George be103da07e Replace various WPF include files with content (#1335)
* net-current-v30plus-md.md

* net-current-v40plus-md.md

* tla2sharptla-ui-md.md

* tla2sharptla-uiautomation-md.md

* tla2sharptla-winclient-md.md

* tla2sharptla-xaml-md.md

* tlasharptla-ui-md.md

* tlasharptla-uiautomation-md.md

* tlasharptla-winclient-md.md

* tlasharptla-xaml-md.md

* fix warnings
2022-03-16 12:14:11 -04:00

1.8 KiB

title, ms.date, dev_langs, helpviewer_keywords, ms.assetid
title ms.date dev_langs helpviewer_keywords ms.assetid
How to: Create a Grid Element 03/30/2017
csharp
vb
Grid control [WPF], creating [WPF], grid instance
b2f07626-9df8-43b8-8d36-492f3cb42837

How to: Create a Grid Element

Example

The following example shows how to create and use an instance of xref:System.Windows.Controls.Grid by using either Extensible Application Markup Language (XAML) or code. This example uses three xref:System.Windows.Controls.ColumnDefinition objects and three xref:System.Windows.Controls.RowDefinition objects to create a grid that has nine cells, such as in a worksheet. Each cell contains a xref:System.Windows.Controls.TextBlock element that represents data, and the top row contains a xref:System.Windows.Controls.TextBlock with the xref:System.Windows.Controls.Grid.ColumnSpan%2A property applied. To show the boundaries of each cell, the xref:System.Windows.Controls.Grid.ShowGridLines%2A property is enabled.

[!code-csharpGrid#3] [!code-vbGrid#3] [!code-xamlGrid#3]

Either approach will generate a user interface that looks much the same, like the one below.

a screenshot depicts a WPF user interface which contains a grid broken into three columns.  It bears the heading '2018 Products Shipped' spanning all columns of the top row, and has three columns each with sales figures for a certain quarter.  The bottom row has text spanning two columns with the message 'Total Units: 300,000'

See also