How to: Create a Grid Element
.NET Framework 4.5
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 ColumnDefinition objects and three RowDefinition objects 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.
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>
