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

【问题标题】：c# XAML ProgressBar set gradient filling properlyc# XAML ProgressBar 正确设置渐变填充
【发布时间】：2014-06-18 14:58:48
【问题描述】：

如何将 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 所示）。

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

【问题讨论】：

所以你想让浅灰色区域不显示......还是......？抱歉，我的朋友，但试图理解你所说的你想要什么并不那么清楚。
我相信他希望颜色在填充时发生变化，而不是有一个渐变的延伸。 25 为绿色，50 为黄色，100 为红色。
抱歉，真的很难解释。我不希望灰色框消失，我希望颜色渐变位于它下方的点，因此第 1 条的末端不是红色，而是在第 2 条的点处的橙色/跨度>
所以换句话说，你想要 3 种颜色的渐变？如果是这样，您不能在红色和绿色之间添加吗？我的 WPF 有点生锈了，如果我错了，请告诉我。
拿下他的底部进度条，用手指盖住它，慢慢地向右移动手指。我认为这就是他希望他的酒吧填满的方式。

标签： c# xaml progress-bar gradient

【解决方案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>

您可能需要调整进度条的方向以使其正确显示，上面的代码用于垂直条，可用于燃料表之类的东西。

【讨论】：

【解决方案2】：

我的解决方案：

在尝试了几种方法（在条上绘制一个默认颜色的矩形等）后，我发现我可以通过代码修改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 所示）。

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

【讨论】：

【解决方案3】：

您可以在 XAML 中仅定义起始颜色（即 red(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;
        }
    }

【讨论】：