user3079834 user3079834 - 1 month ago 8
C# Question

c# XAML ProgressBar set gradient filling properly

How do I set the gradient of a

ProgressBar
in XAML to dynamic filling?

At the moment its like:

enter image description here

Code for both progress bars:

<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 "end"color of the upper
ProgressBar
in the green-yellowish color like directly below.
Means I want the progress bar full filled like the second bar and then "cut" the rest out (e.g. when I have 60% I want the 40% on the right not shown)

How do I do this properly?

Edit (found a solution):

After trying a couple of ways (drawing a rectangle with default color onto the bar etc) I figured out that I can modify the
offset
of
GradientStop
by code:

color_UL.Offset = 2.0 - ul_val / 100;


means I subtract the percentage that I want to display e.g. 30% (
ul_val = 30
) the Offset is set to 170% (1.7) but the bar itself shows 30% with the smooth and right color gradient. If I have 100% on the bar it calculates
2.0 - 1.0
which is 1 (like normal, shown in Bar #2 in picture 1).

I know this sounds all confusing, so here the picture as I wanted it to be:

ProgressBar with fitting gradient

Answer

My Solution:

After trying a couple of ways (drawing a rectangle with default color onto the bar etc) I figured out that I can modify the offset of GradientStop by code:

color_UL.Offset = 2.0 - ul_val / 100;

means I subtract the percentage that I want to display e.g. 30% (ul_val = 30) the Offset is set to 170% (1.7) but the bar itself shows 30% with the smooth and right color gradient. If I have 100% on the bar it calculates 2.0 - 1.0 which is 1 (like normal, shown in Bar #2 in picture 1).

I know this sounds all confusing, so here the picture as I wanted it to be:

ProgressBar with fitting gradient

Comments