In WPF there is such type of elements which does not provide any border. To place a border around the element WPF provides a control named Border control which is used to create a border around the control. Similar to other WPF control border has certain common properties as well as different properties also. In this demonstration I will show you how to use a border control for Canvas as well as I will explain some properties related with border control.
Some properties related with Border control
- Width—Width property used to set width of the border control.
- Height—Height property used to set height of the border control.
- Background—Background property used to set background of the border control.
- HorizontalAlignment—This property is used to set horizontal alignment of your border control.
- VerticalAlignment—This property is used to set vertical alignment of your border control.
- BorderThickness—This property represents the thickness of your border control.
- BorderBrush—This property represents border color of your border control.
- CornerRadius—This property represents the degree to which the corner of borders are rounded.
The following code represents a Border control and set its properties
<Border BorderBrush="Gray" BorderThickness="5" Background="Azure" Height="300" CornerRadius="50" Name="border1" Width="300" />
Output of the above code snippet
As we know that every WPF control can be represented in the format of XAML markup language. So simply we can add any child element in border control as shown by the following example.
<Border x:Name="border1" BorderBrush="Gray" BorderThickness="5" Background="Azure" Height="300" CornerRadius="50" Width="300" >
<Canvas x:Name="canvas1" Width="250" Height="270" Background="Aquamarine">
<Button x:Name="button1" Margin="60,120,200,30">
<Button.Content>Border Control Demo</Button.Content>
Output of the above code snippet is as follows
In following example I add a Canvas control inside a border control as a child then a button control inside the canvas control.
Now we learn how to create and use border control by using XAML code. The next step that we are going to learn is that how can we use border control dynamically.
Creating border control dynamically
/// This event is raised as well as window is loaded in the memory
/// and it add a border, canvas and button control to the woindow.
/// For creating window event firstly delete the Grid element from
/// XAML view then double click on the Window control.
/// <param name="sender"></param>
/// <param name="e"></param>
private void Window_Loaded(object sender, RoutedEventArgs e)
Border border1 = new Border();//Create an object of border class.
border1.Name = "BorderControl";//Provides a unique name to border class.
border1.BorderBrush = new SolidColorBrush(Colors.Gray);//change the border color of the border control.
border1.BorderThickness = new Thickness(5);//Change the thickness of the border control.
border1.Background = new SolidColorBrush(Colors.Azure);//Change the background color of the border control.
border1.CornerRadius = new CornerRadius(50);//Changes the digree of the border movement.
border1.Width = 300;//Setting the width of the border control.
border1.Height = 300;//Setting the height of the border control.
this.Content = border1;//Adding border control in the current window object.
Canvas cav = new Canvas();//Creating an object of the canvas class.
cav.Name = "canvas1";//Provides a unique name to the canvas class.
cav.Width = 250;//Setting the width of the canvas.
cav.Height = 270;//Setting the height of the canvas.
cav.Background = new SolidColorBrush(Colors.Aquamarine);//Setting the background color of the canvas.
border1.Child = cav;//Adding canvas to the border control.
Button bt = new Button();//Creating an object of the Button class.
bt.Name = "button1";//Provides a unique name to the button control.
bt.Content = "Border Control Demo";//Adding a string content to a button object.
bt.Margin = new Thickness(60, 120, 200, 30);//Setting the margin property to the button control.
cav.Children.Add(bt);//Adding button control to the canvas control.
Output of the above code