WPF----进度条ProgressBar（渐变色）

ProgressBar 是一种用于指示进程或任务的进度的控件，通常在图形用户界面（GUI）中使用。它提供了一种视觉反馈，显示任务的完成程度，帮助用户了解任务的进展情况。

基本特性

1. Minimum 和 Maximum 属性：

   • 这些属性定义进度的范围。默认情况下，Minimum 为 0，Maximum 为 100。

2. Value 属性：

   • 这个属性表示当前进度。它应该在 Minimum 和 Maximum 之间。

3. IsIndeterminate 属性：

   • 如果设置为 True，ProgressBar 将显示一个动画条，而不是实际的进度值。这通常用于无法确定进度百分比的任务。

示例：自定义渐变色 ProgressBar

1. 定义渐变色 ProgressBar 样式

在资源字典或窗口资源中定义 ProgressBar 的样式：

 <Style x:Key="RoundedProgressBar" TargetType="ProgressBar">
     <Setter Property="Height" Value="28"></Setter>
     <!--<Setter Property="Width" Value="600"></Setter>-->
     <Setter Property="Foreground" Value="#E6E6E6"></Setter>
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="ProgressBar">
                 <Grid>
                     <Border x:Name="PART_Track"
                             Background="#404040"
                             CornerRadius="7"
                             BorderBrush="#666"
                             BorderThickness="1">
                         <Border x:Name="PART_Indicator"
                                 CornerRadius="7,0,0,7"
                                 HorizontalAlignment="Left"
                                 Width="0">
                             <Border.Background>
                                 <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                     <GradientStop Color="#FF669FB1"  Offset="1.0" />
                                     <GradientStop Color="#90669FB3" Offset="0.5" />
                                     <GradientStop Color="#A6669FB1" Offset="0.35" />
                                     <GradientStop Color="#00669FB1" Offset="0.0" />
                                 </LinearGradientBrush>
                             </Border.Background>
                         </Border>
                     </Border>
                 </Grid>
                 <ControlTemplate.Triggers>
                     <Trigger Property="IsIndeterminate" Value="True">
                         <Setter TargetName="PART_Indicator" Property="Background" Value="Green"/>
                     </Trigger>
                     <Trigger Property="IsIndeterminate" Value="False">
                         <!--<Setter TargetName="PART_Indicator" Property="Width" 
                                 Value="{Binding RelativeSource={RelativeSource TemplatedParent}, 
                                 Path=ActualWidth, Converter={StaticResource ProgressWidthConverter}}"/>-->
                     </Trigger>
                 </ControlTemplate.Triggers>
             </ControlTemplate>
         </Setter.Value>
     </Setter>
 </Style>

2. 在 XAML 中使用 ProgressBar 控件：

 <Grid >
     <ProgressBar Style="{StaticResource RoundedProgressBar}"  HorizontalAlignment="Stretch"   Value="{Binding ProgressValue}"  Minimum="0" Maximum="100"  />
     <TextBlock TextAlignment="Center" Foreground="#E6E6E6" VerticalAlignment="Center" >
         <Run Text="{Binding ProgressValue}"></Run>
         <Run>%</Run></TextBlock>
 </Grid>

3. ViewModel

ViewModel 中定义一个绑定到 ProgressBar 的属性ProgressValue：

 [ObservableProperty]
 private int _progressValue = 0;

4.渐变色颜色解析

设置颜色与透明度关系

在 WPF 中，颜色的透明度是通过 ARGB (Alpha, Red, Green, Blue) 值表示的，其中 Alpha 值控制透明度。Alpha 值范围是 0 到 255，其中 0 表示完全透明，255 表示完全不透明。

如果你想要 35% 的透明度，你可以计算相应的 Alpha 值。35% 透明度意味着 65% 不透明度，因此你可以使用以下公式来计算 Alpha 值：

Alpha=255×65100=255×0.65≈166\text{Alpha} = 255 \times \frac{65}{100} = 255 \times 0.65 \approx 166Alpha=255×10065​=255×0.65≈166

因此，Alpha 值大约是 166，对应的十六进制值是 A6。

所以对应的颜色值为#A6669FB1。

最终结果如下：