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.

Download Source Code

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

If you want to use all the assets in the Composite Application Guidance for WPF, the following must be installed:

• Microsoft Visual Studio 2008
• .NET Framework 3.5.
• If you want to run the acceptance tests, you need to have the White assemblies. For more information about White, including download information, see White (optional).

Installation Steps

Use the following steps to install the Composite Application Guidance for WPF:

• Download and run the Composite Application Guidance for WPF installer
• Read and accept the Composite Application Guidance for WPF EULA. To do this select Yes from the Installer splash screen.

Select the destination folder where you want to extract the guidance and then select OK to extract the files.

After the extraction process completes, you will find the guidance in the folder you selected.

Incoming search terms for the article:

composite application WPF tour, wpf composite application, wpf splash screen composite application framework

This only pretends to be an introduction. I’m learning WPF as you, so feedback is welcome. First of all, if you want to start with WPF, you must install Microsoft Visual Studio 2008.

Then, you have to create a new WPF Application.

Now we have a file Window1.xaml. Replace the code with this:

Also, add this code to the code behind (Window1.xaml.cs)

And we are ready to launch our application.

I hope this is useful. Download source code.

Incoming search terms for the article:

wpf hello world application, wpf hello world, wpf application hello world, wpf hello world source code, wpf hello world#