WPF Grid Panel

Introduction

The grid is a layout panel that arranges its child controls in a tabular structure of rows and columns. Its similar to the HTML table tr and td tags
we can set the rows in grid with the help of "Grid.RowDefinitions" and set columns with the help of "Grid.ColumnDefinitions".
we just need to add "RowDefinition" and "ColumnDefinition" as per our requirement as below

Below just write down a WPF Grid Layout with two reows and two columns

.xaml

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

Output

We can position the controls inside the Grid using Grid.Column and Grid.Row as Below

.xaml

  
      <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>        
        <TextBlock Text="First Name" Grid.Column="0" Grid.Row="0"/>
        <TextBox Grid.Column="1" Grid.Row="0"/>
        <TextBlock Text="First Name" Grid.Column="0" Grid.Row="1"/>
        <TextBox  Grid.Column="1" Grid.Row="1"/>
        <TextBlock Text="Age" Grid.Column="0" Grid.Row="2"/>
        <TextBox  Grid.Column="1" Grid.Row="2"/>
        <TextBlock Text="Gender" Grid.Column="0" Grid.Row="3"/>
        <ComboBox  Grid.Column="1" Grid.Row="3"/>        
    </Grid>

Output

Properties	Explination
x:Name	x:Name bahave like a unique ID of the controll. using this property we assign a unique name to Grid Panel.
Height	we are setting an height for Grid Panel
Width	we are setting an Width for Grid Panel
Background	using a background property we set background color to the Grid Panel
DataContext	DataContext is most use full property in Grid Panel we can set Model or Datastucture which we need to bind to the grid
VerticalAlignment	using vertical alignment we set the position of the WPF Grid Panel vertically. Its have a following 4 properties 1.Bottom 2.Center 3.Stretch 4.Top Basis of this properties WPF Grid placed out
HorizontalAlignment	using horizontal alignment we set the position of the WPF Grid Panel horizontally. Its have a following 4 properties 1.Center 2.Left 3.Right 4.Stretch Basis of this properties WPF Grid Panel placed out
ScrollViewer	when we need to show so many rows and columns in single WPF Grid Panel then ScrollViewer is in use Using the scrollviewer we can set much more properties like can user able to scroll the content.horizontal scroll bar,vertical scrollbar. there visibility,there style etc. it's have following properties to support for different variations 1.CanContentScroll 2.HorizontalScrollBarVisibility 3.IsDeferredScrollingEnabled 4.PanningDeceleration 5.PanningMode 6.PanningRatio 7.VerticalScrollBarVisibility
ShowGridLines	using show grid lines we can see a outerlibes of gris like grid border. we need to set it as "True" or "False"
Style	Using a style we are setting style to the Grid Panel from resourcedictionary
Visibility	We can Display and hide the Grid Panel using this property. Its have three values to set 1.Collapsed 2.Hidden 3.Visible
Margin	We set margin to Grid Panel from Left,Top,Right,Bottom
Opacity	Opacity can be used to make any element transparent or opaque.

WPF tutorial

Introduction

.xaml

Output

.xaml

Output