How to Design Better UI: Border Control in WPF

Whenever we use a control in our WPF window, it feels a simple look in our design view. Border control is used to draw a border around other control. Borders generally play an important role to generate a better UI for the application. It have some properties as other controls have like:

• BorderBrush: used to specify color for the border.
• BorderThickness: thickness of the border. By default it is zero.
• CornerRadius: denote the degree to which the corner of border are rounded.

And many more common properties as WPF controls have like width, height, alignment properties, background, margin, padding and etc. Consider the following code

<Button Width="200" Height="30" Content="Button Without Border" Grid.Row="0"></Button>
<Border Width="200" Height="30" BorderThickness="2" BorderBrush="Aqua" Grid.Row="1" >
<Button Content="Button With Border"></Button>
</Border>

The first button doesn’t have any border so it will be simple in our window. Look out the second button surrounded by a border control. This border control have some properties assigned in above code. As we can see that in the second button, we did not provide width and height because it has been provided in the border control.

Run the above code and check the two buttons written in the above code:

Designing a same button with the same border can be easily performed with the following code.

Border border = new Border();
border.Height = 30;
border.Width = 200;
border.BorderBrush = Brushes.Aqua;
border.BorderThickness = new Thickness(2);
border.Child = new Button() { Content = "Button With Border" };
this.Content = border;

This code is also as same as written in the above xaml code. Run this code and a single but same button will be placed in WPF window.