WPF tutorial

WPF Grid Panel

The most comman and frquiently used container control in WPF is the grid control.Grid Control is added by default in any WPF window.
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

The Grid element merges the functionality of an absolute positioning and tabular data control. A Grid enables you to easily position and style elements. Grid allows you to define flexible row and column groupings, and even provides a mechanism to share sizing information between multiple Grid elements.
Below just write down a WPF Grid Layout with two reows and two columns

.xaml


Output


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

.xaml


Output


WPF Grid Layout

Properties Explination
ColumnDefinitions Retrives the ColumnDefinitionCollection class defined in the WPF Grid control. The ColumnDefinitionCollection class provides access to an ordered collection of columns in the WPF Grid control.
RowDefinitions Retrives the RowDefinitionCollection class defined in the WPF Grid control.The RowDefinitionCollection class provides access to an ordered collection of rows in the WPF Grid control.
Column Gets or sets a value that specifies the position where a child control should be placed in the WPF Grid control.
ColumnSpan Gets or sets a value that indicates the total number of columns the child control spans within the WPF Grid control
Row Gets or sets a value that indicates, the appearance of content in rows within the Grid control.
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.