Site Logo

Pixel-in-Gene

Exploring Frontend Development with Design / Graphics / Technology

A DoubleBorderDecorator to simplify rounded-border decorations

The designers in my team use a lot of nested double-Border elements to achieve a nice rounded border-effect around containers. In XAML this looks like so:

<Border Background="#FF414141"
        Padding="3"
        Width="300"
        Height="200"
        CornerRadius="8">
    <Border Padding="3"
            CornerRadius="8">
        <Border.Background>
            <LinearGradientBrush EndPoint="0.5,1"
                                 StartPoint="0.5,0">
                <GradientStop Color="#FF910000"
                              Offset="1" />
                <GradientStop Color="#FFAF5959" />
            </LinearGradientBrush>
        </Border.Background>
    </Border>
</Border>

image

You will notice that there is no use of the BorderThickness and BorderBrush properties. Instead this effect achieved by nesting one Border inside another using the Background property and setting a Padding on the outer-Border. The reason why they do this is because of a rendering glitch in WPF’s Border element. If you try to create the above look using a single Border with BorderThickness, BorderBrush and Background, you will see the corners having some glitches. The image below (zoomed to 150%) shows this clearly. Notice the white inner-curve around the corners and compare this to the image above. Clearly there is a glitch here.

image1

Here’s the single-Border XAML that was used for the above look:

<Border BorderBrush="#FF414141"
        CornerRadius="8"
        Margin="137,111,193,137"
        BorderThickness="3">
    <Border.Background>
        <LinearGradientBrush EndPoint="0.5,1"
                             StartPoint="0.5,0">
            <GradientStop Color="#FF910000"
                          Offset="1" />
            <GradientStop Color="#FFAF5959" />
        </LinearGradientBrush>
    </Border.Background>
</Border>

So, now you know why the nested double-Border technique is so effective and creates a much more pleasing look. But, we have a problem here. If your project is large and using several different kinds of containers with the rounded–border effect, you will be using a LOT of these Borders! It also hampers the readability at some point. Surely there can be a better way…in the form of a custom DoubleBorderDecorator!

DoubleBorderDecorator

This is a simple Decorator derived class that I created which bakes in the above discussed technique with simple configurable properties. To achieve the effect from our previous example, here is the XAML using the DoubleBorderDecorator:

<shared:DoubleBorderDecorator Height="200"
                              Width="300"
                              OuterBorderThickness="3"
                              OuterBorderBrush="#FF414141"
                              CornerRadius="8"
                              Background="{DynamicResource RedGradient}" />

Visually it looks exactly like our first figure, but lot simpler to use and modify. In fact, you can even define a Style and set the defaults at a global level (inside Application Resources).

Here is a Blend screenshot that shows other useful properties of this decorator:

image2

With an inner-border and an outer-border, you get a pretty flexible way of creating rounder-border effects that look great. Here are a few examples:

image3

image4

image5

Download Source

A DoubleBorderDecorator to simplify rounded-border decorations
Pavan Podila
Pavan Podila
October 25th, 2010