Defines a flexible grid area that consists of columns and rows.
Assembly: PresentationFramework (in PresentationFramework.dll)
XMLNS for XAML: http://schemas.microsoft.com/winfx/2006/xaml/presentation, http://schemas.microsoft.com/netfx/2007/xaml/presentation
Columns and rows that are defined within a 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 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. 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 by using a combination of the Margin property and alignment properties.
Child elements of a 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.
and Table share some common functionality, but each can be applied in appropriate scenarios to better use its built-in features. adds elements based on a row and column index; Table does not. The 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 can be absolutely positioned relative to the upper-left corner of their "cell" boundaries. Table does not support this feature. also offers more flexible resizing behavior than Table.
If a child element is added to a column within a , 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.
// Create the application's main window mainWindow = new Window(); mainWindow.Title = "Grid Sample"; // Create the Grid Grid myGrid = new Grid(); myGrid.Width = 250; myGrid.Height = 100; myGrid.HorizontalAlignment = HorizontalAlignment.Left; myGrid.VerticalAlignment = VerticalAlignment.Top; myGrid.ShowGridLines = true; // Define the Columns ColumnDefinition colDef1 = new ColumnDefinition(); ColumnDefinition colDef2 = new ColumnDefinition(); ColumnDefinition colDef3 = new ColumnDefinition(); myGrid.ColumnDefinitions.Add(colDef1); myGrid.ColumnDefinitions.Add(colDef2); myGrid.ColumnDefinitions.Add(colDef3); // Define the Rows RowDefinition rowDef1 = new RowDefinition(); RowDefinition rowDef2 = new RowDefinition(); RowDefinition rowDef3 = new RowDefinition(); RowDefinition rowDef4 = new RowDefinition(); myGrid.RowDefinitions.Add(rowDef1); myGrid.RowDefinitions.Add(rowDef2); myGrid.RowDefinitions.Add(rowDef3); myGrid.RowDefinitions.Add(rowDef4); // Add the first text cell to the Grid TextBlock txt1 = new TextBlock(); txt1.Text = "2005 Products Shipped"; txt1.FontSize = 20; txt1.FontWeight = FontWeights.Bold; Grid.SetColumnSpan(txt1, 3); Grid.SetRow(txt1, 0); // Add the second text cell to the Grid TextBlock txt2 = new TextBlock(); txt2.Text = "Quarter 1"; txt2.FontSize = 12; txt2.FontWeight = FontWeights.Bold; Grid.SetRow(txt2, 1); Grid.SetColumn(txt2, 0); // Add the third text cell to the Grid TextBlock txt3 = new TextBlock(); txt3.Text = "Quarter 2"; txt3.FontSize = 12; txt3.FontWeight = FontWeights.Bold; Grid.SetRow(txt3, 1); Grid.SetColumn(txt3, 1); // Add the fourth text cell to the Grid TextBlock txt4 = new TextBlock(); txt4.Text = "Quarter 3"; txt4.FontSize = 12; txt4.FontWeight = FontWeights.Bold; Grid.SetRow(txt4, 1); Grid.SetColumn(txt4, 2); // Add the sixth text cell to the Grid TextBlock txt5 = new TextBlock(); Double db1 = new Double(); db1 = 50000; txt5.Text = db1.ToString(); Grid.SetRow(txt5, 2); Grid.SetColumn(txt5, 0); // Add the seventh text cell to the Grid TextBlock txt6 = new TextBlock(); Double db2 = new Double(); db2 = 100000; txt6.Text = db2.ToString(); Grid.SetRow(txt6, 2); Grid.SetColumn(txt6, 1); // Add the final text cell to the Grid TextBlock txt7 = new TextBlock(); Double db3 = new Double(); db3 = 150000; txt7.Text = db3.ToString(); Grid.SetRow(txt7, 2); Grid.SetColumn(txt7, 2); // Total all Data and Span Three Columns TextBlock txt8 = new TextBlock(); txt8.FontSize = 16; txt8.FontWeight = FontWeights.Bold; txt8.Text = "Total Units: " + (db1 + db2 + db3).ToString(); Grid.SetRow(txt8, 3); Grid.SetColumnSpan(txt8, 3); // Add the TextBlock elements to the Grid Children collection myGrid.Children.Add(txt1); myGrid.Children.Add(txt2); myGrid.Children.Add(txt3); myGrid.Children.Add(txt4); myGrid.Children.Add(txt5); myGrid.Children.Add(txt6); myGrid.Children.Add(txt7); myGrid.Children.Add(txt8); // Add the Grid as the Content of the Parent Window Object mainWindow.Content = myGrid; mainWindow.Show ();
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="Grid Sample"> <Grid VerticalAlignment="Top" HorizontalAlignment="Left" ShowGridLines="True" Width="250" Height="100"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <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> </Grid> </Page>
|How to: Create a Grid Element||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 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 to create layout that looks like a monthly calendar.|
Windows 7, Windows Vista, Windows XP SP2, Windows Server 2008 R2, Windows Server 2008, Windows Server 2003
The .NET Framework and .NET Compact Framework do not support all versions of every platform. For a list of the supported versions, see .NET Framework System Requirements.