如何在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>