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颜色为绿色 - 黄色，就像正下方一样。 意思是我希望进度条像第二个栏一样充满，然后＆＃34; cut＆＃34;休息时间（例如，当我有60％时，我希望右边的40％没有显示）

我该如何正确地做到这一点？

编辑（找到解决方案）：

尝试了几种方法（在条形图上绘制了一个带有默认颜色的矩形等）后，我发现我可以通过代码修改offset的{​​{1}}：

GradientStop

表示我减去要显示的百分比，例如30％（color_UL.Offset = 2.0 - ul_val / 100; ）偏移设置为170％（1.7），但条形本身显示30％，具有平滑和正确的颜色渐变。如果我在条形图上有100％，它会计算ul_val = 30为1（正常情况下，如图1中的条形码2所示）。

我知道这听起来很混乱，所以这里的图片就像我想要的那样：

Answer 1

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

  

100值

因为您要设置条形图的灰色区域的值，该区域以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>

您可能需要调整进度条的方向以便正确显示，上面的代码用于垂直条，可用于电量计等。

Answer 2

我的解决方案：

尝试了几种方法（在条形图上绘制了一个带有默认颜色的矩形等）后，我发现我可以通过代码修改offset的{​​{1}}：

GradientStop

表示我减去要显示的百分比，例如30％（color_UL.Offset = 2.0 - ul_val / 100; ）偏移设置为170％（1.7），但条形本身显示30％，具有平滑和正确的颜色渐变。如果我在条形图上有100％，它会计算ul_val = 30为1（正常情况下，如图1中的条形码2所示）。

我知道这听起来很混乱，所以这里的图片就像我想要的那样：

Answer 3

您可以在XAML中定义起始颜色（即红色（255,0,0））并在代码中计算在100％颜色之间执行线性插值的结束颜色（即LimeGreen（50,205,50）。 XAML中的ProgressColor（要计算的颜色）：

<ProgressBar Value="{Binding Progress, Mode=OneWay}" Minimum="0" Maximum="100" >
        <ProgressBar.Foreground>
             <LinearGradientBrush EndPoint="0, 0.5" StartPoint="1, 0.5">
                  <GradientStop Color="{Binding ProgressColor, Mode=OneWay}" Offset="0"/>
                  <GradientStop Color="Red" Offset="1"/>
             </LinearGradientBrush>
        </ProgressBar.Foreground>

然后在其他地方做你的数学：

public string ProgressColor
        {
        get
        {
            int R = Convert.ToInt32(Math.Floor(255 - (255 - 50) * YourNeededPercentage));
            int G = Convert.ToInt32(Math.Floor(205 * YourNeededPercentage));
            int B = Convert.ToInt32(Math.Floor(50 * YourNeededPercentage));

            string ProgressColor = String.Format("#{0:X2}{1:X2}{2:X2}", R, G, B);
            return ProgressColor;
        }
    }