WPF Progress Bar in different colors

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.

Can you please post some of your code? – Somnath Mar 13 '13 at 08:30 — Somnath, Mar 13 '13 at 08:30

Somnath · Accepted Answer · 2013-03-13T12:36:37.183

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.

enter image description here

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

WPF Progress Bar in different colors

1 Answers1