Grid Class

Defines a flexible grid area that consists of columns and rows.

Namespace: System.Windows.Controls
Assembly: PresentationFramework (in presentationframework.dll)
XML Namespace:

Public Class Grid
	Inherits Panel
	Implements IAddChild
Dim instance As Grid

public class Grid extends Panel implements IAddChild
public class Grid extends Panel implements IAddChild

Content Model: Grid enforces a strong content model for child content. See the Children property for additional information about the Panel content model.

Columns and rows that are defined within a Grid can take advantage of Star sizing to distribute remaining space proportionally. When Star is selected as the height or width of a row or column, that column or row receives a weighted proportion of the remaining available space. This is in contrast to Auto, which distributes space evenly based on the size of the content that is within a column or row. This value is expressed as * or 2* when you use Extensible Application Markup Language (XAML). In the first case, the row or column would receive one times the available space, while in the second case, the row or column would receive two times the available space, and so on. For additional information about star sizing, see the Use Star Sizing sample. By combining this technique to proportionally distribute space with a HorizontalAlignment and VerticalAlignment value of Stretch, it is possible to partition layout space by percentage of screen space. Grid is the only layout panel that can distribute space in this manner.

By default, rows and columns take up the least amount of space necessary to accommodate the largest content within any cell contained in a given row or column. For example, if a column has one cell with a long word like "hippopotamus" contained within it but all the other cells in the column have smaller words like "dog", the width of the column will be the width of the largest word (hippopotamus).

You can precisely position child elements of a Grid by using a combination of the Margin property and alignment properties.

Child elements of a Grid are drawn in the order in which they appear in markup or code. As a consequence, layered order (also known as z-order) can be achieved when elements share the same coordinates.

Grid and Table share some common functionality, but each can be applied in appropriate scenarios to better use its built-in features. Grid adds elements based on a row and column index; Table does not. The Grid element allows layering of content, where more than one element can exist within a single cell. Table does not support layering. Child elements of a Grid can be absolutely positioned relative to the upper-left corner of their "cell" boundaries. Table does not support this feature. Grid also offers more flexible resizing behavior than Table.

Grid uses the GridLength object to define the sizing characteristics of a RowDefinition or ColumnDefinition. For a definition of each unit type, see GridUnitType.

If a child element is added to a column within a Grid, and the column has its Width property set to Auto, the child will be measured without restrictions. This behavior can prevent horizontal scroll bars from displaying if a ScrollViewer is being used, as the child element is measured as unbounded. For purposes of display, the child is clipped rather than scrolled.

Panel elements do not receive focus by default. To compel a panel element to receive focus, set the Focusable property to true.

The following example demonstrates how to create a grid. In this case, the grid defines three ColumnDefinition elements and four RowDefinition elements that host child content.

Public Sub New()
    WindowTitle = "Grid Sample"
    'Create a Grid as the root Panel element
    Dim myGrid As New Grid()
    myGrid.Height = 100
    myGrid.Width = 250
    myGrid.ShowGridLines = True
    myGrid.HorizontalAlignment = Windows.HorizontalAlignment.Left
    myGrid.VerticalAlignment = Windows.VerticalAlignment.Top

    ' Define and Add the Rows and Columns
    Dim colDef1 As New ColumnDefinition
    Dim colDef2 As New ColumnDefinition
    Dim colDef3 As New ColumnDefinition

    Dim rowDef1 As New RowDefinition
    Dim rowDef2 As New RowDefinition
    Dim rowDef3 As New RowDefinition
    Dim rowDef4 As New RowDefinition

    Dim txt1 As New TextBlock
    txt1.Text = "2004 Products Shipped"
    txt1.FontSize = 20
    txt1.FontWeight = FontWeights.Bold
    Grid.SetColumnSpan(txt1, 3)
    Grid.SetRow(txt1, 0)

    Dim txt2 As New TextBlock
    txt2.Text = "Quarter 1"
    txt2.FontSize = 12
    txt2.FontWeight = FontWeights.Bold
    Grid.SetRow(txt2, 1)
    Grid.SetColumn(txt2, 0)

    Dim txt3 As New TextBlock
    txt3.Text = "Quarter 2"
    txt3.FontSize = 12
    txt3.FontWeight = FontWeights.Bold
    Grid.SetRow(txt3, 1)
    Grid.SetColumn(txt3, 1)

    Dim txt4 As New TextBlock
    txt4.Text = "Quarter 3"
    txt4.FontSize = 12
    txt4.FontWeight = FontWeights.Bold
    Grid.SetRow(txt4, 1)
    Grid.SetColumn(txt4, 2)

    Dim txt5 As New TextBlock
    txt5.Text = "50,000"
    Grid.SetRow(txt5, 2)
    Grid.SetColumn(txt5, 0)

    Dim txt6 As New Controls.TextBlock
    txt6.Text = "100,000"
    Grid.SetRow(txt6, 2)
    Grid.SetColumn(txt6, 1)

    Dim txt7 As New TextBlock
    txt7.Text = "150,000"
    Grid.SetRow(txt7, 2)
    Grid.SetColumn(txt7, 2)

    ' Add the final TextBlock Cell to the Grid
    Dim txt8 As New TextBlock
    txt8.FontSize = 16
    txt8.FontWeight = FontWeights.Bold
    txt8.Text = "Total Units: 300000"
    Grid.SetRow(txt8, 3)
    Grid.SetColumnSpan(txt8, 3)

    Me.Content = myGrid
End Sub

<Page xmlns="" WindowTitle="Grid Sample">
    <Grid VerticalAlignment="Top" HorizontalAlignment="Left" ShowGridLines="True" Width="250" Height="100">
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />

      <TextBlock FontSize="20" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="0">2005 Products Shipped</TextBlock>
      <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="0">Quarter 1</TextBlock>
      <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="1">Quarter 2</TextBlock>
      <TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="2">Quarter 3</TextBlock>
      <TextBlock Grid.Row="2" Grid.Column="0">50000</TextBlock>
      <TextBlock Grid.Row="2" Grid.Column="1">100000</TextBlock>
      <TextBlock Grid.Row="2" Grid.Column="2">150000</TextBlock>
      <TextBlock FontSize="16" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="3">Total Units: 300000</TextBlock>

More Code

How to: Create a Grid Element

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

How to: Create a Complex Grid

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


Any public static (Shared in Visual Basic) members of this type are thread safe. Any instance members are not guaranteed to be thread safe.

Windows 98, Windows Server 2000 SP4, Windows CE, Windows Millennium Edition, Windows Mobile for Pocket PC, Windows Mobile for Smartphone, Windows Server 2003, Windows XP Media Center Edition, Windows XP Professional x64 Edition, Windows XP SP2, Windows XP Starter Edition

The Microsoft .NET Framework 3.0 is supported on Windows Vista, Microsoft Windows XP SP2, and Windows Server 2003 SP1.

.NET Framework

Supported in: 3.0

Community Additions