Click here to Skip to main content
15,867,488 members
Articles / Desktop Programming / WPF

WPF Tutorial : Fun with Border & Brush

Rate me:
Please Sign up or sign in to vote.
4.83/5 (48 votes)
28 Dec 2010CPOL7 min read 245.8K   3.9K   69   15
In this article, you will find most of the interesting things with Border and Brush elements.

Table of Contents

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 a 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.

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:

XML
<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> 
border1.JPG

If you place this in your code, you will see something like the 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 dependency properties that you need to take note of are:

  1. Color: Defines the Color of the Shadow.
  2. Opacity: Fades out the Color. You 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, let's create a few more:

border2.JPG
XML
<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.

XML
<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 to 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.

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.
    border3.JPG

    In the above, RadialGradientBrush is used to produce these borders. Let's look at the code:

    XML
    <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 what Image is to be drawn.
    border4.JPG

    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.

    XML
    <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:
    border5.JPG

    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:

    XML
    <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 in 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, let's 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.
    border6.JPG

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

    XML
    <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 it in the previous section of the article, so there is no need to elaborate this anymore.

Border BitmapEffects

Border also defines BitmapEffect. I have already discussed about OuterGlowBitmapEffect and BevelBitmapEffect, so let's 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:
    border7.JPG

    If you see the code, it looks like:

    XML
    <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.
    border8.JPG

    The code will look like:

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

    This is the 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 it looks great for an application, it may often deteriorate 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 that it has helped you a lot. Thanks for reading.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
President
India India
Did you like his post?

Oh, lets go a bit further to know him better.
Visit his Website : www.abhisheksur.com to know more about Abhishek.

Abhishek also authored a book on .NET 4.5 Features and recommends you to read it, you will learn a lot from it.
http://bit.ly/EXPERTCookBook

Basically he is from India, who loves to explore the .NET world. He loves to code and in his leisure you always find him talking about technical stuffs.

Working as a VP product of APPSeCONNECT, an integration platform of future, he does all sort of innovation around the product.

Have any problem? Write to him in his Forum.

You can also mail him directly to abhi2434@yahoo.com

Want a Coder like him for your project?
Drop him a mail to contact@abhisheksur.com

Visit His Blog

Dotnet Tricks and Tips



Dont forget to vote or share your comments about his Writing

Comments and Discussions

 
GeneralMy vote of 5 Pin
86424877420-Jul-11 21:29
86424877420-Jul-11 21:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.