C# WPF Tutorial – Grid Layout or Grid Panel

By
Junaid
-
0
538
C# WPF Tutorial - Grid Layout or Grid Panel

After getting WPF Basic Understanding & Two-way Data Binding, we head to the Grid Panel. Which is used to place data on the screen, there is a total of five panels.

We are starting with Grid Panel because of its simplicity. If you are good at maths you can easily understand the X and Y intersection or in other words Rows & Columns intersection. This means if you want to place any element on the screen you have to define the exact Row number and Column number.

If you do not define any Rows & Columns then by default it’s a single row and single column. So every element you place by drag and drop or write in xaml it’s inside a single row and column.

If you want to define multiple rows and columns then you can do that with the tag RowDefinitions & ColumnDefinitions.

RowDefinitions allow modifying the row graphical settings, such as generic height, width and colours, or whatever you want to do with single or multiple rows.

ColumnDefinitions allow modifying the column graphical settings, such as generic height, width and colours, or whatever you want to do with single or multiple columns.

<Grid.ColumnDefinitions> 
         <ColumnDefinition Width = "Auto" /> 
         <ColumnDefinition />
      </Grid.ColumnDefinitions> 
		
      <Grid.RowDefinitions> 
         <RowDefinition Height = "*" /> 
         <RowDefinition Height = "*" /> 
         <RowDefinition Height = "*" /> 
      </Grid.RowDefinitions>

In the above code, two columns and three rows of configuration are defined.

Auto – is used to define the automatic or responsive settings.

(*) Star – is used to define the percentage base assignment.

Now am sharing the following code in which a complete Grid Panel is used.

C# WPF Tutorial - Grid Layout or Grid Panel

Code:

<Window x:Class="JWPF.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="clr-namespace:JWPF"

        mc:Ignorable="d"

        Title="MainWindow" Height="450" Width="800">

    <Grid>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="*"/>

            <ColumnDefinition Width="8*"/>

            <ColumnDefinition Width="*"/>

        </Grid.ColumnDefinitions>




        <Grid.RowDefinitions>

            <RowDefinition Height = "*" />

            <RowDefinition Height = "*" />

        </Grid.RowDefinitions>




        <Button Grid.Row = "0" Grid.Column = "1" FontSize="25">C# WPF Tutorial - Grid Layout or Grid Panel</Button>

        <Button Grid.Row = "1" Grid.Column = "0">Button 1</Button>

        <Button Grid.Row = "1" Grid.Column = "2">Button 2</Button>

    </Grid>

</Window>