如何在 wpf 中制作自定义形状的进度条？

Question

好的，我将自定义一个进度条或在 C# WPF 中加载，而不是矩形，它最后应该有一些小的清晰度。看起来像这样

加载完成后锐度消失

目前，这就是我所做的。

我怎样才能实现自定义加载栏？

这是我的代码，XAML

<Window x:Class="loadingbarSolution.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"

        Title="MainWindow" Height="350" Width="525">

    <Window.Resources>

        <Style x:Key="{x:Type ProgressBar}"

       TargetType="{x:Type ProgressBar}">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="ProgressBar">

                        <Border BorderBrush="#D9DCE1" BorderThickness="0" Background="#FF0C0B0B" CornerRadius="0" Padding="0">

                            <Grid x:Name="PART_Track">

                                <Rectangle x:Name="PART_Indicator" HorizontalAlignment="Left" Fill="#FF2BA9FF" />

                            </Grid>

                        </Border>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    </Window.Resources>

        <Grid>

        <ProgressBar x:Name="IMSIProgressBar" 

                     HorizontalAlignment="Left" 

                     Height="20" Margin="82,136,0,0" 

                     VerticalAlignment="Top" 

                     Width="200" 

                     BorderThickness="1" Background="#FF0C0B0B"/>

    </Grid>

</Window>

我该怎么办？

Answer 1

返回代码：class MyCustomConverter : IValueConverter{&nbsp; &nbsp; public object Convert(object value, Type targetType, object parameter, CultureInfo culture)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; return new Thickness(0, 0, -(double)value, 0);&nbsp; &nbsp; }&nbsp; &nbsp; public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; throw new NotImplementedException();&nbsp; &nbsp; }}模板：<ControlTemplate TargetType="ProgressBar">&nbsp; &nbsp; <ControlTemplate.Resources>&nbsp; &nbsp; &nbsp; &nbsp; <local:MyCustomConverter x:Key="sttc"/>&nbsp; &nbsp; </ControlTemplate.Resources>&nbsp; &nbsp; <Border BorderBrush="#D9DCE1" BorderThickness="0" Background="#FF0C0B0B" CornerRadius="0" Padding="0" ClipToBounds="True">&nbsp; &nbsp; &nbsp; &nbsp; <Grid x:Name="PART_Track" Margin="{TemplateBinding Height ,Converter={StaticResource sttc}}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Rectangle x:Name="PART_Indicator" HorizontalAlignment="Left" Fill="#FF2BA9FF" RenderTransformOrigin="0,0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Rectangle.RenderTransform>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TransformGroup>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <SkewTransform AngleX="-45"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TransformGroup>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Rectangle.RenderTransform>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Rectangle>&nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; </Border></ControlTemplate>注意：如果高度是固定的，则不需要转换器，将边距设置为固定的厚度。转换器仅适用于自动调整大小。

Answer 2

您可以Polygon在模板中使用 a ：<Setter Property="Template">&nbsp; &nbsp; <Setter.Value>&nbsp; &nbsp; &nbsp; &nbsp; <ControlTemplate TargetType="ProgressBar">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Border BorderBrush="#D9DCE1" BorderThickness="0" Background="#FF0C0B0B" CornerRadius="0" Padding="0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid x:Name="PART_Track">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid x:Name="PART_Indicator" HorizontalAlignment="Left" Background="#FF2BA9FF">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Polygon Points="0,20 20,0 20,20" Stroke="#FF0C0B0B" Fill="#FF0C0B0B" HorizontalAlignment="Right" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Border>&nbsp; &nbsp; &nbsp; &nbsp; </ControlTemplate>&nbsp; &nbsp; </Setter.Value></Setter>您必须随时隐藏它Value == Maximum，例如使用转换器。

Answer 3

第三种方法是使用Path它Data被设计为逆时针倾斜变换并且它RenderTransform是顺时针的SkewTransform。这样，移动指示器确实完全达到了 100%。<ControlTemplate x:Key="ProgressBarPath" TargetType="ProgressBar">&nbsp; &nbsp; <Viewbox Stretch="Fill">&nbsp; &nbsp; &nbsp; &nbsp; <Grid HorizontalAlignment="Left" Margin="-5 0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Path Stretch="None" x:Name="PART_Track" Fill="#0C0B0B" RenderTransformOrigin="0,0.5" StrokeMiterLimit="1" Data="M 0,0 l 150,0 10,10 -150,0 z">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Path.RenderTransform>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <SkewTransform AngleX="-45" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Path.RenderTransform>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Path>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Path Stretch="None" x:Name="PART_Indicator" HorizontalAlignment="Left" Fill="#29AAE1" RenderTransformOrigin="0,0.5" StrokeMiterLimit="1" Data="M 0,0 l 150,0 10,10 -150,0 z">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Path.RenderTransform>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <SkewTransform AngleX="-45" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Path.RenderTransform>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Path>&nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; </Viewbox></ControlTemplate>2018年的两种方法和这个方法的比较：以上 APNG 的完整代码：MainWindow.xaml：<Window x:Class="StackOverFlowTest.MainWindow"&nbsp; &nbsp; &nbsp; &nbsp; xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"&nbsp; &nbsp; &nbsp; &nbsp; xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&nbsp; &nbsp; &nbsp; &nbsp; xmlns:d="http://schemas.microsoft.com/expression/blend/2008"&nbsp; &nbsp; &nbsp; &nbsp; xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"&nbsp; &nbsp; &nbsp; &nbsp; xmlns:local="clr-namespace:StackOverFlowTest"&nbsp; &nbsp; &nbsp; &nbsp; mc:Ignorable="d"&nbsp; &nbsp; &nbsp; &nbsp; Title="MainWindow" Height="250" Width="550">&nbsp; &nbsp; <Window.Resources>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <!--&nbsp; &nbsp; &nbsp; &nbsp; ProgressBar templates with skewed Indicator:&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; Reference: "How do I make a custom shape of progressbar in wpf?"&nbsp; &nbsp; &nbsp; &nbsp; https://stackoverflow.com/questions/52250531/how-do-i-make-a-custom-shape-of-progressbar-in-wpf&nbsp; &nbsp; &nbsp; &nbsp; -->&nbsp; &nbsp; &nbsp; &nbsp; <!--&nbsp; &nbsp; &nbsp; &nbsp; ProgressBar with skewed Rectangle&nbsp; &nbsp; &nbsp; &nbsp; Advantages: - Moving Indicator supports transparent background&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; - Moving Indicator shows no artifacts&nbsp; &nbsp; &nbsp; &nbsp; Disadvantage: - Moving Indicator doesn't completely reach 100%&nbsp; &nbsp; &nbsp; &nbsp; Code from "Mr. Squirrel.Downy": https://stackoverflow.com/a/52252590&nbsp; &nbsp; &nbsp; &nbsp; -->&nbsp; &nbsp; &nbsp; &nbsp; <ControlTemplate x:Key="ProgressBarRectangle" TargetType="ProgressBar">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Border BorderBrush="#D9DCE1" BorderThickness="0" Background="#FF0C0B0B" CornerRadius="0" Padding="0" ClipToBounds="True">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid x:Name="PART_Track">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Rectangle x:Name="PART_Indicator" HorizontalAlignment="Left" Fill="#2BA9FF" RenderTransformOrigin="0,0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Rectangle.RenderTransform>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TransformGroup>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <SkewTransform AngleX="-45"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TransformGroup>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Rectangle.RenderTransform>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Rectangle>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Border>&nbsp; &nbsp; &nbsp; &nbsp; </ControlTemplate>&nbsp; &nbsp; &nbsp; &nbsp; <!--&nbsp; &nbsp; &nbsp; &nbsp; ProgressBar with right-aligned Polygon&nbsp; &nbsp; &nbsp; &nbsp; Disadvantages: - Moving Indicator doesn't completely reach 100%&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;- Moving Indicator doesn't support transparent background (Polygon must hide Indicator)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;- Moving Indicator shows artifacts when ProgressBar is set to large width (Polygon isn't able to hide Indicator accurately)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;- <ControlTemplate> has to be adjusted if height of ProgressBar exceeds height of Polygon&nbsp; &nbsp; &nbsp; &nbsp; Code from "mm8": https://stackoverflow.com/a/52279788&nbsp; &nbsp; &nbsp; &nbsp; -->&nbsp; &nbsp; &nbsp; &nbsp; <ControlTemplate x:Key="ProgressBarPolygon"&nbsp; TargetType="ProgressBar">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Border BorderBrush="#D9DCE1" BorderThickness="0" Background="#FF0C0B0B" CornerRadius="0" Padding="0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid x:Name="PART_Track">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid x:Name="PART_Indicator" HorizontalAlignment="Left" Background="#FF2BA9FF">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Polygon Points="0,32 32,0 32,32" Stroke="#FF0C0B0B" Fill="#FF0C0B0B" HorizontalAlignment="Right" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Border>&nbsp; &nbsp; &nbsp; &nbsp; </ControlTemplate>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <!--&nbsp; &nbsp; &nbsp; &nbsp; ProgressBar with skewed Path&nbsp; &nbsp; &nbsp; &nbsp; Advantages: - Moving Indicator completely reaches 100%&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; - Moving Indicator supports transparent background&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; - Moving Indicator shows no artifacts&nbsp; &nbsp; &nbsp; &nbsp; Disadvantage: - <ControlTemplate> has to be adjusted&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if proportion (width-height-ratio) of ProgressBar differs from&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; the two ones in PathGeometry, otherwise the moving Indicator alters its angle.&nbsp; &nbsp; &nbsp; &nbsp; How2: Create PathGeometry ( <Path Data="..."> ) contrary to planed skew angle to skew PART_Indicator to desired angle.&nbsp; &nbsp; &nbsp; &nbsp; Example: By default "PART_Indicator" is always vertical. To solely give the Indicator a 45° clockwise 'rotation' ("/"),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;design your Path as a 45° anti-clockwise skewed Path.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;For a simple Path like in these ProgressBars, you can quite easily do mental arithmetic.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;For more complex Path Data, you can use calculation methods in CS code...&nbsp; &nbsp; &nbsp; &nbsp; -->&nbsp; &nbsp; &nbsp; &nbsp; <ControlTemplate x:Key="ProgressBarPath" TargetType="ProgressBar">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Viewbox Stretch="Fill">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid HorizontalAlignment="Left" Margin="-5 0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Path Stretch="None" x:Name="PART_Track" Fill="#0C0B0B" RenderTransformOrigin="0,0.5" StrokeMiterLimit="1" Data="M 0,0 l 150,0 10,10 -150,0 z">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Path.RenderTransform>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <SkewTransform AngleX="-45" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Path.RenderTransform>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Path>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Path Stretch="None" x:Name="PART_Indicator" HorizontalAlignment="Left" Fill="#29AAE1" RenderTransformOrigin="0,0.5" StrokeMiterLimit="1" Data="M 0,0 l 150,0 10,10 -150,0 z">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Path.RenderTransform>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <SkewTransform AngleX="-45" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Path.RenderTransform>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Path>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Viewbox>&nbsp; &nbsp; &nbsp; &nbsp; </ControlTemplate>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </Window.Resources>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <StackPanel Orientation="Vertical" Background="#464646">&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <!--ProgressBar with Rectangle, "Mr. Squirrel.Downy":-->&nbsp; &nbsp; &nbsp; &nbsp; <Grid HorizontalAlignment="Center" Margin="0 27 0 0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ProgressBar Template="{StaticResource ProgressBarRectangle}" Width="480" Height="32" Value="{Binding ElementName=Progress, Path=Value}" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label Content="&lt;Rectangle&gt; + &lt;SkewTansform&gt; (by Mr. Squirrel Downy)" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="#FFFFFF" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label Content="{Binding ElementName=Progress, Path=Value}" ContentStringFormat="{}{0} %" Padding="0" HorizontalAlignment="Right" VerticalAlignment="Center" FontStyle="Italic" Margin="0 0 10 0" Foreground="#808080" />&nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; <!--ProgressBar with Polygon, "mm8":-->&nbsp; &nbsp; &nbsp; &nbsp; <Grid HorizontalAlignment="Center" Margin="0 4 0 0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ProgressBar Template="{StaticResource ProgressBarPolygon}" Width="480" Height="32" Value="{Binding ElementName=Progress, Path=Value}" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label Content="&lt;Polygon HorizontalAlignment=&quot;Right&quot; /&gt; (by mm8)" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="#FFFFFF" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label Content="{Binding ElementName=Progress, Path=Value}" ContentStringFormat="{}{0} %" Padding="0" HorizontalAlignment="Right" VerticalAlignment="Center" FontStyle="Italic" Margin="0 0 10 0" Foreground="#808080" />&nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; <!--ProgressBar with Path:-->&nbsp; &nbsp; &nbsp; &nbsp; <Grid HorizontalAlignment="Center" Margin="0 4 0 0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ProgressBar Template="{StaticResource ProgressBarPath}" Width="480" Height="32" Value="{Binding ElementName=Progress, Path=Value}" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label Content="&lt;Path&gt; + &lt;SkewTransform&gt;" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="#FFFFFF" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label Content="{Binding ElementName=Progress, Path=Value}" ContentStringFormat="{}{0} %" Padding="0" HorizontalAlignment="Right" VerticalAlignment="Center" FontStyle="Italic" Margin="0 0 10 0" Foreground="#808080" />&nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; <Slider Name="Progress" Margin="0 35 0 0" Minimum="0" Maximum="100" Width="480" IsSnapToTickEnabled="True" TickFrequency="1" />&nbsp; &nbsp; </StackPanel></Window>为了完整起见，在后面的代码中计算复杂路径数据的示例（上述 XAML 不需要）：MainWindow.xaml.cs：using System.Diagnostics;using System.Globalization;using System.Windows;using System.Windows.Media;namespace StackOverFlowTest{&nbsp; &nbsp; /// <summary>&nbsp; &nbsp; /// Interaction logic for MainWindow.xaml&nbsp; &nbsp; /// </summary>&nbsp; &nbsp; public partial class MainWindow : Window&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; public MainWindow()&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; InitializeComponent();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Instantiate and initialize variable for normal Path Data without transformation:&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Geometry geo = Geometry.Parse("M 0,0 l 150,0 0,10 -150,0 z");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Instantiate and initialize variable for desired shearing/transvection&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // (use opposite transformation to the one in the ControlTemplate):&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; SkewTransform skewT = new SkewTransform(45, 0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // In case of additional transformations:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Instantiate and initialize variable for desired translation:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //TranslateTransform transT = new TranslateTransform(-31.89, 0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Instantiate variable for all transformations, as you have to apply all transformation at once:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //TransformGroup tG = new TransformGroup();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //tG.Children.Add(skewT);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //tG.Children.Add(transT);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Create a clone of of your Geometry object,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // since in order to apply a transform, geometry must not be readonly:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Geometry geoClone = geo.Clone();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Apply transformation:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; geoClone.Transform = skewT;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // For multiple transformations:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //geoClone.Transform = tG;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Calculate new Path Data:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; string result = geoClone.GetFlattenedPathGeometry(0.001, ToleranceType.Relative).ToString(CultureInfo.InvariantCulture);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //var result = geoClone.GetFlattenedPathGeometry(0.001, ToleranceType.Relative).ToString().Replace(",", ".").Replace(";", ",");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Return new Path Data:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Trace.WriteLine(this + ": " + result);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Returns: M0,0L150,0 160,10 10,10 0,0z&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Note that returned values are absolute values.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Identical Path Data in relative coordinates (meaning offset values to respective previous point):&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // M 0,0 l 150,0 10,10 -150,0 z&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}