WPF----进度条ProgressBar(渐变色)

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

基本特性

  1. MinimumMaximum 属性:

    • 这些属性定义进度的范围。默认情况下,Minimum 为 0,Maximum 为 100。
  2. Value 属性:

    • 这个属性表示当前进度。它应该在 MinimumMaximum 之间。
  3. IsIndeterminate 属性:

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

示例:自定义渐变色 ProgressBar

1. 定义渐变色 ProgressBar 样式

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

cs 复制代码
 <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 控件:
cs 复制代码
 <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:

cs 复制代码
 [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。

最终结果如下:

相关推荐
玉面小君3 天前
从 WPF 到 Avalonia 的迁移系列实战篇6:Trigger、MultiTrigger、DataTrigger 的迁移
wpf·avalonia
招风的黑耳4 天前
Java生态圈核心组件深度解析:Spring技术栈与分布式系统实战
java·spring·wpf
lfw20194 天前
WPF 数据绑定模式详解(TwoWay、OneWay、OneTime、OneWayToSource、Default)
wpf
Magnum Lehar4 天前
3d wpf游戏引擎的导入文件功能c++的.h实现
3d·游戏引擎·wpf
FuckPatience4 天前
WPF Telerik.Windows.Controls.Data.PropertyGrid 自定义属性编辑器
wpf
almighty275 天前
C#WPF控制USB摄像头参数:曝光、白平衡等高级设置完全指南
开发语言·c#·wpf·usb相机·参数设置
军训猫猫头5 天前
12.NModbus4在C#上的部署与使用 C#例子 WPF例子
开发语言·c#·wpf
我要打打代码5 天前
在WPF项目中使用阿里图标库iconfont
wpf
拾忆,想起6 天前
Redisson 分布式锁的实现原理
java·开发语言·分布式·后端·性能优化·wpf
weixin_464078076 天前
wpf依赖注入驱动的 MVVM实现(含免费源代码demo)
wpf