WPF Layout: Border

Proper layout and positioning are a vital part of interactive, high-performance and user-friendly Windows applications. This series of articles explains the layout process in WPF. The series starts 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

• WPF Layout System: An Introduction
• WPF Layout: Size, Width and Height
• WPF Layout: Margins
• WPF Layout: Horizontal and Vertical Alignment
• WPF Layout: Content Alignments
• WPF Layout: Dealing with Percentage Size in WPF
• WPF Layout: Panels
• WPF Layout: Canvas
• WPF Layout: DockPanel
• WPF Layout: Grid
• WPF Layout: StackPanel
• WPF Layout: WrapPanel
• WPF Layout: Border
• WPF Layout: VirtualizingStackPanel

Introduction

In the previous article, WPF Layout: WrapPanel, I discussed the WrapPanel. This article focuses on the how to work with the border of WPF elements.

Border

Elements in WPF do not have a border property. To place a border around an element, WPF provides the Border element. Similar to other WPF elements, the Border has Width, Height, Background and HorizontalAlignment and VerticalAlignment properties.

Besides these common properties, a Border has two properties that make the Border a border. These two properties are BorderThickness and BorderBrush. The BorderBrush property represents the brush that is used to draw the border. The BorderThickness property represents the thickness of the border.

The CornerRadius property represents the degree to which the corners of a Border are rounded.

The following code snippet creates a Border element and sets its properties.

<Border
BorderThickness="5"
BorderBrush="Green"
CornerRadius="10"
Background="LightGray"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="270"
Height="250" />

The code snippet in Listing 1 creates a Border around a Canvas element and sets its properties.

The output looks as in Figure 1 where all child controls are wrapped horizontally.

< Border
BorderThickness = "5"
BorderBrush = "Green"
CornerRadius = "10"
Background = "LightGray"
HorizontalAlignment = "Left"
VerticalAlignment = "Top"
Width = "270"
Height = "250" >

< Canvas Background = "LightCyan" > < Rectangle Canvas.Left = "30"
Canvas.Top = "20"
Height = "200"
Width = "200"
Stroke = "Black"
StrokeThickness = "10"
Fill = "Red" / >

< /Canvas>

</Border >

Listing 1

The output looks as in Figure 1 where you can see the Green border with rounded corners.

Figure 1

The Border class in WPF represents a Border element. The code snippet listed in Listing 2 creates a Border, sets its properties and places it around a Canvas element.

private void CreateDynamicBorder()
{
    Border border = new Border();
    border.Background = new SolidColorBrush(Colors.LightGray);
    border.BorderThickness = new Thickness(5);
    border.BorderBrush = new SolidColorBrush(Colors.Green);
    border.CornerRadius = new CornerRadius(15);
    border.Width = 270;
    border.Height = 250;
    Canvas cnvas = new Canvas();
    Rectangle rect = new Rectangle();
    rect.Width = 200;
    rect.Height = 200;
    rect.Fill = new SolidColorBrush(Colors.Black);
    rect.StrokeThickness = 10d;
    cnvas.Children.Add(rect);
    border.Child = cnvas;
    RootLayout.Content = border;
}

Listing 2

Note: a Border can have only one child element. If you need to place a border around multiple elements, you must place a border around each element.

Summary

In this article, I discussed the borders of WPF elements. In the next article of this series, I will focus on the VirtializingStackPanel in details.