.NET 4.0+

WPF Layout Controls - Canvas

by Richard Carr, published at http://www.blackwasp.co.uk/WpfCanvas.aspx

The fourth part of the Windows Presentation Foundation Fundamentals tutorial begins an investigation of the layout controls. These are responsible for deciding how other controls are displayed. The first layout control is the Canvas.

Layout Controls

Windows Presentation Foundation (WPF) provides a number of controls that determine how other controls are displayed. These layout controls act as containers. Their children's positioning and size are partially determined by the type of layout control and partially by their own properties.

The layout possibilities are varied. The simpler layout controls provide positioning similar to when using Windows forms; you specify pixel-accurate location co-ordinates and dimensions. Other layout controls generate grids of controls or areas where controls are rearranged according to the available space. Yet more allow elements of your user interfaces to snap to the edges of windows. Multiple layout controls can also be combined within a single window so that separate areas behave differently.

In this article we'll look at one of the simpler layout controls, which is named Canvas. In upcoming articles we'll examine other layout controls that provide more complex arrangements. Along the way we'll look at some of the other important concepts that you need to understand in order make the most of WPF.

Dependency Properties and Attached Properties

The various layout controls adjust the behaviour of the controls that they contain and, therefore, the properties that are required. For example, if you use the Canvas layout control, you need to specify the co-ordinates of each child control using properties such as Left, Right, Top or Bottom. For other layouts, these properties would be meaningless.

The designers of WPF could have included Left and Top properties for all controls and simply ignored these properties when they were not relevant. However, this would lead to lots of additional properties and, possibly, to confusion amongst developers when those properties did not affect the user interface. Instead, XAML uses the concept of attached properties.

Attached properties are a special type of dependency property. A dependency property sometimes appears to be similar to a standard common language runtime (CLR) property. However, they are quite different in practice. In general, and particularly when applied to a control, a CLR property allows a single value to be read or changed. Where any complex behaviour is required to generate a value, a method is a more suitable choice.

You can set a value for a dependency property, often via a standard CLR property that acts as a wrapper. However, this value may not be the value that the property takes. Dependency properties look to various sources to determine their values and, in the case of control properties, what to display to the user. The source of values can include values inherited from parent controls. For example, when you set the font of a layout control the same font might be applied to all of its children.

Dependency properties are used during animations. Although you might set the initial and final values for a transition, the dependency property will cycle through all of the intermediate values automatically. Dependency properties may also be set through data binding; they are actually the only type of control property that can be the destination for a bound value.

Attached properties are applied to a child control but are relevant to the parent. When the property is set for the child, its parent can read the value and determine how the control should be affected. In the case of the layout controls this allows only the relevant attached properties to be available in the XAML. For example, a control defined within a Canvas automatically gains Left, Right, Top and Bottom properties.

When setting the values of attached properties in XAML, the syntax is modified slightly. Instead of only providing the property name as an attribute of the control's XML element, you must prefix the property name with the name of the property provider. The following XAML shows a text box with attached properties for the row and column of a parent Grid.

<TextBox Grid.Column="1" Grid.Row="1" />

Canvas

The Canvas layout control organises controls in a manner that is most familiar to those who develop Windows Forms software. It allows you to place your controls with pixel accuracy anywhere within the canvas's area. The Canvas is very useful when creating drawings but is not commonly used for forms containing interactive controls such as text boxes, drop-down lists and checkboxes. There's nothing wrong with using the Canvas for these items. It's just that the other layout controls can reorganise controls automatically as window sizes or screen resolutions change.

Canvas Example

Let's first create a simple window containing a Canvas. To begin, create a new WPF application project in Visual Studio. Modify the XAML code for the main window so that it reads as shown below:

<Window x:Class="CanvasDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Canvas Demo"
        Height="150"
        Width="250">
    <Canvas Background="Yellow">

    </Canvas>
</Window>

The XAML defines a window with the two standard namespaces and several properties. x:Class provides the name of the class that contains the code for the window. The Title property determines the text that will appear in the window's title bar and the Height and Width properties set the size of the new window.

Within the Window element is a Canvas. To make it visible, the Background is set to yellow. If you run the program you'll see results similar to that shown below. Note that the Canvas has automatically expanded to fill the window.