If you are a Web developer, probably most (but not all) of what this article is going to cover will be new to you. If you are a WinForms developer you have undoubtedly come across Panel classes before, and maybe even used some of the more sophisticated Panel sub classes, such as FlowLayoutPanel and TableLayoutPanel. You should also be familiar with WinForms properties such as Anchor and Dock. Sounds familiar? Well, the truth is that some of this knowledge will still be useful, but you will still have to do some learning. For you Web guys, the good news is that the XAML syntax is fairly similar to XHTML, so you shouldn’t have any trouble picking up this new way of creating UIs either.
Within WPF (at least the current version), Microsoft has provided a few Layout controls for developers/designers to use, most of which will be new ground to most of you, I imagine. These new layout controls will be the main focus of this article.
Canvas
The Canvas control is one of the easier layout controls to use. It is a simple X/Y position container. Where each of the contained (children) controls must specify the following four properties in order to be positioned within the parent Canvas control:
- Canvas.Left
- Canvas.Right
- Canvas.Top
- Canvas.Bottom
With these four properties in place, the control will be positioned using these values within the parent Canvas control.
What else do we need to know about a Canvas control and its children? Well actually that’s almost it, the only other thing to consider is that if the Canvas control is a simple X/Y position container, what’s to stop two child controls, overlapping, and which child control should be on top. Well that’s all taken care of by another dependency/attached property of the Canvas control. This is called the Canvas.ZIndex property, and this indicates which control should be on top. Basically the higher the Canvas.ZIndex value is, the more on top the control that declares this dependency/attached property will be. If no Canvas.ZIndex is declared for any of the children controls, the Canvas.ZIndex will be set to the order in which the children are added to the Canvas control.
Let’s see an example of this, shall we? The following picture shows a Canvas control with two children, one on top of the other.
StackPanel
The StackPanel control is also very easy to use. It simply stacks its contents, vertically or horizontally, using a single property, called Orientation.
Let’s see an example of this, shall we? The following picture shows a StackPanel control with two children, one on top of the other.
WrapPanel
The WrapPanel control, again, is very easy to use (are you seeing a pattern here? Layout is fairly OK in WPF), it simply wraps its contents.
Let’s see an example of this, shall we? The following picture shows a WrapPanel control with 10 children.
DockPanel
The DockPanel control is one of the most useful (IMHO) layout controls. It is the one that we would probably use as the base layout control that any new Window uses. Basically with a DockPanel control (or 2), we can achieve the sort of layout that has been the main layout for most applications we have ever seen. We can basically get a menu docked to the top, then a left/right main content area, and a status strip at the bottom. This is all thanks to a couple of properties on the DockPanel control. Basically we can control the docking of any of our child controls that is within a parent DockPanel control by the use of the following dependency/attached property.
- DockPanel.Dock
This property may be set to Left/Right/Top or Bottom. There is one further property exposed as a normal CLR property on the DockPanel control which is called LastChildFill which when set to true will make the last child control that was added to the DockPanel control, fill the remaining available space. This will override any DockPanel.Dock property that the child control may have already set.
Let’s see an example of this, shall we? The following picture shows a DockPanel control with two children, one docked to the top, and the other docked to fill the remaining available area.
Grid
The Grid control is by far, the most sophisticated WPF layout control there is (at present). It is sort of like an HTML table control, where you can specify rows and columns, and have cells that span multiple rows, or cells that span multiple columns. There is also a strange syntax which may be used for the Width/Height of Columns and Rows, which is known as the Star “*” notation, which is exposed through the use of the GridLength class. Think of this as being like a percentage of what’s left divider. For example I could have some markup such as:
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”40″/>
<ColumnDefinition Width=”*”/>
<ColumnDefinition Width=”2*”/>
</Grid.ColumnDefinitions>
Where I have declared three Grid ColumnDefinition controls, where the first ColumnDefinition gets a fixed width of 40 pixels, and the remaining space is divided between the last two ColumnDefinition controls, where the last one gets twice as much as the second last one. This is the same principle for RowDefinition.
In order for child controls of a Grid control to tell the WPF layout system which cell they belong to, we simply use the following dependency/attached properties, which use a 0 based index.
- Grid.Column
- Grid.Row
And to specify how many rows or columns a cell should occupy, we simply use the following dependency/attached properties, which starts at 1.
- Grid.ColumnSpan
- Grid.RowSpan
By clever usage of a Grid control, you should almost be able to mimic any of the other layout controls. I’ll leave that as an exercise for the reader.
Let’s see an example of the Grid control, shall we? The following picture shows a Grid control with 3 Columns and 1 Row, where there are two children. The first child occupies Column 1, and the second child occupies Columns 2-3 as its Grid.ColumnSpan is set to 2.
Incoming search terms for the article:
tablelayoutpanel, wpf layout examples, wpf layout controls, wpf layout on top, DELPHI DockPanel, stop overlap control in wpf, wpf show grid top of others, wpf size percentage, wpf control z index, wpf tutorial, wpf wrappanel zindex, layout controls in wpf, how to stop overlapping of control in wpf, wpf controls, wpf layouts and patterns, wpf layouts, WPF Layout samples, WPF layoutgid children zorder, wpf layoutcontrol sample, wpf layout zindex, wpf layout grid percentage, WPF layout which control to use, wpf layout, wpf layout control for even layout of child controls, wpf control z-index, WPF dock panel example, wpf docking example, WPF DockPanel content percentage, wpf dockpanel percentage, wpf dockpanel size percent, wpf find child control, wpf get x y position from wrappanel, wpf getcanvas, wpf grid layout children focus, wpf highest control zindex, wpf how to get canvas top left of child elements, wpf how to position controls canvas without overlap, wpf image stop overlapping, wpf layouts best, wpf layouts examples, wpf wrappanel children many, wpf wrappanel determine how many lines, wpf wrappanel proportion, wpf wrappanel sortable, wpf x y position, wpf xy container, wpf xy layout, wpf z index between two control, wpf z-index grid, wpf zindex dockpanel, wpf zindex in image grid, wrappanel column, z index wrappanel, zindex focus wpf, wpf wrap panel zindex, wpf vb findcontrol in wrappanel, wpf two controls overlapping top, wpf layouts patterns, wpf multi panel divider, wpf ontop control, wpf panel on top z-index, wpf position controls on canvas, wpf position percentage, wpf prevent canvas items from overlapping, wpf put controls on top of each other, wpf set z index proterty of image, wpf share layout, wpf showing a panel on top, wpf stop layout, wpf stop overlapping, wpf two controls one place, Zindexwpf, 1 row 2 columns wpf, dockpanel set with in [percentage wpf, dockpanel size percentage WPF, dockpanel wpf children even width, dockpanel zindex, fix position of table panel layout without using Dock winforms, focus to grid children wpf, get all children in canvas using linQ wpf, getting canvas x and y positions in wpf, getting the controls index in layout in wpf, how find controls present in canvas in wpf, how many control use in wpf new version, how setup Dockpanel in WPF, how to manage multiple dockpanel in wpf, how to place childs oneover the other in dockpanel in wpf, dockpanel percentage width wpf, dockpanel percentage width, dockpanel control wpf, add controls to canvas wpf, add the control to new line if it overlaps grid wpf, article reader wpf, best wpf layout controls, calculate how many rows in wrappanel for wpf controls, calculate how many wpfcontrols in wrappanel, can we fix the cancas in wpf, canvas wpf, control dock on top wpf, control wpf x y
