wpf - さまざまな色のWPFプログレスバー

Question

アラーム状態になっています。色を使ってプログレスバーにアラームの状態を反映させたい。オペレーターが30％のステータスまでアラームを処理した場合、プログレスバーは30％の色を表示し、オペレーターが60％まで処理した場合。したがって、プログレスバーは最初の30％を赤色で表示し、次の30％を青色で表示します。

プログレスバーの値を30に設定し、緑色にしています。私の質問は、60％に設定したい場合、最初の30％は緑、次の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;
 }