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, Border has two properties that make 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 like
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 like 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 is C# code that 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. Border can have
only one child element. If you need to place border around multiple elements,
you must place a border around each element.