WPF - 从PSD文件创建ProgressBar模板

Question

WPF - 从PSD文件创建ProgressBar模板

c#wpfwpf-controls

11

我开始学习WPF，创建了我的第一个应用程序后，想要对其进行一些样式设置。我找到了UI模板，使用VS2013的Blend将PSD导入到我的项目中。

这是PSD中ProgressBar的外观：

这是导入到Blend中的外观：

以下是代码：

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

我的问题是如何将画布转换为进度条模板。

根据教程，我已经创建了模板，但是它们是由矩形而不是路径组成的。我尝试使用路径，但无法正确地对齐它们。

我该如何创建使用路径作为PART_Track和PART_Indicator的模板，并在该进度条中添加文本？

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

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

我在SO上找不到类似的问题（除了蜗牛进度条，但该解决方案基于图像而不是路径）。

- Misiu

我在过去的一个月里看到了大约3个与此完全相同的问题。 - Glen Thomas

@GlenThomas可以请您发布链接吗？在提出新问题之前，我总是尝试寻找解决方案。 - Misiu

1

我现在找不到它们了...虽然你已经构建了类似进度条的东西，但它是静态的，根据进度值改变填充路径将非常困难。最好从默认的进度条控件模板开始，并将其调整为所需的外观。 - Glen Thomas

问题在于路径的本质。它的形状相当静态，除非您更改点数据，否则这将非常困难。您能否用带有CornerRadius的矩形控件替换您的路径？它可以与您的路径具有完全相同的外观，但可以更轻松地调整其宽度。 - Glen Thomas

@GlenThomas 我想在进度条中添加不规则形状，所以矩形不是一个选项。或者也许我可以在不使用路径的情况下实现那种效果（请参考我问题中的第一张图片）？ - Misiu

显示剩余2条评论

3个回答

1

我准备了一个关于您的控制模板如何的原型。

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

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

然后我准备了一个样式，将控件模板应用于窗口中所有的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>

注意：代码可能需要进行一些改进，但至少是一个很好的开端，在进度条达到低值时的图形似乎不是很美观，但是您可以根据自己的需求改进控件的图形。希望这能帮助您。

- Mattia Magosso

谢谢您的帮助。有任何想法如何解决低值的问题吗？@kyle的样式在低值时看起来更好，但是我想要那种不规则形状的样子。 - Misiu

抱歉耽搁了，但我一直在思考另一种方法来展示“曲线”条形图，而不使用代码，但我没有找到解决方案。 - Mattia Magosso

1

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

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

现在您可以设置进度条，其值将反映在文本块上。您还可以自定义文本块样式以获得所需的效果。

- Rohit

我回家后会立即检查。我知道进度条的形状是不规则的，但是根据您的答案，可以通过边框而不是路径实现相同的效果。我会检查后再回复。 - Misiu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Evk · Accepted Answer

我将为您介绍如何使用该模板制作可工作的进度条。

首先，我们创建自定义的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>

基本上，我们只需将您的psd中的整个画布放入Stretch = Fill的Viewbox中（并删除不必要的边距）。请注意，所有尺寸都相同且硬编码，但由于我们将控件放置在viewbox内，因此它将拉伸到viewbox的尺寸。而且，因为这是Stretch = Fill且没有指定宽度和高度的viewbox，所以它将拉伸到控件的大小。我们还将对应于绿色填充的路径放入其自己的viewbox中，因为我们需要根据ProgressBar.Value参数调整该路径的大小。

现在我们为绿色路径的viewbox宽度创建转换器：

 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，但请记住我们已将其放在视口中，因此我们的控件宽度并非固定为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}"/>