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

如何在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>

意味着我减去我想要显示的百分比，例如30%（

ul_val=30

）偏移设置为170%（1.7），但条本身显示30%的平滑和正确的颜色渐变。如果条形图上有100%，它将计算

2.0-1.0

，即1（与正常值类似，如图1中的条形图2所示）

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

我的解决方案：

在尝试了几种方法（在条形图上绘制默认颜色的矩形等）后，我发现我可以通过代码修改

GradientStop

的

offset

：

color_UL.Offset = 2.0 - ul_val / 100;

color_UL.Offset = 2.0 - ul_val / 100;

意味着我减去我想要显示的百分比，例如30%（

ul_val=30

）偏移设置为170%（1.7），但条本身显示30%的平滑和正确的颜色渐变。如果条形图上有100%，它将计算

2.0-1.0

，即1（与正常值类似，如图1中的条形图2所示）

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

---

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

100价值

当您将设置条形图灰色区域的值时，该区域从100%开始（值=0或条形图中没有灰色），然后向0%移动（值=100或整个条形图为灰色）

100%（值=100-%）

99%（值=100-%）

50%（值=100-%）

0%（值=100-%）

在MainPage.xaml.cs中（或任何需要调用它的地方）

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

---

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

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

---

所以你不想让浅灰色区域显示…或者…？对不起，朋友，要想理解你想说的话还不太清楚。我相信他希望颜色随着填充而改变，而不是有一个延伸的渐变。绿色在25，黄色在50，红色在100。抱歉，这真的很难解释。我不想让灰色框消失sappear，我希望颜色梯度在点上，它在下面，所以第一栏的末端不是红色，而是像在第二栏的点上一样的橙色。换句话说，你想要三种颜色的梯度？如果是这样，你不能在红色和绿色之间加上吗？我的WPF有点生锈了，如果我错了，不要让我知道。拿他的底部进度条，cov呃，用你的手指，慢慢地把你的手指移到右边。我想这就是他想要他的酒吧填满的方式。

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

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