Friday, April 22, 2011

Layout panels in WPF

Friends, This is my First Article. Finally I convinced myself to start writing articles. Please give your comments and encourage me to write more articles. Thanks in Advance.

I am going to introduce and explain some basics of Layout panels available in WPF in this article.

Layout panels in WPF

  • StackPanel
  • WrapPanel
  • DockPanel
  • Grid
  • UniformGrid
  • Canvas

StackPanel – Places elements either horizontally or vertically in a stake. You can change orientation of elements inside StackPanel to either horizontally or vertically by setting Orientation property. By default StackPanel places elements vertically.

WrapPanel – Places elements inside WrapPanel horizontally or vertically like StackPanel but in WrapPanel all elements are wrapped by default. You can change orientation of elements either horizontally or vertically by setting Orientation property same as StackPanel. By default WrapPanel places elements horizontally.

DockPanel – Aligns elements to the edge of the container. You can place elements to TOP, BOTTOM, LEFT and RIGHT edge of the container by setting DockPanel.Dock attached property on element.  You can also fill element in remaining space by setting LastChildFiled property to True of DockPanel.

Grid – Places elements in row and column format similar to table. This is the most powerful layout control in WPF. You can create grid rows and columns by filling Grid.ColumnDefinitions and Grid.RowDefinitions. You can use Grid.Row and Grid.Column attached properties to place elements inside cells. You can also use Grid.RowSpan and Grid.ColumnSpan attached properties to span columns and rows. You can set ShowGridLines property to True to display gridlines in Grid.

UniformGrid - Places elements in row and column format uniformly. UniformGrid is limited version of Grid where all rows and column size are same. Each cell contains only single control. Elements are places in UniformGrid in the order they are declared. By default it uses LeftToRight flow direction and you can change flow direction setting FlowDirection property of UniformGrid. This grid mostly used to layout elements quickly.

Canvas – Places elements using exact coordinates. You can place an element on Canvas by setting Canvas.Left, Canvas.Top, Canvas.Right and Canvas.Bottom attached properties on element.