C# WPF-从PSD文件创建ProgressBar模板

我正在用WPF开始我的冒险，在创建了我的第一个应用程序之后，我想对它进行一点风格设计。我找到并使用Blend for VS2013将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模板

基于教程，我能够创建模板，但有矩形，而不是路径。我已尝试使用路径，但无法正确对齐它们

如何创建使用路径作为PART_轨迹和PART_指示器的模板，以及如何向进度条添加文本

我将其想象为3层：组件背景（橙色）、进度背景（棕色）和进度条（绿色）。 也许我应该使用两层：进度条和带笔划的背景

这是我的第一个模板，所以我想尽我所能做到最好

---

我找不到类似的问题（除了，但有一个解决方案是基于图像而不是路径）。

我将告诉您如何从该模板制作工作进度条

首先，我们创建自定义wpf控件并从ProgressBar继承：

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

然后我们进入Themes/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>

在这里，我们传递进度条的最小值、最大值和计算绿色条的宽度。最大可用宽度始终为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();
    }
} 

公共部分类主窗口：窗口{
公共主窗口（）{
初始化组件（）；
var timer=newdispatchermer（）
{
间隔=从秒开始的时间间隔（1）
};
计时器。滴答+=（o，e）=>
{
如果（巴值<巴最大值）
bar.Value++；
其他的
timer.Stop（）；
};
timer.Start（）；
}
} 

看看我们的progressbar是如何工作的。 通常，如果用户界面很重，可能需要使用简单的表单，因为ViewBox中的许多路径都不是很有效。但是如果你必须使用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}"/>

---

我准备了一个控件模板的原型

首先，我创建了一个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窗口中将其声明为资源（I omissis名称空间的声明）：

注意：代码可能需要一些改进，但至少是一个良好的开端，当进度条中的值达到较低值时，图形似乎不是很漂亮，但您可以根据需要改进控件的图形。

---

我希望这对你有帮助

我简化了您的代码，并制定了一个可行的解决方案

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

现在您可以设置进度条，其值将反映在文本块上。你可以

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

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