如何在 WPF 中创建斜角渐变边框

Question

我正在尝试创建一个带有斜角边框的圆形末端进度条。我的进度条看起来像我想要的，但我很难使边框看起来是斜角的。有人可以帮我解决这个问题吗？

我试图让它看起来像这样的图像就在这里！斜角边框

我当前的 Window XAML 代码如下：

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