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.

Adding Padding

Several controls, including Border, allow you to add padding. This is similar to setting a margin, except that the area of reserved space is inside the control, rather than outside. Adding padding to a border is similar to adding a margin to its contents.

The Padding property is another that holds a Thickness value. Again you can set the values for the left, top, right and bottom values together, in pairs or individually. The example below adds padding to the left and right sides of the border but not the top or bottom. This causes the label to be pushed in slightly at the left and right, though it's difficult to see the right padding until the window is narrowed.

<Border Margin="20"
        BorderBrush="DarkGreen"
        BorderThickness="5"
        Background="GreenYellow"
        Padding="30 0">

The resultant output is as follows:

WPF Border with padding

Adding Rounded Corners

If you don't like the sharp corners of a Border, you can decide to use rounded ones instead. Using the CornerRadius property you can set the radius of an imaginary circle placed in each corner. A quarter circle of this radius will be drawn instead of the right angle.

The following XAML adds a corner radius:

<Border Margin="20"
        BorderBrush="DarkGreen"
        BorderThickness="5"
        Background="GreenYellow"
        Padding="30"
        CornerRadius="10">

This results in the following output. Note that the background colour doesn't fill the rectangle that the border is within, only the area within the lines.

WPF Border with rounded corners

If you use a corner radius that is too large to be rendered as a quarter circle, it will be squashed when drawn so that the two adjacent corners join together in a larger curve. We can see this by making the corner radius larger than half of the height of the Border.

<Border Margin="20"
        BorderBrush="DarkGreen"
        BorderThickness="5"
        Background="GreenYellow"
        Padding="30"
        CornerRadius="80">

The output from the above XAML is shown below. You can see that the corners are no longer perfect quarter circles.

WPF Border with rounded corners with large radius

For even more control over rounded corners you can set each of the corner radii individually. To do so you need to provide four decimal values. The first is applied to the top left corner of the border. The following values are applied in a clockwise order.

Try changing the opening Border tag's XAML as follows to see the effect.

<Border Margin="20"
        BorderBrush="DarkGreen"
        BorderThickness="5"
        Background="GreenYellow"
        Padding="30"
        CornerRadius="10 30 0 30">

The results are shown below. Note that setting the bottom right corner's radius to zero causes it to revert to a sharp right angle.

WPF Border with rounded corners of differing radii

24 May 2013