WPF - 從PSD文件創建ProgressBar模板

我開始我的冒險與WPF和創建我的第一個應用程序後，我想風格它一點。我發現UI template和使用混合VS2013我導入PSD到我的項目。WPF - 從PSD文件創建ProgressBar模板

下面是進度如何看起來PSD：

，這裏是什麼樣子時，導入到混合：

這裏是代碼：

<Canvas x:Name="Progress1" ClipToBounds="True" HorizontalAlignment="Left" Height="52" UseLayoutRounding="False" VerticalAlignment="Top" Width="493" Margin="0,307.5,0,-53.5"> 
     <Canvas x:Name="Loading" Height="52" Canvas.Left="0" Canvas.Top="0" Width="493"> 
      <Path x:Name="Base2" Data="F1M22.086,3C22.086,3 63.118,4.562 125.833,3 199.069,1.175 294.072,5.645 370.146,4.333 430.323,3.294 474,3 474,3 479.523,3 487.826,8.208 489.687,15.098 491.864,23.156 491.191,28.867 489.081,37.118 487.415,43.637 479.856,47.999 474.333,47.999 474.333,47.999 368.324,50.176 252.792,47.999 135.568,45.792 42.104,49.541 23.518,47.999 12.306,47.07 6.028,45.811 4.028,37.787 3.199,34.461 1.441,23.222 7.178,11.906 10.179,5.987 16.563,3 22.086,3z" Height="52" Canvas.Left="0" Canvas.Top="0" Width="493" StrokeThickness="2"> 
       <Path.Stroke> 
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
         <GradientStop Color="#FFC18A13" Offset="1"/> 
         <GradientStop Color="#FFDC9A0C" Offset="0.339"/> 
        </LinearGradientBrush> 
       </Path.Stroke> 
       <Path.Fill> 
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
         <GradientStop Color="#FFE4882D" Offset="0"/> 
         <GradientStop Color="#FFF5CA09" Offset="1"/> 
        </LinearGradientBrush> 
       </Path.Fill> 
      </Path> 
      <Path x:Name="Bg" Data="F1M16.361,2.603C16.361,2.603 133.014,3.416 247.396,3.478 311.817,3.513 376.242,2.615 416.922,1.936 446.114,1.448 458.772,2.411 458.772,2.411 462.592,2.411 469.449,4.823 471.077,9.484 473.896,17.557 472.201,20.776 471.202,25.468 470.232,30.02 467.977,31.719 459.43,33.25 450.883,34.782 424.628,32.594 376,32.594 298.703,32.594 184.467,31.065 105.75,30.911 54.767,30.812 18.683,32.063 17.185,32.063 9.403,32.063 6.954,28.298 5.436,25.402 4.335,23.303 1.86,15.809 6.797,8.253 9.308,4.41 12.541,2.603 16.361,2.603z" Fill="#FFA77235" Height="36" Canvas.Left="9" Canvas.Top="8" Width="475"/> 
      <Path x:Name="Progress" Data="F1M19.986,2.29C19.986,2.29 50.058,4.582 104.021,2.936 154.279,1.403 214.797,4.02 264,4.02 310.844,4.02 341.117,2.457 347.659,2.936 354.201,3.415 356.173,5.804 357.743,10.484 359.313,15.162 360.055,20.568 357.202,26.468 355.175,30.658 353.597,31.417 347.492,33.396 345.484,34.047 309.622,34.937 262.208,34.943 217.536,34.948 162.63,33.886 116.105,33.683 61.905,33.446 19.087,34.063 17.185,34.063 9.403,34.063 6.016,31.048 4.498,28.152 3.397,26.053 1.86,15.809 6.797,8.253 9.308,4.41 16.166,2.29 19.986,2.29z" Height="36" Canvas.Left="8" Canvas.Top="7" Width="362"> 
       <Path.Fill> 
        <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> 
         <GradientStop Color="#FF5DFF4E" Offset="0.409"/> 
         <GradientStop Color="#FF159308" Offset="1"/> 
        </LinearGradientBrush> 
       </Path.Fill> 
      </Path> 
     </Canvas> 
    </Canvas>

我的問題是我怎樣才能將該畫布轉換爲ProgressBar模板。

基於教程我能夠創建模板，但有矩形不是路徑。我試過使用路徑，但我無法正確對齊它們。

如何創建使用Path作爲PART_Track和PART_Indicator的模板，以及如何向該ProgressBar添加文本？

我把它想象成3層：組件背景（橙色一個），進度背景（棕色）和進度條（綠色）。也許我應該使用兩層：進度條和背景與筆畫？

這是我的第一個模板，所以我想盡我所能做到最好。

我在SO上找不到類似的問題（snail progressbar除外，但解決方案是基於圖像而不是路徑）。

來源

2015-09-09 Misiu

我見過的約3個問題在上個月完全一樣的.. –

@GlenThomas你能不能請張貼鏈接到他們？我總是問thying新問題 – Misiu

現在我無法找到他們之前找到解決辦法......雖然你已經構建的東西，看起來像一個進度條，它是靜態的，使填充路徑變化，根據進展值會非常困難。您最好使用進度條的默認控制模板並將其調整爲您想要的樣子。 –

我會給你一個關於如何從該模板製作工作進度條的想法。

首先，我們創建自定義WPF控件和繼承進度：

public class MyProgressBar : ProgressBar { 
    static MyProgressBar() { 
     DefaultStyleKeyProperty.OverrideMetadata(typeof (MyProgressBar), new FrameworkPropertyMetadata(typeof (MyProgressBar))); 
    } 
}

然後我們走在主題/ Generic.xaml文件（該文件是爲我們通過Visual Studio中，如果不存在創建），並創建外觀我們的控制：

<local:MyProgressBarWidthConverter x:Key="width" /> 
<Style TargetType="{x:Type local:MyProgressBar}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type local:MyProgressBar}"> 
       <Border Background="{TemplateBinding Background}" 
         BorderBrush="{TemplateBinding BorderBrush}" 
         BorderThickness="{TemplateBinding BorderThickness}"> 
        <Viewbox Stretch="Fill"> 
         <Canvas x:Name="Progress1" ClipToBounds="True" HorizontalAlignment="Left" Height="52" UseLayoutRounding="False" VerticalAlignment="Top" Width="493"> 
          <Canvas x:Name="Loading" Height="52" Canvas.Left="0" Canvas.Top="0" Width="493"> 
           <Path x:Name="Base2" Data="F1M22.086,3C22.086,3 63.118,4.562 125.833,3 199.069,1.175 294.072,5.645 370.146,4.333 430.323,3.294 474,3 474,3 479.523,3 487.826,8.208 489.687,15.098 491.864,23.156 491.191,28.867 489.081,37.118 487.415,43.637 479.856,47.999 474.333,47.999 474.333,47.999 368.324,50.176 252.792,47.999 135.568,45.792 42.104,49.541 23.518,47.999 12.306,47.07 6.028,45.811 4.028,37.787 3.199,34.461 1.441,23.222 7.178,11.906 10.179,5.987 16.563,3 22.086,3z" Height="52" Canvas.Left="0" Canvas.Top="0" Width="493" StrokeThickness="2"> 
            <Path.Stroke> 
             <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
              <GradientStop Color="#FFC18A13" Offset="1"/> 
              <GradientStop Color="#FFDC9A0C" Offset="0.339"/> 
             </LinearGradientBrush> 
            </Path.Stroke> 
            <Path.Fill> 
             <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
              <GradientStop Color="#FFE4882D" Offset="0"/> 
              <GradientStop Color="#FFF5CA09" Offset="1"/> 
             </LinearGradientBrush> 
            </Path.Fill> 
           </Path> 
           <Path x:Name="Bg" Data="F1M16.361,2.603C16.361,2.603 133.014,3.416 247.396,3.478 311.817,3.513 376.242,2.615 416.922,1.936 446.114,1.448 458.772,2.411 458.772,2.411 462.592,2.411 469.449,4.823 471.077,9.484 473.896,17.557 472.201,20.776 471.202,25.468 470.232,30.02 467.977,31.719 459.43,33.25 450.883,34.782 424.628,32.594 376,32.594 298.703,32.594 184.467,31.065 105.75,30.911 54.767,30.812 18.683,32.063 17.185,32.063 9.403,32.063 6.954,28.298 5.436,25.402 4.335,23.303 1.86,15.809 6.797,8.253 9.308,4.41 12.541,2.603 16.361,2.603z" Fill="#FFA77235" Height="36" Canvas.Left="9" Canvas.Top="8" Width="475"/> 
           <Viewbox Stretch="UniformToFill" Canvas.Left="8" Canvas.Top="7" Height="36"> 
            <Viewbox.Width> 
             <MultiBinding Converter="{StaticResource width}"> 
              <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Minimum" /> 
              <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Value" /> 
              <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Maximum" /> 
             </MultiBinding> 
            </Viewbox.Width> 
            <Path x:Name="Progress" Data="F1M19.986,2.29C19.986,2.29 50.058,4.582 104.021,2.936 154.279,1.403 214.797,4.02 264,4.02 310.844,4.02 341.117,2.457 347.659,2.936 354.201,3.415 356.173,5.804 357.743,10.484 359.313,15.162 360.055,20.568 357.202,26.468 355.175,30.658 353.597,31.417 347.492,33.396 345.484,34.047 309.622,34.937 262.208,34.943 217.536,34.948 162.63,33.886 116.105,33.683 61.905,33.446 19.087,34.063 17.185,34.063 9.403,34.063 6.016,31.048 4.498,28.152 3.397,26.053 1.86,15.809 6.797,8.253 9.308,4.41 16.166,2.29 19.986,2.29z" > 
             <Path.Fill> 
              <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> 
               <GradientStop Color="#FF5DFF4E" Offset="0.409"/> 
               <GradientStop Color="#FF159308" Offset="1"/> 
              </LinearGradientBrush> 
             </Path.Fill> 
            </Path> 
           </Viewbox> 
          </Canvas> 
         </Canvas> 
        </Viewbox> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

基本上我們只是把整個畫布從你的PSD內Viewbox控件與彈力=填充（也去除不需要的利潤）。請注意，所有大小都是相同的，並且是硬編碼的，但是因爲我們將控件放在視圖框內，它將伸展到視圖框的大小。並且因爲這是帶有Stretch = Fill而沒有指定寬度和高度的viewbox，它會延伸到控件的大小。我們還將對應於綠色填充的路徑放到它自己的viewbox中，因爲我們需要根據ProgressBar.Value參數調整該路徑的大小。

現在我們創建綠色路徑的視框中寬度轉換器：

public class MyProgressBarWidthConverter : IMultiValueConverter { 
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) { 
     if (values.Any(c => c == null || c == DependencyProperty.UnsetValue)) 
      return 0.0d; 
     var min = (double) values[0]; 
     var current = (double) values[1]; 
     var max = (double) values[2]; 
     const double maxWidth = 475; // that is from template 
     return (current/(max - min))*maxWidth; 
    } 

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) { 
     throw new NotImplementedException(); 
    } 
}

有我們傳遞最小，價值，進度條的最大和計算綠條的寬度。最大可用寬度總是475，但記住我們把它放在viewbox中，所以我們的控件是而不是固定爲475寬度。

然後我們把控制窗口：

<wpf:MyProgressBar x:Name="bar" Width="500" Height="50" Value="5" Minimum="0" Maximum="100" />

代碼隱藏：

public partial class MainWindow : Window { 
    public MainWindow() { 
     InitializeComponent(); 
     var timer = new DispatcherTimer() 
     { 
      Interval = TimeSpan.FromSeconds(1) 
     }; 
     timer.Tick += (o, e) => 
     { 
      if (bar.Value < bar.Maximum) 
       bar.Value++; 
      else 
       timer.Stop(); 
     }; 
     timer.Start(); 
    } 
}

，看我們如何工作進度。一般而言，如果您的UI很繁重，則可能需要使用簡單的表單，因爲視框內的許多路徑效率不高。但如果你有來自PSD的固定路徑......爲什麼不。

編輯回答您的評論。當然，不需要創建新的控制，它更加靈活。如果你不希望這樣做，只是創建控件模板爲你的進度條，並分配到現有ProgressBar.ControlTemplate，像這樣：

<Window x:Class="Wpf.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:wpf="clr-namespace:Wpf" 
    mc:Ignorable="d" 
    Title="MainWindow" Height="350" Width="525"> 
<Window.Resources> 
    <wpf:MyProgressBarWidthConverter x:Key="width" /> 
    <ControlTemplate x:Key="myProgressBar" TargetType="{x:Type ProgressBar}"> 
     <Border Background="{TemplateBinding Background}" 
         BorderBrush="{TemplateBinding BorderBrush}" 
         BorderThickness="{TemplateBinding BorderThickness}"> 
      <Viewbox Stretch="Fill"> 
       <Canvas x:Name="Progress1" ClipToBounds="True" HorizontalAlignment="Left" Height="52" UseLayoutRounding="False" VerticalAlignment="Top" Width="493"> 
        <Canvas x:Name="Loading" Height="52" Canvas.Left="0" Canvas.Top="0" Width="493"> 
         <Path x:Name="Base2" Data="F1M22.086,3C22.086,3 63.118,4.562 125.833,3 199.069,1.175 294.072,5.645 370.146,4.333 430.323,3.294 474,3 474,3 479.523,3 487.826,8.208 489.687,15.098 491.864,23.156 491.191,28.867 489.081,37.118 487.415,43.637 479.856,47.999 474.333,47.999 474.333,47.999 368.324,50.176 252.792,47.999 135.568,45.792 42.104,49.541 23.518,47.999 12.306,47.07 6.028,45.811 4.028,37.787 3.199,34.461 1.441,23.222 7.178,11.906 10.179,5.987 16.563,3 22.086,3z" Height="52" Canvas.Left="0" Canvas.Top="0" Width="493" StrokeThickness="2"> 
          <Path.Stroke> 
           <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
            <GradientStop Color="#FFC18A13" Offset="1"/> 
            <GradientStop Color="#FFDC9A0C" Offset="0.339"/> 
           </LinearGradientBrush> 
          </Path.Stroke> 
          <Path.Fill> 
           <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
            <GradientStop Color="#FFE4882D" Offset="0"/> 
            <GradientStop Color="#FFF5CA09" Offset="1"/> 
           </LinearGradientBrush> 
          </Path.Fill> 
         </Path> 
         <Path x:Name="Bg" Data="F1M16.361,2.603C16.361,2.603 133.014,3.416 247.396,3.478 311.817,3.513 376.242,2.615 416.922,1.936 446.114,1.448 458.772,2.411 458.772,2.411 462.592,2.411 469.449,4.823 471.077,9.484 473.896,17.557 472.201,20.776 471.202,25.468 470.232,30.02 467.977,31.719 459.43,33.25 450.883,34.782 424.628,32.594 376,32.594 298.703,32.594 184.467,31.065 105.75,30.911 54.767,30.812 18.683,32.063 17.185,32.063 9.403,32.063 6.954,28.298 5.436,25.402 4.335,23.303 1.86,15.809 6.797,8.253 9.308,4.41 12.541,2.603 16.361,2.603z" Fill="#FFA77235" Height="36" Canvas.Left="9" Canvas.Top="8" Width="475"/> 
         <Viewbox Stretch="UniformToFill" Canvas.Left="8" Canvas.Top="7" Height="36"> 
          <Viewbox.Width> 
           <MultiBinding Converter="{StaticResource width}"> 
            <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Minimum" /> 
            <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Value" /> 
            <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Maximum" /> 
           </MultiBinding> 
          </Viewbox.Width> 
          <Path x:Name="Progress" Data="F1M19.986,2.29C19.986,2.29 50.058,4.582 104.021,2.936 154.279,1.403 214.797,4.02 264,4.02 310.844,4.02 341.117,2.457 347.659,2.936 354.201,3.415 356.173,5.804 357.743,10.484 359.313,15.162 360.055,20.568 357.202,26.468 355.175,30.658 353.597,31.417 347.492,33.396 345.484,34.047 309.622,34.937 262.208,34.943 217.536,34.948 162.63,33.886 116.105,33.683 61.905,33.446 19.087,34.063 17.185,34.063 9.403,34.063 6.016,31.048 4.498,28.152 3.397,26.053 1.86,15.809 6.797,8.253 9.308,4.41 16.166,2.29 19.986,2.29z" > 
           <Path.Fill> 
            <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> 
             <GradientStop Color="#FF5DFF4E" Offset="0.409"/> 
             <GradientStop Color="#FF159308" Offset="1"/> 
            </LinearGradientBrush> 
           </Path.Fill> 
          </Path> 
         </Viewbox> 
        </Canvas> 
       </Canvas> 
      </Viewbox> 
     </Border> 
    </ControlTemplate> 
</Window.Resources> 
<ProgressBar x:Name="bar" Width="500" Height="50" Value="5" Minimum="0" Maximum="100" Template="{StaticResource myProgressBar}"/>

來源

2015-09-13 14:55:09 Evk

感謝你。這是我一直在尋找的東西。在我發佈我的問題之前，我試圖爲ProgressBar創建模板，而不是自定義控件。爲ProgressBar創建模板（外觀）而不是創建新控件很難嗎？對於新手問題抱歉，但我對WPF很陌生（我之前和WinForms一起工作過），這些對我來說都是新鮮事物。 – Misiu

當然，用例子更新了我的答案。 – Evk

我剛剛檢查了你的風格，對不起延誤。風格對於更高的價值看起來很好，但對於更低的價格來說，它只是醜陋的。你能幫我解決這個問題嗎？ – Misiu

我準備了你的控制模板怎麼能protoype是。

首先我創建定義爲IMultiValueConverter如下：

[ValueConversion(typeof(double), typeof(double))] 
public class RatioConveter : IMultiValueConverter 
{ 
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     return (System.Convert.ToDouble(values[0]) * System.Convert.ToDouble(values[1]))/System.Convert.ToDouble(values[2]); 
    } 

    public object[] ConvertBack(object value, Type[] targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     throw new NotSupportedException(); 
    } 
}

然後我宣佈它在WPF窗口中的資源（我omissis命名空間的聲明）：

<yourNamespace:RatioConveter x:Key="ratioConverter" />

然後我準備了一個Style，它將控制模板應用於以這種方式定義的窗口中的所有ProgressBar：

<Style x:Key="{x:Type ProgressBar}" 
      TargetType="{x:Type ProgressBar}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ProgressBar}"> 
        <Grid x:Name="Container" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">        
         <Canvas x:Name="Progress1" ClipToBounds="True" HorizontalAlignment="Left" Height="52" Width="493" UseLayoutRounding="False" VerticalAlignment="Top" Margin="0" > 
          <Canvas.Resources> 
           <system:Double x:Key="ratioConstant">1</system:Double> 
          </Canvas.Resources> 
          <Canvas.RenderTransform> 
           <ScaleTransform CenterX="0" 
               CenterY="0"> 
            <ScaleTransform.ScaleX> 
             <MultiBinding Converter="{StaticResource ResourceKey=ratioConverter}"> 
              <Binding ElementName="Container" Path="ActualWidth"/> 
              <Binding Source="{StaticResource ratioConstant}"/> 
              <Binding ElementName="Progress1" Path="Width"/> 
             </MultiBinding> 
            </ScaleTransform.ScaleX> 
            <ScaleTransform.ScaleY> 
             <MultiBinding Converter="{StaticResource ResourceKey=ratioConverter}"> 
              <Binding ElementName="Container" Path="ActualHeight"/> 
              <Binding Source="{StaticResource ratioConstant}"/> 
              <Binding ElementName="Progress1" Path="Height"/> 
             </MultiBinding> 
            </ScaleTransform.ScaleY> 
           </ScaleTransform> 
          </Canvas.RenderTransform> 
          <Path x:Name="Base2" Data="F1M22.086,3C22.086,3 63.118,4.562 125.833,3 199.069,1.175 294.072,5.645 370.146,4.333 430.323,3.294 474,3 474,3 479.523,3 487.826,8.208 489.687,15.098 491.864,23.156 491.191,28.867 489.081,37.118 487.415,43.637 479.856,47.999 474.333,47.999 474.333,47.999 368.324,50.176 252.792,47.999 135.568,45.792 42.104,49.541 23.518,47.999 12.306,47.07 6.028,45.811 4.028,37.787 3.199,34.461 1.441,23.222 7.178,11.906 10.179,5.987 16.563,3 22.086,3z" Height="52" Canvas.Left="0" Canvas.Top="0" Width="493" StrokeThickness="2"> 
           <Path.Stroke> 
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
             <GradientStop Color="#FFC18A13" Offset="1"/> 
             <GradientStop Color="#FFDC9A0C" Offset="0.339"/> 
            </LinearGradientBrush> 
           </Path.Stroke> 
           <Path.Fill> 
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
             <GradientStop Color="#FFE4882D" Offset="0"/> 
             <GradientStop Color="#FFF5CA09" Offset="1"/> 
            </LinearGradientBrush> 
           </Path.Fill> 
          </Path> 
          <Path x:Name="Bg" Data="F1M16.361,2.603C16.361,2.603 133.014,3.416 247.396,3.478 311.817,3.513 376.242,2.615 416.922,1.936 446.114,1.448 458.772,2.411 458.772,2.411 462.592,2.411 469.449,4.823 471.077,9.484 473.896,17.557 472.201,20.776 471.202,25.468 470.232,30.02 467.977,31.719 459.43,33.25 450.883,34.782 424.628,32.594 376,32.594 298.703,32.594 184.467,31.065 105.75,30.911 54.767,30.812 18.683,32.063 17.185,32.063 9.403,32.063 6.954,28.298 5.436,25.402 4.335,23.303 1.86,15.809 6.797,8.253 9.308,4.41 12.541,2.603 16.361,2.603z" Fill="#FFA77235" Height="36" Canvas.Left="9" Canvas.Top="8" Width="475"/> 
          <Path x:Name="Progress" Data="F1M19.986,2.29C19.986,2.29 50.058,4.582 104.021,2.936 154.279,1.403 214.797,4.02 264,4.02 310.844,4.02 341.117,2.457 347.659,2.936 354.201,3.415 356.173,5.804 357.743,10.484 359.313,15.162 360.055,20.568 357.202,26.468 355.175,30.658 353.597,31.417 347.492,33.396 345.484,34.047 309.622,34.937 262.208,34.943 217.536,34.948 162.63,33.886 116.105,33.683 61.905,33.446 19.087,34.063 17.185,34.063 9.403,34.063 6.016,31.048 4.498,28.152 3.397,26.053 1.86,15.809 6.797,8.253 9.308,4.41 16.166,2.29 19.986,2.29z" Height="36" Canvas.Left="8" Canvas.Top="7" Width="362"> 
           <Path.Resources> 
            <system:Double x:Key="ratioConstant">27500</system:Double> 
           </Path.Resources> 
           <Path.RenderTransform> 
            <ScaleTransform CenterX="0" 
               CenterY="0"> 
             <ScaleTransform.ScaleX> 
              <MultiBinding Converter="{StaticResource ResourceKey=ratioConverter}"> 
               <Binding Path="Value" RelativeSource="{RelativeSource TemplatedParent}"/> 
               <Binding ElementName="Progress" Path="Width"/> 
               <Binding Source="{StaticResource ratioConstant}"/> 
              </MultiBinding> 
             </ScaleTransform.ScaleX> 
            </ScaleTransform> 
           </Path.RenderTransform> 
           <Path.Fill> 
            <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> 
             <GradientStop Color="#FF5DFF4E" Offset="0.409"/> 
             <GradientStop Color="#FF159308" Offset="1"/> 
            </LinearGradientBrush> 
           </Path.Fill> 
          </Path> 
         </Canvas> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="Background"> 
      <Setter.Value> 
       <LinearGradientBrush EndPoint="0,1" 
            StartPoint="0,0"> 
        <GradientStop Color="{DynamicResource ControlLightColor}" 
            Offset="0" /> 
        <GradientStop Color="{DynamicResource ControlMediumColor}" 
            Offset="1" /> 
       </LinearGradientBrush> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="Foreground"> 
      <Setter.Value> 
       <LinearGradientBrush EndPoint="0.5,1" 
            StartPoint="0.5,0"> 
        <GradientStop Color="{DynamicResource ControlMediumColor}" 
            Offset="0" /> 
        <GradientStop Color="{DynamicResource ControlDarkColor}" 
            Offset="1" /> 
       </LinearGradientBrush> 
      </Setter.Value> 
     </Setter> 
    </Style>

注：該代碼可能需要一些改進，但至少是一個良好的開端，當你在進度條到達低值顯卡似乎並不很漂亮，但肯定可以提高基於在控制的圖形你的需求。我希望這可以幫助你。

來源

2015-09-13 18:17:57

謝謝你的幫助。任何想法如何可以解決低價值？ @kyle風格看起來更好，值低，但我希望看到不規則的形狀。 – Misiu

對不起，我正在考慮另一種解決方案，在不使用代碼的情況下顯示「彎曲」欄，但我無法找到解決方案。 –

我簡化你的代碼在我結束並打造出一個可行的解決方案。

<Window.Resources> 
    <LinearGradientBrush x:Key="PressedBrush" EndPoint="0.5,1" StartPoint="0.5,0"> 
     <GradientStop Color="#FFC18A13" Offset="1"/> 
     <GradientStop Color="#FFDC9A0C" Offset="0.339"/> 
    </LinearGradientBrush> 
    <LinearGradientBrush x:Key="SolidBorderBrush" EndPoint="0.5,1" StartPoint="0.5,0"> 
     <GradientStop Color="#FFE4882D" Offset="0"/> 
     <GradientStop Color="#FFF5CA09" Offset="1"/> 
    </LinearGradientBrush> 
    <LinearGradientBrush x:Key="DarkBrush" EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> 
     <GradientStop Color="#FF5DFF4E" Offset="0.409"/> 
     <GradientStop Color="#FF159308" Offset="1"/> 
    </LinearGradientBrush> 
    <Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ProgressBar}"> 

        <Grid MinHeight="24" MinWidth="100"> 



         <Border Name="PART_Track" CornerRadius="15" Background="{StaticResource PressedBrush}" BorderThickness="10"> 
          <Border.BorderBrush> 
           <VisualBrush> 
            <VisualBrush.Visual> 
             <Grid> 

              <Path x:Name="path1" Stretch="Fill" Stroke="Black" Fill="{StaticResource SolidBorderBrush}" Width="Auto" Height="Auto" Data="F1M22.086,3C22.086,3 63.118,4.562 125.833,3 199.069,1.175 294.072,5.645 370.146,4.333 430.323,3.294 474,3 474,3 479.523,3 487.826,8.208 489.687,15.098 491.864,23.156 491.191,28.867 489.081,37.118 487.415,43.637 479.856,47.999 474.333,47.999 474.333,47.999 368.324,50.176 252.792,47.999 135.568,45.792 42.104,49.541 23.518,47.999 12.306,47.07 6.028,45.811 4.028,37.787 3.199,34.461 1.441,23.222 7.178,11.906 10.179,5.987 16.563,3 22.086,3z"></Path> 
             </Grid> 
            </VisualBrush.Visual> 
           </VisualBrush> 
          </Border.BorderBrush> 
         </Border> 
         <Border Name="PART_Indicator" CornerRadius="15" Background="{StaticResource DarkBrush}" HorizontalAlignment="Left" BorderThickness="10"> 
          <Border.BorderBrush> 
           <VisualBrush> 
            <VisualBrush.Visual> 
             <Grid> 
              <Path x:Name="path" Stretch="Fill" Fill="Transparent" Width="Auto" Height="Auto" Data="F1M22.086,3C22.086,3 63.118,4.562 125.833,3 199.069,1.175 294.072,5.645 370.146,4.333 430.323,3.294 474,3 474,3 479.523,3 487.826,8.208 489.687,15.098 491.864,23.156 491.191,28.867 489.081,37.118 487.415,43.637 479.856,47.999 474.333,47.999 474.333,47.999 368.324,50.176 252.792,47.999 135.568,45.792 42.104,49.541 23.518,47.999 12.306,47.07 6.028,45.811 4.028,37.787 3.199,34.461 1.441,23.222 7.178,11.906 10.179,5.987 16.563,3 22.086,3z"></Path> 
             </Grid> 
            </VisualBrush.Visual> 
           </VisualBrush> 
          </Border.BorderBrush> 
         </Border> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources>

只是爲了完成這個例子

<Grid Width="500" Height="100"> 
    <ProgressBar Height="61" Value="20" x:Name="sampleProgressBar" /> 
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding ElementName=sampleProgressBar,Path=Value}"/> 
</Grid>

現在，您可以設置進度條和它的價值將在TextBlock中得以體現。您還可以自定義文本塊樣式以獲得您想要的效果。

來源

2015-09-15 11:12:54 Rohit

我回家後會檢查一下。我知道進度條的形狀是不規則的，但正如我在你的回答中看到的那樣，可以用邊框而不是路徑完成同樣的效果。我檢查後會回信。 – Misiu

@米秀請看看我更新的答案 – Rohit

WPF - 從PSD文件創建ProgressBar模板

回答

相關問題