C # XAML ProgressBar fills gradient correctly

Question

How to adjust gradient a ProgressBarin XAML for dynamic filling?

At the moment it looks like:

Code for both progress indicators:

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

but I want to have the “final” color of the top ProgressBarin green-yellow, as shown below. So, I want the progress bar to fill in like a second bar, and then “cut out” the rest (for example, when I have 60%, I want 40% to not appear on the right).

How to do it right?

Edit (solution found):

After trying a couple of ways (by drawing a rectangle with the default color on the panel, etc.), I realized that I could change offsetof GradientStopby code:

color_UL.Offset = 2.0 - ul_val / 100;

, , , . 30% (ul_val = 30) 170% (1,7), 30% . 100% , 2.0 - 1.0, 1 ( , Bar # 2 1).

, , , :

Answer 1

:

( ..), , offset of GradientStop :

color_UL.Offset = 2.0 - ul_val / 100;

, , , . 30% (ul_val = 30) 170% (1,7), 30% . 100% , 2.0 - 1.0, 1 ( , Bar # 2 1).

, , , :

Answer 2

- , , ,

100-

, 100% (value = 0 ) 0% (value = 100 )

100% (value = 100%)

99% (value = 100%)

50% (value = 100%)

0% (value = 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>

, , , , - .