Fun with Borders - Brushes & Effects

In WPF borders play a vital role. Any design will not be possible without any border in it. WPF border is an Element which allows you to draw a border around an element. In my current application, I have been using lots of borders to adorn the User Interface. Starting from placing borders directly to the Window to putting borders in ControlTemplate of ListBoxItem, borders generally play a very important role in creating better look and feel for the application. In this application you will see how you can use Borders and most of the properties with ease.

Introduction to Borders

Everyone knows what exactly the Border is. It is a rectangular area used to decorate the UI elements. The main difference between a Rectangle and a Border is that Border allows you to add one single child element inside it. Border.Child allows you to include a child DependancyObject inside a Border. Let us see a sample Border:

<border height="50" width="50" x:name="brdElement">  <border.background>     <solidcolorbrush color="Bisque"></solidcolorbrush>  </border.background>  <border.effect >    <dropshadoweffect blurradius="10" color="Red" direction="235" opacity=".5" renderingbias="Quality" shadowdepth="10">  </dropshadoweffect></border.effect></border>

First of all, Width / Height determines the dimension of the Border element. Border.Background determines what will be the color of the Brush which will draw the inside of the Border. You can see the color is Bisque. You can define any type of Brush here. SolidColorBrush takes one Color element(which is here defined as Bisque) and fills the Border Background with that color. There are other properties too like CornerRadius, used to create RoundedCorner Border etc. I will discuss them later in the article.

READ THE FULL ARTICLE