XAML - GridPanel

A Grid panel provides a flexible area which consists of rows and columns. In a Grid, child elements can be arranged in a tabular form. Elements can be added to any specific row and column by using the Grid.Row and Grid.Column properties.
By default, a Grid panel is created with one row and one column. Multiple rows and columns can be created by using the RowDefinitions and ColumnDefinitions properties. The height of rows and the width of columns can be defined in the following three ways −
Fixed value − To assign a fixed size of logical units (1/96 inch)
Fixed value − To assign a fixed size of logical units (1/96 inch)
Auto − It will take only as much space as is required for the controls in that specific row/column.
Auto − It will take only as much space as is required for the controls in that specific row/column.
Star (*) − It will take the remaining space when Auto and fixed sized are filled.
Star (*) − It will take the remaining space when Auto and fixed sized are filled.
The hierarchical inheritance of Grid class is as follows −
Background
Gets or sets a Brush that fills the panel content area. (Inherited from Panel)
Children
Gets a UIElementCollection of child elements of this Panel. (Inherited from Panel.)
ColumnDefinitions
Gets a list of ColumnDefinition objects defined on this instance of Grid.
Height
Gets or sets the suggested height of the element. (Inherited from FrameworkElement.)
ItemHeight
Gets or sets a value that specifies the height of all items that are contained within a WrapPanel.
ItemWidth
Gets or sets a value that specifies the width of all items that are contained within a WrapPanel.
Margin
Gets or sets the outer margin of an element. (Inherited from FrameworkElement.)
Name
Gets or sets the identifying name of the element. The name provides a reference so that code-behind, such as event handler code, can refer to a markup element after it is constructed during processing by a XAML processor. (Inherited from FrameworkElement.)
Orientation
Gets or sets a value that specifies the dimension in which child content is arranged.
Parent
Gets the logical parent element of this element. (Inherited from FrameworkElement.)
Resources
Gets or sets the locally-defined resource dictionary. (Inherited from FrameworkElement.)
RowDefinitions
Gets a list of RowDefinition objects defined on this instance of Grid.
Style
Gets or sets the style used by this element when it is rendered. (Inherited from FrameworkElement.)
Width
Gets or sets the width of the element. (Inherited from FrameworkElement.)
GetColumn
Gets the value of the Grid.Column XAML attached property from the specified FrameworkElement.
GetColumnSpan
Gets the value of the Grid.ColumnSpan XAML attached property from the specified FrameworkElement.
GetRow
Gets the value of the Grid.Row XAML attached property from the specified FrameworkElement.
SetColumn
Sets the value of the Grid.Column XAML attached property on the specified FrameworkElement.
SetRow
Sets the value of the Grid.Row XAML attached property on the specified FrameworkElement.
SetRowSpan
Sets the value of the Grid.RowSpan XAML attached property on the specified FrameworkElement.
The following example shows how to add child elements into a Grid to specify it in a tabular form. Here is the XAML implementation in which Text Blocks are added in the first column and Text Boxes are added in the second column of a Grid.
<Window x:Class = "XAMLGrid.Window1" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "Window1" Height = "300" Width = "604"> 
	
   <Grid x:Name = "FormLayoutGrid" Background = "LightGray"> 
      <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 = "Name" 
         Margin = "10" HorizontalAlignment = "Left" VerticalAlignment = "Center" 
         Width = "100"/> 
      
      <TextBox Grid.Row = "0" Grid.Column = "1" Margin = "10"/> 
      <TextBlock Grid.Row = "1" Grid.Column = "0" Text = "ID" Margin = "10" 
         HorizontalAlignment = "Left" VerticalAlignment = "Center" Width = "100"/> 
      
      <TextBox Grid.Row = "1" Grid.Column = "1" Margin = "10"/> 
      <TextBlock Grid.Row = "2" Grid.Column = "0" Text = "Age" Margin = "10" 
         HorizontalAlignment = "Left" VerticalAlignment = "Center" Width = "100"/> 
      
      <TextBox Grid.Row = "2" Grid.Column = "1" Margin = "10"/>
   </Grid> 
	
</Window>	
When you compile and execute the above code, it will produce the following output−
We recommend you to execute the above example code and experiment with some other properties as well.
Nesting of layout means using a layout panel inside another layout, e.g., defining stack panels inside a grid. This concept is widely used to take advantage of multiple layouts in an application.
In the following example, we will be using stack panels inside a grid. Let’s have a look at the following XAML code −
<Window x:Class = "XAMLNestingLayouts.Window1"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   Title = "Window1" Height = "300" Width = "604"> 
	
   <Grid Background = "LightGray"> 
      <Grid.RowDefinitions> 
         <RowDefinition Height = "*"/> 
         <RowDefinition Height = "*"/> 
         <RowDefinition Height = "*"/> 
         <RowDefinition Height = "*"/> 
         <RowDefinition Height = "*"/> 
      </Grid.RowDefinitions>
		
      <Grid.ColumnDefinitions> 
         <ColumnDefinition Width = "*"/> 
      </Grid.ColumnDefinitions> 
		
      <Label Content = "Employee Info" FontSize = "15" FontWeight = "Bold" 
         Grid.Column = "0" Grid.Row = "0"/> 
		
      <StackPanel Grid.Column = "0" Grid.Row = "1" Orientation = "Horizontal"> 
         <Label Content = "Name"  VerticalAlignment = "Center" Width = "70"/>
         <TextBox Name = "txtName" Text = "Muhammad Ali" 
            VerticalAlignment = "Center" Width = "200"></TextBox> 
      </StackPanel>  
		
      <StackPanel Grid.Column = "0" Grid.Row = "2" Orientation = "Horizontal"> 
         <Label Content = "ID" VerticalAlignment = "Center" Width = "70"/> 
         <TextBox Name = "txtCity" Text = "421" VerticalAlignment = "Center" 
            Width = "50"></TextBox> 
      </StackPanel>
		
      <StackPanel Grid.Column = "0" Grid.Row = "3" Orientation = "Horizontal"> 
         <Label Content = "Age" VerticalAlignment = "Center" Width = "70"/> 
         <TextBox Name = "txtState" Text = "32" VerticalAlignment = "Center" 
            Width = "50"></TextBox> 
      </StackPanel>  
		
      <StackPanel Grid.Column = "0" Grid.Row = "4" Orientation = "Horizontal"> 
         <Label Content = "Title" VerticalAlignment = "Center" Width = "70"/>
         <TextBox Name = "txtCountry" Text = "Programmer" 
            VerticalAlignment = "Center" Width = "20></TextBox> 
      </StackPanel>
   </Grid> 
	
</Window>
When you compile and execute the above code, it will produce the following output −
We recommend you to execute the above example code and experiment with some other nesting layouts.
 Print
 Add Notes
 Bookmark this page