c# XAML ProgressBar 正确设置渐变填充

Question

如何在 XAML 中将 ProgressBar 的渐变设置为动态填充？

目前是这样的:

两个进度条的代码:

<ProgressBar.Foreground>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
       <LinearGradientBrush.RelativeTransform>
          <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="270"/>
       </LinearGradientBrush.RelativeTransform>
       <GradientStop Color="Lime" Offset="0"/>
       <GradientStop Color="Red" Offset="1"/>
    </LinearGradientBrush>
</ProgressBar.Foreground>

但我希望上部 ProgressBar 的“结束”颜色为绿黄色，如下图所示。意味着我希望进度条像第二个进度条一样充满，然后“切掉”其余部分(例如，当我有 60% 时，我希望右侧的 40% 不显示)

如何正确执行此操作？

编辑(找到解决方案):

在尝试了几种方法(在条形图上绘制一个具有默认颜色的矩形等)之后，我发现我可以通过代码修改 GradientStop 的 offset:

color_UL.Offset = 2.0 - ul_val / 100;

表示我减去要显示的百分比，例如30% (ul_val = 30) 偏移设置为 170% (1.7)，但条形图本身显示 30%，颜色渐变平滑且正确。如果我在条上有 100%，它会计算 2.0 - 1.0，即 1(与正常情况一样，如图 1 中的条 #2 所示)。

我知道这听起来很困惑，所以这里是我想要的图片:

Answer 1

实现此布局的第二种方法是将背景设置为渐变色，然后将前景色设置为灰色，记住进度条的值需要为

100-value

因为您将设置条形灰色区域的值，该值从 100%(值 = 0 或条形中没有灰色)开始并向 0% 移动(值 = 100 或整个条形为灰色)

100%(值 = 100 - %)

99%(值 = 100 - %)

50%(值 = 100 - %)

0%(值 = 100 - %)

在您的 MainPage.xaml.cs(或您需要调用它的任何地方)

var percentage = 75;
progressBar.Value = 100 - percentage;

在您的 MainPage.xaml 中

<ProgressBar x:Name="progressBar" HorizontalAlignment="Left" Height="80" Margin="-82,121,0,0" VerticalAlignment="Top" Width="270" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto"
                     Minimum="0" Maximum="100" Value="0" Foreground="Gray">
            <ProgressBar.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <LinearGradientBrush.RelativeTransform>
                        <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="270"/>
                    </LinearGradientBrush.RelativeTransform>
                    <GradientStop Color="Lime" Offset="0"/>
                    <GradientStop Color="Red" Offset="1"/>
                </LinearGradientBrush>
            </ProgressBar.Background>
            <ProgressBar.RenderTransform>
                <CompositeTransform Rotation="90"/>
            </ProgressBar.RenderTransform>
        </ProgressBar>

您可能需要摆弄进度条的方向以使其正确显示，上面的代码用于垂直条，可用于电量计之类的东西。