WPF Progress Bar in different colors - wpf

Question

I am having a alarm status. I want to reflect the alarm status on the progress bar with the help of colors.
If an operator has handled the alarm till 30% status, so Progress Bar will show the 30% color and if Operator has handled till 60%. So Progress Bar will show the first 30% in red color and then next 30% in blue color.
I am setting the value of the progress bar to 30 and getting green color. My question is when i want to set it to 60% it will show green for first 30% and red for next.

Answer 1

Below is the example for you. Set MyProgressBarStyle for the ProgressBar. I have set the background of the progress bar as 30% red, 30% Green and 30% Blue using LinearGradientBrush. And reversed the PART_Indicator. So you need to use SetMyProgressBarValue function to set the percentage value for the ProgressBar. Try it its working for me.
XAML
<Grid Background="Gray">
<Grid.Resources>
<Style x:Key="MyProgressBarStyle" TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid MinHeight="14" MinWidth="200">
<Border Name="PART_Track" CornerRadius="2" BorderBrush="Transparent" BorderThickness="1" >
<Border.Background>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<LinearGradientBrush.GradientStops>
<GradientStop Color="red" Offset="0" ></GradientStop>
<GradientStop Color="red" Offset="0.3" ></GradientStop>
<GradientStop Color="Green" Offset=".3" ></GradientStop>
<GradientStop Color="Green" Offset=".3" ></GradientStop>
<GradientStop Color="Green" Offset=".6" ></GradientStop>
<GradientStop Color="Blue" Offset=".6" ></GradientStop>
<GradientStop Color="Blue" Offset="1" ></GradientStop>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border
Name="PART_Indicator"
CornerRadius="2"
Background="Gray"
BorderBrush="Transparent"
BorderThickness="1"
HorizontalAlignment="Right" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<ProgressBar x:Name="MyProgressBar" Style="{StaticResource MyProgressBarStyle}" Minimum="0" Maximum="100" Height="80" Value="20"></ProgressBar>
</Grid>
Function to set percentage value for MyProgressBar
public void SetMyProgressBarValue(Double percentageValue)
{
MyProgressBar.Value = 100 - percentageValue;
}