WPF Tutorial : Fun with Border & Brush 3

Introduction

Border is the primary building block of any application in WPF. 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.

• A Beginning
  

• Layout - Panels & Containers

• Borders - Fun with Borders and Effects (This One)
  

• TypeConverter & MarkupExtensions to XAML
  

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 Width="50" Height="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" />
  </Border.Effect>
</Border>

If you place this in your code you will see something like above. Let us look into detail what exactly I have done.

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.

Border Effect can also be applied to a Border. Here I have added a DropShadowEffect. It allows you to put a shadow rendered outside the Border. The dependancy properties that you need to take note are

1. Color : Defines the Color of the Shadow.
2. Opacity : Fades out the Color.  Yo can see the Red color is faded out here to .5; Opacity ranges between 0 - 1.
3. BlurRadius : It defines the extent of shadow radius. Thus if you increase the size of BlurRadius, it will increase the Shadow.
4. Direction : It is the Light Direction in degrees. 235 degree implies where the shadow will focus, thus you can see 360 -235 is the angle where light is placed. Value ranges from 0 to 360.
5. ShadowDepth : It defines the depth of the Shadow. It means, how much the object is raised from the Shadow. If you increase the value of ShadowDepth, you will see, the being raised.

Now with these lets create a few more :

<Border Width="50" Height="50" x:Name="brdElement">
                <Border.Background>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <LinearGradientBrush.GradientStops>
                            <GradientStop Color="Red" Offset="0"/>
                            <GradientStop Color="Pink" Offset=".5"/>
                            <GradientStop Color="Azure" Offset="1"/>
                        </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                </Border.Background>
                <Border.Effect>
                    <DropShadowEffect BlurRadius="10" Color="Red" Direction="45" Opacity=".4" RenderingBias="Performance" ShadowDepth="30" />
                </Border.Effect>
            </Border>

In the first sample I have modified the SolidColorBrush to LinearGradientBrush with 3 GradientStops. It takes StartPoint and EndPoint. StartPoint defines where the Gradient will start. So 0,0 means starts from the TopLeft corner. First 0 represents the X axis Offset color, and second defines Y - axis Offset color.

Here I have used Gradient from TopLeft to BottomRight, so the Gradient will be straight.  GradientStops defines the different colors on the Gradient. Here I have defined all the colors from 0 to 1. Thus the Gradient will start from 0,0 means Red to 1,1  as Azure.
If I start as 0,1 to 1,0 it would have been a Diagonal Gradient.

<Border Width="50" Height="50" x:Name="brdElement" BorderBrush="Goldenrod" BorderThickness="2">
                <Border.Background>
                    <LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
                        <LinearGradientBrush.GradientStops>
                            <GradientStop Color="BurlyWood" Offset="0"/>
                            <GradientStop Color="MediumBlue" Offset=".5"/>
                            <GradientStop Color="SlateGray" Offset="1"/>
                        </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                </Border.Background>
                <Border.Effect>
                    <DropShadowEffect BlurRadius="10" Color="CadetBlue" Direction="0" Opacity=".4" RenderingBias="Performance" ShadowDepth="15" />
                </Border.Effect>
            </Border>

In this version, I have modified the Colors of the Gradient. You can see the DropShadow Color, ShadowDepth and Direction is changed as well to demonstrate you how it modifies.

The BorderBrush and BorderThickness defines the border element of the Border. It means it draws the outer boundary of the Border with

More of  Brushes

As I have already discussed the most common Brush viz LinearGradientBrush, SolidColorBrush; Let us look into other brushes that are available to us. 

1. RadialGradientBrush : It produces a circular gradient. Thus if I place a RadialGradientBrush instead a LinearGradientBrush, it will show you the Circular gradient.



In the above RadialGradientBrush is used to produce these borders. Lets look at the code :

<Border Width="50" Height="50" BorderBrush="Black" BorderThickness="2">
                <Border.Background>
                    <RadialGradientBrush GradientOrigin=".25,.75" RadiusX=".6" RadiusY=".6">
                        <RadialGradientBrush.GradientStops>
                            <GradientStop Color="Red" Offset="0"></GradientStop>
                            <GradientStop Color="Yellow" Offset="1"></GradientStop>
                        </RadialGradientBrush.GradientStops>
                    </RadialGradientBrush>
                </Border.Background>
            </Border>

The GradientOrigin determines where the Origin is when we take the whole area to be 1. So If you place a value more than 1, Origin will lie outside the border. I have placed .25,.75 in this case.

The RadiusX and RadiusY determines the Radius of the Gradient.  Finally the GradientStops determines the actual gradient colors. Just interchanging the Offsets will produce the 2nd image.

2. ImageBrush : It allows you to draw using Image. You need to specify the ImageSource to determine the what Image to be drawn.



Here an ImageBrush is specified with my image. I have also added a BitmapEffect to the Border with some noise to distort the image a little.

 <Border Width="100" Height="100" >
                <Border.Background>
                    <ImageBrush ImageSource="logo.jpg" Opacity=".7">
                        <!--<ImageBrush.Transform>
                            <SkewTransform AngleX="10" AngleY="10" />
                        </ImageBrush.Transform>-->
                    </ImageBrush>
                </Border.Background>
                <Border.BitmapEffect>
                    <OuterGlowBitmapEffect GlowColor="Brown" GlowSize="20" Noise="3"/>
                </Border.BitmapEffect>
            </Border>

The Opacity specifies the opacity of the image drawn inside the Border.

In addition to this I have added one BitmapEffect with OuterGlowEffect. OuterGlow allows you to glow the outer section of the Border. I used Brown glow with GlowSize = 20 and Noise=3. Noise is used to distort the image, just seen in the image. 

3. VisualBrush : This allows you to draw using an already visual element.  It is very simple to use. Just see 

In the first Image, I have used VisualBrush to draw the Image on the right side which draws itself as the left side. I have modified the OuterGlowBitmapEffect to BevelBitmapEffect in the next version, to have a bevel effect to the image. The VisualBrush is also flipped XY so it seems upside down. See how the code looks like :

<Border Width="100" Height="100" x:Name="brdElement" CornerRadius="5" >
                <Border.Background>
                    <ImageBrush ImageSource="logo.jpg" Opacity=".7">
                    </ImageBrush>
                </Border.Background>
                <Border.BitmapEffect>
                    <BevelBitmapEffect BevelWidth="5" EdgeProfile="BulgedUp" LightAngle="90" Smoothness=".5" Relief=".7"/>
                </Border.BitmapEffect>
            </Border>
            <Border Width="100" Height="100" Margin="20,0,0,0">
                <Border.Background>
                    <VisualBrush TileMode="FlipXY" Viewport="1,1,1,1" Stretch="UniformToFill" Visual="{Binding ElementName=brdElement}"></VisualBrush>
                </Border.Background>
            </Border>

The VisualBrush is bound to brdElement, which represents the Visual element placed in the window.  TileMode indicates the Flip direction of the actual visual. Thus if there is  a button or any other visual placed other than the border, it would look flipped as well.  So VisualBrush comes very handy at times.

Other than that there are lots of Brushes as well like DrawingBrush, used to draw Geometry objects etc.

Border Effects

As I have already used some Border Effects previously, lets see what are the main effects that you might use in real life.

Border element or any element inherited from Border supports two types of Effects.

1. Effect : Effects are applied to the whole Border. Thus any control inside the Border will also be affected with the effect.


Thus you can see using BlurEffect in the Border actually affects the Text written in the TextBlock inside the Border. You will get clear idea by looking at the code below :

 <Border Background="AliceBlue" Width="100" Height="100" CornerRadius="5" BorderBrush="Black" BorderThickness="2">
                <Border.Effect>
                    <BlurEffect Radius="3" RenderingBias="Quality" />
                </Border.Effect>
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="This is inside Blured Border" TextWrapping="Wrap" TextTrimming="WordEllipsis"/>
            </Border>

2. DropShadowEffect : It is used to place a shadow outside the Border. I have already discussed with it in previous section of the article , so no need to elaborate this anymore.

Border BitmapEffects

Border also defines BitmapEffect. I have already discussed about OuterGlowBitmapEffect and BevelBitmapEffect, so lets discuss about the rest.

1. EmbossBitmapEffect : This effect will emboss the whole border. The LightAngle specifies the angular direction of light placed on the border. So if you write something inside the Border, it would have a shadow effect automatically just like the below :



If you see the code it looks like :

<Border Background="AliceBlue" Width="100" Height="100" CornerRadius="5" BorderBrush="Black" BorderThickness="2">
                <Border.BitmapEffect>
                    <EmbossBitmapEffect LightAngle="270" Relief=".4" />
                </Border.BitmapEffect>
                <TextBlock HorizontalAlignment="Center" Foreground="Gold" FontSize="20" VerticalAlignment="Center" Text="This is Embossed" TextWrapping="Wrap" TextTrimming="WordEllipsis"/>
            </Border>

The Text inside the textblock  is Embossed with the whole border itself.

2. DropShadowBitmapEffect : You can also specify dropshadow using BitmapEffect. It allows to add Noise to it as well.



The code will look like :

<DropShadowBitmapEffect Color="Red" Direction="200" Noise=".6" ShadowDepth="10" Opacity=".6"/>

This is same as normal DropShadowEffect but a bit of enhancements.

For BitmapEffects you can also add all the effects at a time using BitmapEffectGroup.

Points to Remember

While working, I have found both Effect and BitmapEffect of Border, even though looks great for an application may often detoriate performance of the application. So it is always better to avoid Effects. If you still like to use them, always use the effects to small elements. Do not put say BitmapEffect to a border that spans the whole window. This will seriously slow down the WPF application.

Conclusion

Borders and brushes are the most commonly used objects in XAML. So I hope you like the article and has helped you a lot.

Thanks for reading.