--- title: "How to: Create a Grid Element" ms.date: "03/30/2017" dev_langs: - "csharp" - "vb" helpviewer_keywords: - "Grid control [WPF], creating [WPF], grid instance" ms.assetid: b2f07626-9df8-43b8-8d36-492f3cb42837 --- # How to: Create a Grid Element ## Example The following example shows how to create and use an instance of by using either Extensible Application Markup Language (XAML) or code. This example uses three objects and three objects to create a grid that has nine cells, such as in a worksheet. Each cell contains a element that represents data, and the top row contains a with the property applied. To show the boundaries of each cell, the property is enabled. [!code-csharp[Grid#3](~/samples/snippets/csharp/VS_Snippets_Wpf/Grid/CSharp/Grid_Code.cs#3)] [!code-vb[Grid#3](~/samples/snippets/visualbasic/VS_Snippets_Wpf/Grid/VisualBasic/grid_vb.vb#3)] [!code-xaml[Grid#3](~/samples/snippets/xaml/VS_Snippets_Wpf/Grid/XAML/default.xaml#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'](././media/how-to-create-a-grid-element/how-to-create-a-grid-element.png) ## See also - - [Panels Overview](panels-overview.md)