Grid Class (System.Windows.Controls)

Switch View

Collapse All

Language Filter

This page is specific to

Microsoft Silverlight 3

Other versions are also available for the following:

.NET Framework Class Library for Silverlight

Grid Class

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

Namespace: System.Windows.Controls
Assembly: System.Windows (in System.Windows.dll)

Syntax

Visual Basic (Declaration)

Public Class Grid _
    Inherits Panel

Visual Basic (Usage)

Dim instance As Grid

public class Grid : Panel

XAML Object Element Usage

<Grid ...>
  oneOrMoreUIElements
</Grid>

XAML Values

oneOrMoreUIElements: One or more object elements that derive from the UIElement class. Object elements defined here become members of the Children collection.

Remarks

Grid is one of the Panel elements that enable complex layout. By default, a Grid contains one row and one column. To define multiple rows and columns use the ColumnDefinitions and RowDefinitions collections. Each RowDefinition and ColumnDefinition object inside the RowDefinitions and ColumnDefinitions collections define a single row or column. The RowDefinition and ColumnDefinition objects also define the size of each row and column using the GridLength object. For a definition of each unit type, see GridUnitType.

Note:
Grid is designed to use for layout of your application's user interface. It is not intended for data display. For displaying and binding to sets of data, use DataGrid.

You can position objects in specific cells of the Grid by using the Grid..::.Column and Grid..::.Row attached properties.

Columns and rows 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. Star sizing is the default behavior.

The following illustration shows a grid where the height of the first two rows is set to * and the last row is 2*.

Columns and rows can use Auto sizing to distribute space evenly based on the size of the content that is within a column or row. The following illustration shows 3 columns using Auto sizing.

Content can span across multiple rows and columns using the RowSpan and ColumnSpan attached properties.

Setting the Margin property on the child elements in a grid sets the distance between the element and its grid cell boundaries. The HorizontalAlignment and VerticalAlignment properties describe how the child element should be positioned within the grid cell. 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 result, layered order (also known as z-order) can be achieved when elements share the same coordinates. For more information about z-order, see ZIndex.

The following table summarizes the other available layout containers provided by Silverlight.

Panel name	Description
Canvas	Defines an area where you can explicitly position child elements by X and Y values.
StackPanel	Arranges child elements into a single line that can be oriented horizontally or vertically.

For scenarios that require application layout that is not possible using any of the predefined Panel elements, custom layout behaviors can be achieved by inheriting from Panel and overriding the default measure and arrange behavior by using the MeasureOverride and ArrangeOverride methods. For more information, see Custom Panels.

Examples

The following code example shows how to design a layout by using a Grid.

XAML

<Grid x:Name="LayoutRoot" Background="#DCDCDC" Width="400" Height="300" ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="250" />
        <ColumnDefinition Width="150" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="2*" />
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="10" FontWeight="Bold" Text="Contoso Corporation" HorizontalAlignment="Center" VerticalAlignment="Center" />
    <Grid x:Name="FormLayoutGrid" Grid.Row="1" Grid.Column="0" ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0" Text="First Name" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />
        <TextBox Grid.Row="0" Grid.Column="1" Margin="10" />
        <TextBlock Grid.Row="1" Grid.Column="0" Text="Last Name" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />
        <TextBox Grid.Row="1" Grid.Column="1" Margin="10" />
        <TextBlock Grid.Row="2" Grid.Column="0" Text="Address" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />
        <TextBox Grid.Row="2" Grid.Column="1" Margin="10" />

    </Grid>
 </Grid>

Visual Basic

Partial Public Class Page
    Inherits UserControl

    Public Sub New()
        InitializeComponent()
        LayoutDesign()
    End Sub

    Private Sub LayoutDesign()
        'Create Stackpanel for ListBox Control and its description 
        Dim DeptStackPanel As New StackPanel()
        DeptStackPanel.Margin = New Thickness(10)

        LayoutRoot.Children.Add(DeptStackPanel)
        Grid.SetColumn(DeptStackPanel, 1)
        Grid.SetRow(DeptStackPanel, 1)

        Dim DeptListHeading As New TextBlock()
        DeptListHeading.Text = "Department"

        Dim DeptList As New ListBox()
        DeptList.Items.Add("Finance")
        DeptList.Items.Add("Marketing")
        DeptList.Items.Add("Human Resources")
        DeptList.Items.Add("Payroll")

        DeptStackPanel.Children.Add(DeptListHeading)
        DeptStackPanel.Children.Add(DeptList)

        'Create StackPanel for buttons 
        Dim ButtonsStackPanel As New StackPanel()
        ButtonsStackPanel.Margin = New Thickness(10)
        ButtonsStackPanel.Orientation = Orientation.Horizontal
        ButtonsStackPanel.HorizontalAlignment = HorizontalAlignment.Center

        LayoutRoot.Children.Add(ButtonsStackPanel)
        Grid.SetColumn(ButtonsStackPanel, 0)
        Grid.SetRow(ButtonsStackPanel, 2)
        Grid.SetColumnSpan(ButtonsStackPanel, 2)

        Dim BackButton As New Button()
        BackButton.Content = "Back"
        BackButton.Height = 30
        BackButton.Width = 100

        Dim CancelButton As New Button()
        CancelButton.Content = "Cancel"
        CancelButton.Height = 30
        CancelButton.Width = 100

        Dim NextButton As New Button()
        NextButton.Content = "Next"
        NextButton.Height = 30
        NextButton.Width = 100

        ButtonsStackPanel.Children.Add(BackButton)
        ButtonsStackPanel.Children.Add(CancelButton)
        ButtonsStackPanel.Children.Add(NextButton)

        BackButton.Margin = New Thickness(10)
        CancelButton.Margin = New Thickness(10)
        NextButton.Margin = New Thickness(10)
    End Sub
End Class

    public Page()
    {
        InitializeComponent();
        LayoutDesign();
    }

    private void LayoutDesign()
    {
        //Create Stackpanel for ListBox Control and its description
        StackPanel DeptStackPanel = new StackPanel();
        DeptStackPanel.Margin = new Thickness(10);

        LayoutRoot.Children.Add(DeptStackPanel);
        Grid.SetColumn(DeptStackPanel, 1);
        Grid.SetRow(DeptStackPanel, 1);

        TextBlock DeptListHeading = new TextBlock();
        DeptListHeading.Text = "Department";

        ListBox DeptList = new ListBox();
        DeptList.Items.Add("Finance");
        DeptList.Items.Add("Marketing");
        DeptList.Items.Add("Human Resources");
        DeptList.Items.Add("Payroll");

        DeptStackPanel.Children.Add(DeptListHeading);
        DeptStackPanel.Children.Add(DeptList);

        //Create StackPanel for buttons
        StackPanel ButtonsStackPanel = new StackPanel();
        ButtonsStackPanel.Margin = new Thickness(10);
        ButtonsStackPanel.Orientation = Orientation.Horizontal;
        ButtonsStackPanel.HorizontalAlignment = HorizontalAlignment.Center;

        LayoutRoot.Children.Add(ButtonsStackPanel);
        Grid.SetColumn(ButtonsStackPanel, 0);
        Grid.SetRow(ButtonsStackPanel, 2);
        Grid.SetColumnSpan(ButtonsStackPanel, 2);

        Button BackButton = new Button();
        BackButton.Content = "Back";
        BackButton.Height = 30;
        BackButton.Width = 100;

        Button CancelButton = new Button();
        CancelButton.Content = "Cancel";
        CancelButton.Height = 30;
        CancelButton.Width = 100;

        Button NextButton = new Button();
        NextButton.Content = "Next";
        NextButton.Height = 30;
        NextButton.Width = 100;

        ButtonsStackPanel.Children.Add(BackButton);
        ButtonsStackPanel.Children.Add(CancelButton);
        ButtonsStackPanel.Children.Add(NextButton);

        BackButton.Margin = new Thickness(10);
        CancelButton.Margin = new Thickness(10);
        NextButton.Margin = new Thickness(10);
    }
}

The preceding example produces output that is similar to the following illustration.

Inheritance Hierarchy

System..::.Object
  System.Windows..::.DependencyObject
    System.Windows..::.UIElement
      System.Windows..::.FrameworkElement
        System.Windows.Controls..::.Panel
          System.Windows.Controls..::.Grid
            System.Windows.Controls.Primitives..::.DataGridFrozenGrid

Thread Safety

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

Platforms

For a list of the operating systems and browsers that are supported by Silverlight, see Supported Operating Systems and Browsers.

Reference

Grid Members

System.Windows.Controls Namespace

Other Resources

Silverlight Layout System

Custom Panels