How to create a bevelled gradient border in WPF

Question

I'm trying to create a rounded end progress bar with a beveled border. I've got the progress bar looking like what I want but I'm having difficulty with making the border seemed beveled. Can anyone help me out with this please?

An image of what I'm trying to get it to look like is here! Bevelled border

My current XAML code for the Window is as follows:

<Window x:Class="SplashDemo2.ProgressBarWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ProgressBarWindow" Height="100" Width="500">

    <Window.Resources>
        <Style x:Key="ProgressBarStyle" TargetType="ProgressBar">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ProgressBar">
                        <Border BorderBrush="#1D4276" BorderThickness="5" 
                                CornerRadius="15" Padding="0">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,0.9" StartPoint="0.5,0">
                                    <GradientStop Color="#FFEAEAEA" Offset="0.9"/>
                                    <GradientStop Color="#FF646464"/>
                                </LinearGradientBrush>
                            </Border.Background>

                            <Grid x:Name="PART_Track" >
                                <Rectangle x:Name="PART_Indicator" 
                                           HorizontalAlignment="Left" 
                                           RadiusX="10" RadiusY="10">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush EndPoint="0.5,0.9" StartPoint="0.5,0">
                                            <GradientStop Color="#FF226494" Offset="0.9"/>
                                            <GradientStop Color="#FFEBEFFA"/>
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <ProgressBar Value="50" Width="380" Height="25" 
                 Style="{StaticResource ProgressBarStyle}" 
                 HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Window>

Can anyone help me to get the border looking like the image? Many thanks.

Answer 1

It looks to me as though the main thing you're missing is the gradient brush on the border itself.
If you omit BorderBrush="#1D4276" and instead include something like the below, you'll be a lot closer:

<Border.BorderBrush>
    <LinearGradientBrush EndPoint="0.5,0.9" StartPoint="0.5,0">
        <GradientStop Color="#FFEBEFFA" Offset="0.9"/>
        <GradientStop Color="#FF226494"/>
    </LinearGradientBrush>
</Border.BorderBrush>