BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Layout Controls - Canvas

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.

Commonly Used Canvas Properties

Before we add child controls to the Canvas we'll look at some of its properties. These properties are common to many controls but rather than describe them repeatedly, we'll try them out with the Canvas. I'll leave you to experiment with them for the other layout and user interface controls that we'll see later in this tutorial.

Height and Width

Height and Width are common control properties that specify the dimensions for the control. They allow you to set a non-default size. Try modifying the Canvas's XAML as follows to set the height and width.

<Canvas Background="Yellow" Width="100" Height="100">

If you start the program you'll see that the Canvas is now square and centralised within the window.

WPF Canvas with specified size

The Height and Width properties allow you to set suggested values only. The actual height and width may be quite different, depending upon the layout of the user interface. You can determine the actual height and width of a control at run-time by reading the ActualHeight and ActualWidth properties.

Four other properties allow you to specify a range of available sizes, rather than trying to set the dimensions exactly. To set a minimum and maximum height, use the MinHeight and MaxHeight properties respectively. To control the range of possible widths, use the MinWidth and MaxWidth properties.

Margin

The Margin property allows you to define a margin around a control, creating a blank area between it and any other controls. This includes adding a margin between a control and its container. You can use margins instead of sizes for more complex layouts where pixel accuracy is not required but separation of controls is desired. There are three ways to set a margin. Try each of these in the sample project.

The first way to set the margin is to provide a single numeric value, which is the thickness of the margin. A gap of this size is applied at the top, left, bottom and right of the control. In our case this creates a white zone around the yellow Canvas.

<Canvas Background="Yellow" Margin="25">

If you provide two values, separated by a space or comma, the first value determines the thickness of the left and right margins and the second specifies the width of the top and bottom margins.

<Canvas Background="Yellow" Margin="50 25">

Finally, you can set all four margins individually. The first value specifies the left margin and the remaining three margins are applied in clockwise order. The overall order of margins is left, top, right and bottom. You can remember the order using the word LeTteRBox.

<Canvas Background="Yellow" Margin="50 25 35 20">

Visual Studio shows you a visual representation of the margins in the WPF designer. The above XAML is previewed as follows:

WPF Canvas with margins

Alignment Properties

You can set the horizontal and vertical alignment of a control within its container using the HorizontalAlignment and VerticalAlignment properties. The HorizontalAlignment property has four possible values:

  • Stretch. This is the default value. Controls aligned in this manner are stretched horizontally to fill the available space. However, if a Width property exists, this overrides the alignment.
  • Left. The control is aligned to the left of the available space.
  • Right. The control is aligned to the right of the available space.
  • Center. The control is aligned in the centre of the available space.

The VerticalAlignment property is similar and also has four possible values:

  • Stretch. This is the default value. Controls are stretched vertically to fill the available space. If a Height property exists, this overrides the alignment.
  • Top. The control is aligned to the top of the available space.
  • Bottom. The control is aligned to the bottom of the available space.
  • Center. The control is centred within the available space.

To demonstrate, change the XAML for the Canvas to match that shown below. This sets a height and width for the Canvas and aligns it to the bottom-left corner of the window.

<Canvas Background="Yellow"
        Width="150"
        Height="100"
        HorizontalAlignment="Left"
        VerticalAlignment="Bottom">

The results are as follows:

WPF Canvas with alignment

18 February 2013