• Grid layout defines an area where you can position child controls or elements in rows and columns.
• Grid layout is used to display the controls independently in the form of rows and columns.
• When we use grid in the form of rows and columns, we need to use row definitions and column definitions along with grid.
• Row definitions is used to divide the grid into number of rows.
• Column definitions is used to divide the grid in to number of columns.
• In general, how many rows are there that many row definitions tags will be create, how many columns are their that many column definition tags are tags are created with in the grid.

Example with grid panel:

• Create a new window, with in the window by default grid layout is generated.
•  Now go to xaml source and write the following code:

[csharp]<Window x:Class="WPFGridpanel.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Grid Layout" Height="350" Width="525"> <Grid> <Grid Name="Grid1" Background="Aqua"> <Grid.RowDefinitions> <RowDefinition ></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <TextBox Name="txt1" Grid.Row="0" Grid.ColumnSpan="5" Background="White"></TextBox> <Button Name="btn9" Content="9" Grid.Row="1" Grid.Column="0"></Button> <Button Name="btn8" Content="8" Grid.Row="1" Grid.Column="1"></Button> <Button Name="btn7" Content="7" Grid.Row="1" Grid.Column="2"></Button> <Button Name="btnplus" Content="+" Grid.Row="1" Grid.Column="3"></Button> <Button Name="btnmultiply" Content="*" Grid.Row="1" Grid.Column="4"></Button> <Button Name="btn4" Content="4" Grid.Row="2" Grid.Column="0"></Button> <Button Name="btn5" Content="5" Grid.Row="2" Grid.Column="1"></Button> <Button Name="btn6" Content="6" Grid.Row="2" Grid.Column="2"></Button> <Button Name="btnminus" Content="-" Grid.Row="2" Grid.Column="3"></Button> <Button Name="btndivide" Content="/" Grid.Row="2" Grid.Column="4"></Button> <Button Name="btn3" Content="3" Grid.Row="3" Grid.Column="0"></Button> <Button Name="btn2" Content="2" Grid.Row="3" Grid.Column="1"></Button> <Button Name="btn1" Content="1" Grid.Row="3" Grid.Column="2"></Button> <Button Name="btn0" Content="0" Grid.Row="3" Grid.Column="3"></Button> <Button Name="btnequals" Content="=" Grid.Row="3" Grid.Column="4"></Button> </Grid> </Grid> </Window> [/csharp]
After wiring the above code the window should become like below.
Now run the application, to do that, we have to click F5. Then we should get new window like below: