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 1Size: Width and HeightThe 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 2The output of
Listing 2 looks as in
Figure 2.
Figure 2Now 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 3The
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 3The 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
SummaryIn 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.