wpf - 不同颜色的 WPF 进度条

Question

我处于警报状态。我想借助颜色在进度条上反映警报状态。如果操作员已处理报警至 30% 状态，则进度条将显示 30% 的颜色，如果操作员已处理至 60%。因此，进度条将以红色显示前 30%，然后以蓝色显示接下来的 30%。

我将进度条的值设置为 30 并获得绿色。我的问题是，当我想将其设置为 60% 时，它会在前 30% 显示绿色，下一个显示红色。

Answer 1

下面是给你的例子。为 ProgressBar 设置 MyProgressBarStyle。我使用 LinearGradientBrush 将进度条的背景设置为 30% 红色、30% 绿色和 30% 蓝色。并反转 PART_Indicator。所以你需要使用 SetMyProgressBarValue 函数来设置 ProgressBar 的百分比值。试试它对我有用。

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>

为 MyProgressBar 设置百分比值的函数

 public void SetMyProgressBarValue(Double percentageValue)
 {
     MyProgressBar.Value = 100 - percentageValue;
 }