Как создать скошенную градиентную границу в WPF

Question

Я пытаюсь создать индикатор выполнения с закругленными концами и скошенной рамкой.У меня есть индикатор выполнения, похожий на то, что я хочу, но у меня возникли трудности с отображением границы.Может кто-нибудь помочь мне с этим, пожалуйста?

Изображение того, как я пытаюсь заставить его выглядеть, находится здесь

Мой текущий код XAML для Window выглядит следующим образом:

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

Может ли кто-нибудь помочь мне сделать границу похожей на картинку?Большое спасибо.

Answer 1

Мне кажется, что главное, что вам не хватает, - это кисть градиента на самой границе.Если вы пропустите BorderBrush="#1D4276" и включите что-то вроде приведенного ниже, вы будете намного ближе:

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