WPF Layout: Size, Width, and Height

Proper layout and positioning are a vital part of interactive, high-performance and user-friendly Windows applications. In a series of articles, I will discuss the layout process in WPF. The series began with an understanding of the WPF layout process. The next part of this series will cover the basics of layout and positioning such as size, margin, padding and alignment of elements. Later in this series, I will cover various panels and related parent controls available in WPF.

Table of Contents

Introduction

In the previous article, WPF Layout System: An Introduction, I discussed the basics of the WPF layout system. Elements size, alignment, margins and padding managements are the next parts of the series. This article focuses on the size of elements, including width and height.

Figure 1 shows a typical window with size, margin, alignment and padding settings of various WPF elements.

Figure 1

Size: Width and Height

The size of a control is defined by the width and height properties of the control. When you create a Windows application in WPF, the default code looks as in Listing 2. In Listing 2, a Window element is used to create a Window and a Grid panel is placed on this window. The Height and the Width of window is 300 and 400 pixels.

The type of Width and Height is a double device-independent unit (1/96th inch). This value can be followed by strings px, in, cm, or pt that a pixel, inch, centimeter, or point respectively.

Here is a listing of pixels and other measurements.

1 inch = 96 pixels
1 centimeter = 96/2.54 pixels
1 point = 96/72 pixels

The following code snippet applies the measurement to the Width and Height properties.

<Grid Background="LightBlue" Width="300px" Height="200px" >

Note: If Height and Width properties of an element are not set, it inherits the width and height of the container control.

<Window x:Class="SizeSample.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="400">
<Grid>
</Grid Background="LightBlue">
</Window>

Listing 2

The output of Listing 2 looks as in Figure 2.

Figure 2

Now let's set the width and height of the Grid.

<Grid Background="LightBlue" Width="300" Height="200" >

The new output with modified width and height of the Grid looks as in Figure 3.

Figure 3

The MinHeight property of an element represents the minimum height of an element. If you set the Height property less than this value, it will be calculated as MinHeight. The MaxHeight property of an element represents the maximum height of an element. If you set the Height property greater than this value, it will be calculated as MaxHeight.

The MinWidth property of an element represents the minimum width of an element. If you set the Width property less than this value, it will be calculated as MinWidth. The MaxWidth property of an element represents the maximum width of an element. If you set the Width property greater than this value, it will be calculated as MaxWidth.

The ActualHeight property of an element gets the actual rendered height of an element after calculating MinHeight, MaxHeight and Height properties. The ActualWidth property of an element gets the actual rendered width of an element after calculating MinWidth, MaxWidth and Width properties.

Note: MinWidth, MinHeight, MaxWidth and MaxHeight properties are useful when you want to restrict your application interfaces to a specific width and height.

The code listed in Listing 3 creates a Rectangle that has Width and Height properties set to 600 each but MinHeight and MaxWidth are set to 200 each. That means the ActualHeight and ActualWidth of the rectangle that renders can't be more than 200 each.

<Grid>
<Rectangle Name="SizeRectangle" Fill="LightBlue"
Width="600" Height="600"
MinWidth="200" MaxWidth="200"
MinHeight="200" MaxHeight="200" />
</Grid>

Listing 3

The rectangle generated by Listing 3 looks as in Figure 4 where the actual height and actual width of the rectangle is 200 each.

Figure 4

Summary

In this article, I discussed the size of elements in the WPF layout system. In the next article of this series, I will discuss margins of WPF elements.

Next: WPF Layout: Margins