DotNetSurfers

Latish Sehgal's Blog

Creating a Bevel Effect in WPF 4

I am doing WPF work for a client where we are changing an application with a fixed size of 1024x768 to be scalable and resizable (while maintaining the aspect ratios of certain elements). The original developers used the Canvas elements for almost everything in the layout, so this is not a simple effort. While recreating the user interface, I ran into a problem while creating a bevelled border with rounded corners that was dynamic in size. The BevelBitmapEffect class has been deprecated in .Net 4.0 so due to lack of better options, I ended up creating my own user control to recreate the same look and feel.

The xaml for consuming the user control looks like

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

   <Grid Width="200" Height="200">
        <Grid.Resources>
            <LinearGradientBrush x:Key="Brush1" EndPoint="0.5,0"
StartPoint="0.5,1">
                <GradientStop Color="#FF939598" Offset="0"/>
                <GradientStop Color="#FF1E1E24" Offset="1"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="Brush2" EndPoint="0.5,0"
StartPoint="0.5,1">
                <GradientStop Color="#FF5C5F60" Offset="1"/>
                <GradientStop Color="#FFC7C7C7" Offset="0"/>
            </LinearGradientBrush>
        </Grid.Resources>
        <BevelEffect:BevelBorderUserControl Margin="5" CornerRadius="10" 
                    BevelBorderThickness="15"
FirstHalfBrush="{StaticResource Brush1}" 
                    SecondHalfBrush="{StaticResource Brush2}" >
            <Button  />
        </BevelEffect:BevelBorderUserControl>
    </Grid>

And the output looks like

The code for the control can be found on github.

Comments