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 Base Classes - FrameworkElement - Layout

The twenty-fourth part of the Windows Presentation Foundation Fundamentals tutorial continues the investigation of the base classes of the WPF layout controls. This article begins a multi-part description of the FrameworkElement class.

Detecting Size Changes

When a control can be resized, either freely or within the limits set by maximum and minimum sizes, you might need to react to the size changing. One way to detect this is with the SizeChanged event. This is raised whenever the size is adjusted. It may be raised multiple times for a single resizing operation.

To show the event is action, modify the Border's opening tag to register the event:

<Border Name="DemoBorder"
        BorderBrush="Black"
        BorderThickness="5"
        CornerRadius="5"
        MinHeight="150"
        MaxHeight="250"
        MinWidth="150"
        MaxWidth="250"
        Loaded="Border_Loaded"
        SizeChanged="Border_SizeChanged">

You can now add the event code behind the window. In this case we'll call the existing ShowBorderSize method to display the dimensions in the label. This method works by reading the new size from the control directly. You can also find the new size and original size by reading the NewSize and PreviousSize properties of the provided event arguments object.

private void Border_SizeChanged(object sender, SizeChangedEventArgs e)
{
    ShowBorderSize();
}

Run the program again and resize the window to see the dimensions update within the label.

Sizing Units

All of the sizes that we've used in the examples so far have been added with no unit specified. This means that the default unit, known as the device independent unit (DIU), is used automatically. In theory, a DIU is 1/96th of one inch. However, as it's not possible to know the size of the monitor being used, this is rarely accurate and the actual size of a control can vary from screen to screen. DIU's are often confused with pixels. In many cases, one DIU does indeed represent a single pixel. However, if the user has changed the dots per inch (DPI) settings within Windows, the relationship between pixels and DIU's will be broken.

In addition to the DIU, there are three other sizing units that you can use in WPF applications. These are applied as alphabetical characters following each measurement. You can also explicitly state that you wish to use DIU's. The four possible unit symbols are:

  • px. Using "px" after a size might suggest that the measurement uses screens pixels. Actually, this is the default option of device independent pixels.
  • in. Using "in" allows you to specify a size in inches. However, for the reasons already mentioned above, setting a height or width of one inch will usually not lead to a real measurement of one inch. The configuration of Windows and the size of the screen will determine the actual size. In any case, a measurement of 1in equates to 96px.
  • cm. Using "cm" lets you size your controls using centimetres, with the same limitations as for inches. A size of 1cm is the same as approximately 0.39in or 37.8px.
  • pt. Using "pt" specifies a size in points, a typographic measurement where there are seventy-two points to the inch. A size of 1pt is roughly 0.014in or 1.3px.

The following updated Border tag sets the maximum and minimum dimensions using each of the measurement units. You should never use such a mixture in a real application, as it is confusing.

<Border Name="DemoBorder"
        BorderBrush="Black"
        BorderThickness="5"
        CornerRadius="5"
        MinHeight="1.5in"
        MaxHeight="6cm"
        MinWidth="150px"
        MaxWidth="200pt"
        Loaded="Border_Loaded"
        SizeChanged="Border_SizeChanged">

Alignment and Margins

In addition to the sizing properties and SizeChanged event, FrameworkElement provides several properties that affect layout. We've already seen these in the article describing the Canvas control so I won't repeat the information here.

To control the alignment of controls within their parent you can use the HorizontalAlignment and VerticalAlignment properties. Horizontally, you can align a control to the left or right of its parent, you can centralise it or you can stretch the control to fill its parent. Similarly, the vertical alignment options allow alignment to the top, bottom or centre of a parent, or you can stretch a control to the height of its container.

The other layout property that we've seen before is Margin. Applying a margin reserves a small amount of space around a control. You can set a single margin size for an entire control, use two values to set equal top and bottom margins and have the left and right margins at a different width. You can also specify four values to allow different margins on each side of a control. The details are in the Canvas article.

12 August 2013