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

Question

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

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

Мой текущий код 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>