.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.

Maximum and Minimum Size Limits

For automatic layouts you might want a control to be resizable but only within limits. Four properties permit this by allowing you to specify a maximum and minimum size for your controls. The properties are MinHeight, MinWidth, MaxHeight and MaxWidth. By default, the minimum properties are set to zero and the maximum values are PositiveInfinity. The default values therefore do not generate any size limits. If you change the values you can ensure that the rendered size will remain within the boundaries specified.

It is possible to create a conflict by setting a Height or Width that is out of range or by making the minimum value for height or width larger than the corresponding maximum. If this happens, the layout engine applies priorities to the properties. The minimum height or width is honoured first. If the maximum value is still valid, it is applied next. Finally, the height or width is used if it is not in conflict with the minimum and maximum.

To demonstrate the maximum and minimum sizes, modify the Border element as shown below. This removes the Height and Width properties and instead applies maximum and minimum sizes. When you run the program you will see that the border will now expand and contract as you resize the window. However, if the available space in either direction is less than one hundred and fifty, the border stops shrinking and is clipped at the window's edges. If you expand the window beyond the maximum size, the border stops growing.

<Border BorderBrush="Black"
        BorderThickness="5"
        CornerRadius="5"
        MinHeight="150"
        MaxHeight="250"
        MinWidth="150"
        MaxWidth="250"/>

ActualHeight and ActualWidth

The final two FrameworkElement properties related to the dimensions of controls are ActualHeight and ActualWidth. These are read-only properties that return the rendered size of a control after the layout system has applied the suggested, minimum and maximum sizes, and the effects of the positioning of other controls.

To show the use of these properties we'll add a Label, which we'll use to show the size of the Border when it is first loaded. Replace the Border control with the XAML below. This adds the Loaded event, which will be raised when the control is loaded. It also adds a label within the border.

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

Switch to the code behind the window and add the following two methods. The first is the method that will be called when the border loads. The second reads the ActualHeight and ActualWidth properties of the border, combines them into a string and sets the content of the label accordingly.

private void Border_Loaded(object sender, RoutedEventArgs e)
{
    ShowBorderSize();
}

private void ShowBorderSize()
{
    double width = DemoBorder.ActualWidth;
    double height = DemoBorder.ActualHeight;
    SizeLabel.Content = string.Format("({0},{1})", width, height);
}

When you launch the application you will see the dimensions of the border. This should appear similar to the image shown below: