BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Layout Controls - Border

The fourteenth part of the Windows Presentation Foundation Fundamentals tutorial continues the examination of the WPF layout controls. This article describes the Border control, which draws a rectangular border around its child.

The Border

The Border is a deceptively simple WPF layout control. Unlike in Windows Forms development, WPF controls do not generally provide any means to apply a border around their allocated area. Instead, a Border control is used to draw a border that surrounds its child control. The rendering of the border is quite flexible with options to control the positioning and thickness of the lines and whether the corners are right angled or curved,

Border Example

For our first example we'll create a simple border around a Label control. Start Visual Studio and create a new WPF application project. Replace the XAML of the automatically added window with that shown is the example code area below.

Here you can see that the border has been given four property values. The Margin property works like the margins for controls that we've seen earlier in the tutorial. It's here just to move the border away from the edges of the window to make it easier to see where the border starts. We've also seen the use of Background before. With a Border control, the background fills the area within the border lines.

The two new properties are BorderBrush and BorderThickness. BorderBrush determines the colours to be applied to the bordering lines. Here I've specified dark green for the border in the XAML. This will be converted at runtime into a SolidBrush object, which draws elements in a solid, single colour. There are many other styles of brush to allow controls to be rendered with patterns or gradients made from many colours. We'll see these later in the WPF Fundamentals tutorial.

BorderThickness accepts a value defined in a Thickness structure. This is the same type that is used to describe the thickness of margins. As with margins, when declaring the size directly in XAML you can use decimal values.

<Window x:Class="BorderDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Border Demo"
        Width="250"
        Height="200">
<StackPanel>
    <Border Margin="20"
            BorderBrush="DarkGreen"
            BorderThickness="5"
            Background="GreenYellow">
        <Label>Hello, world!</Label>
    </Border>
</StackPanel>
</Window>

Run the program to see the results. You should see that the label is placed within a thick, dark green border with a lighter green background, as shown below:

WPF Border Control

As the border's thickness uses a Thickness value, you can set the four border lines to varying thicknesses in the same manner as setting the widths of margins. If you provide a single value, this is applied to the entire border. If you provide two values, the first is used for the left and right borders and the second for the top and bottom. Finally, you can supply four values, which are applied to the left, top, right and bottom borders in turn. To easily remember this order, think of the word, LeTteRBox.

The next example sets the four border thicknesses individually, including a value of zero for the left border. To try it, replace the opening Border tag with the following XAML.

<Border Margin="20"
        BorderBrush="DarkGreen"
        BorderThickness="0 3 15 7"
        Background="GreenYellow"
        Padding="30 0">

The results are as shown below. Note that the zero for the left border causes the line to be removed completely.

WPF Border with varying border thickness

NB: If you wish to set the thickness of a border from C# code you can use one of several constructors to create the Thickness. One example is shown below:

myBorder.BorderThickness = new Thickness(0, 3, 15, 7);
24 May 2013