Assembly: PresentationFramework (in presentationframework.dll)
XML Namespace: http://schemas.microsoft.com/winfx/2006/xaml/presentation
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.
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 myGrid.ColumnDefinitions.Add(colDef1) myGrid.ColumnDefinitions.Add(colDef2) myGrid.ColumnDefinitions.Add(colDef3) Dim rowDef1 As New RowDefinition Dim rowDef2 As New RowDefinition Dim rowDef3 As New RowDefinition Dim rowDef4 As New RowDefinition myGrid.RowDefinitions.Add(rowDef1) myGrid.RowDefinitions.Add(rowDef2) myGrid.RowDefinitions.Add(rowDef3) myGrid.RowDefinitions.Add(rowDef4) 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) myGrid.Children.Add(txt1) Dim txt2 As New TextBlock txt2.Text = "Quarter 1" txt2.FontSize = 12 txt2.FontWeight = FontWeights.Bold Grid.SetRow(txt2, 1) Grid.SetColumn(txt2, 0) myGrid.Children.Add(txt2) Dim txt3 As New TextBlock txt3.Text = "Quarter 2" txt3.FontSize = 12 txt3.FontWeight = FontWeights.Bold Grid.SetRow(txt3, 1) Grid.SetColumn(txt3, 1) myGrid.Children.Add(txt3) Dim txt4 As New TextBlock txt4.Text = "Quarter 3" txt4.FontSize = 12 txt4.FontWeight = FontWeights.Bold Grid.SetRow(txt4, 1) Grid.SetColumn(txt4, 2) myGrid.Children.Add(txt4) Dim txt5 As New TextBlock txt5.Text = "50,000" Grid.SetRow(txt5, 2) Grid.SetColumn(txt5, 0) myGrid.Children.Add(txt5) Dim txt6 As New Controls.TextBlock txt6.Text = "100,000" Grid.SetRow(txt6, 2) Grid.SetColumn(txt6, 1) myGrid.Children.Add(txt6) Dim txt7 As New TextBlock txt7.Text = "150,000" Grid.SetRow(txt7, 2) Grid.SetColumn(txt7, 2) myGrid.Children.Add(txt7) ' 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) myGrid.Children.Add(txt8) Me.Content = myGrid End Sub
<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 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.
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 EditionThe Microsoft .NET Framework 3.0 is supported on Windows Vista, Microsoft Windows XP SP2, and Windows Server 2003 SP1.