.NET 4.0+

WPF Base Classes - FrameworkElement - Layout

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

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.

FrameworkElement

The FrameworkElement class, which is found in the System.Windows namespace is another base class for WPF controls. It is a subclass of UIElement that adds further functionality. The extra features help define the WPF layout system, the logical tree, styles and data binding. It also includes object lifetime events, which allow you to detect when controls are initialised, loaded and unloaded.

We'll see some of the above functionality over the next few articles. As FrameworkElement includes a large number of members, we'll look only at a limited set initially. Some members will be saved for future articles that concentrate on a specific subject, such as the use of styles and data binding. In this article we'll concentrate on layout properties and events, specifically dealing with the sizing and positioning of controls.

We will need a sample project to work with. Create a new WPF Application project in Visual Studio, naming the solution, "FrameworkElementDemo". Once the project is ready, replace the XAML in initial window with that shown below:

<Window x:Class="FrameworkElementDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="FrameworkElement Demo"
        Width="250"
        Height="200">
    <Border BorderBrush="Black" BorderThickness="5" CornerRadius="5"/>
</Window>

This very simple window includes a single Border control. As no sizing, margin or alignment properties are set, the border fills the available space, expanding and contracting to fit the window as it is resized.

Control Dimensions

The flexible layout system for WPF controls means that setting the height and width of a control is not always as straight forward as it would be with a Windows Forms approach. There are eight properties that allow you to set and get the dimensions of a control, four for the height and four for the width. Although this seems more complex, it allows for automatic layouts as well as tightly defined positioning and sizing. You can even create rich user interfaces without ever specifying a height or width.

Height and Width

The Height and Width properties allow you to suggest a size for a control. In many cases, specifying a height or width will directly set the size of the control. In other cases, such as where size limits are included or where the parent control does not permit the specified dimensions, the rendered size may not match the Height and Width properties. Reading the Height and Width properties will return the values that they were set to, which might not be the on-screen size.

You can set the height and width using double-precision floating-point numbers. The default value for both properties is NaN, which is represented by the word "Auto" in XAML. This setting means that no dimension has been specified; the size will be set according to the available space and the properties and type of the parent control.

To demonstrate, modify the opening tag of the Border control as shown below. This sets the height and width to one hundred.

<Border BorderBrush="Black"
        BorderThickness="5"
        CornerRadius="5"
        Height="100"
        Width="100"/>

Executing the program gives the following results. Resizing the window will no longer change the size of the border. If the window is made smaller than the border, the border will be clipped.