2012-01-26 58 views
1

我正在嘗試創建一個帶斜切邊框的圓形結束進度欄。我的進度條看起來像我想要的,但是我很難讓邊框看起來像斜角一樣。任何人都可以幫我解決這個問題嗎?如何在WPF中創建一個斜切漸變邊框

的我想要得到它看起來像一個形象在這裏Bevelled border

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

誰能幫助我獲得邊框看起來像圖像?非常感謝。

+0

我可以發誓斜角邊框看起來像吧。 – NestorArturo

+0

就顏色而言,是的,它可能恰好與梯度相反。但是,我似乎無法將漸變應用於邊框。 – millie

回答

2

它在我看來,好像你缺少的主要東西是邊界本身的漸變畫筆。如果省略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> 
+0

這是完美的,我認爲Border.Background會給我漸變的實際邊框輪廓,但它只是給了我在邊界內的漸變。但是,你所建議的是現貨。謝謝。 – millie