不同顏色的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; 
}