WPF Layout: Dealing With Percentage Size in WPF

Proper layout and positioning are a vital part of interactive, high-performance and user-friendly Windows applications. This series of articles explain the layout process in WPF. This 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: Content Alignment, I explained content alignment of elements. What if you need to adjust the size of elements based on the percentage of a container or screen? This article focuses on how to deal with percentage in the size of elements.

Manage Percentage

In HTML, the percentage (%) symbol is used to define a uniform layout that keeps the same width and height ratio when a web page is resized. We do not have this feature in Windows Forms. However, WPF supports this feature in a different manner using an asterisk (*) suffix with a double number. Unlike percentage, an asterisk does not have a maximum limit of 100. An asterisk uses the current width or height of an element and divides by the value associated with the asterisk and when a Window or Page is resized, the actual size of the element is calculated at runtime.

Here is an example. Figure 1 is a Window with a Grid panel and three Rectangle elements.

Figure 1

You can create this UI by simply placing 3 rectangles on a Grid element and moving them to where you want. The XAML code looks as in Listing 1.

<Grid>
<Rectangle Name="rectangle1" Stroke="Black" Fill="Orange" Margin="55,0,112,80" />
<Rectangle Fill="Green" Margin="0,80,0,0" Name="rectangle2" Stroke="Black"
HorizontalAlignment="Right" Width="113" />
<Rectangle Fill="Purple" Margin="0,80,0,0" Name="rectangle3" Stroke="Black"
HorizontalAlignment="Left" Width="54" />
</Grid>

Listing 1

Now when we resize the Window, we want the size of the rectangles to have the same ratio as the new size of the window. We can do this using an asterisk with the size.

However, all elements in XAML do not support the asterisk feature. We place columns and rows in a Grid element and fix their width and height with the asterisk.

The new code is listed in Listing 2.

<Window x:Class="PercentageInWPF.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="200" Width="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="139*" />
<RowDefinition Height="150*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="101*" />
<ColumnDefinition Width="208*" />
<ColumnDefinition Width="169*" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="1" Name="rectangle1" Stroke="Black" Fill="Orange" />
<Rectangle Fill="Green" Name="rectangle2" Stroke="Black" Grid.Column="2" Grid.Row="1" />
<Rectangle Fill="Purple" Name="rectangle3" Stroke="Black" Grid.Row="1" />
</Grid>
</Window>

Listing 2

Now if you resize the window, the size of rectangles will be changed in proportion to the size of the window in Figure 2.

Figure 2

Summary

In this article, I explained how to deal with the % size of WPF elements. The next article of this series explains WPF layout and an understanding of panels.

Next: WPF Layout: Panels