ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

HandyControl WPF ProgressBar 进度条样式全解:从基础样式到条纹、扁平变体与自定义扩展

HandyControl WPF ProgressBar 进度条样式全解:从基础样式到条纹、扁平变体与自定义扩展 UI组件桌面应用【免费下载链接】HandyControlContains some simple and commonly used WPF controls项目地址https://gitcode.com/gh_mirrors/ha/HandyControl点击查看免费下载本文以 HandyControl 开源仓库一个包含常用 WPF 控件的控件库为背景系统梳理其原生ProgressBar进度条的样式体系默认的ProgressBarBaseStyle、五种语义色变体、条纹进度条家族以及扁平风格ProgressBarFlat并结合仓库源码ProgressBar.xaml 与 ProgressBarBaseStyle.xaml剖析其实现原理。读完本文你将能够在自己的 WPF 项目中通过一行Style{DynamicResource ...}直接使用这些样式也能仿照源码自行定制颜色、圆角与动画效果。样式总览一张表看懂所有进度条样式HandyControl 为原生ProgressBar控件预置了如下样式 Key来源于 ProgressBar.xaml 的完整定义样式 Key用途父样式ProgressBarBaseStyle进度条默认样式不推荐直接使用仅供其它样式 BasedOn-ProgressBarSuccess成功色进度条ProgressBarBaseStyleProgressBarInfo提示色进度条ProgressBarBaseStyleProgressBarWarning警告色进度条ProgressBarBaseStyleProgressBarDanger危险色进度条ProgressBarBaseStyleProgressBarStripeBaseStyle条纹进度条默认样式不推荐直接使用-ProgressBarPrimaryStripe主题色条纹进度条ProgressBarStripeBaseStyleProgressBarSuccessStripe成功色条纹进度条ProgressBarStripeBaseStyleProgressBarInfoStripe信息色条纹进度条ProgressBarStripeBaseStyleProgressBarWarningStripe警告色条纹进度条ProgressBarStripeBaseStyleProgressBarDangerStripe危险色条纹进度条ProgressBarStripeBaseStyleProgressBarFlat扁平风格4 像素细条 自带动画-此外与原生进度条同文件还定义了CircleProgressBar环形与WaveProgressBar波浪的系列样式但那是扩展控件的范畴本文聚焦原生ProgressBar。ProgressBarBaseStyle一切进度条的根基ProgressBarBaseStyle是文档明确标注不推荐直接使用的基础样式它存在的意义是让ProgressBarSuccess、ProgressBarInfo等派生样式通过BasedOn继承同一套模板Template从而保证外观一致、维护成本最低。从 ProgressBarBaseStyle.xaml 可以看到它的核心设置Style x:KeyProgressBarBaseStyle TargetTypeProgressBar Setter Propertyhc:VisualElement.Text Setter.Value MultiBinding Converter{StaticResource Number2PercentageConverter} StringFormat{}{0:F0} % Binding PathValue RelativeSource{RelativeSource Self}/ Binding PathMaximum RelativeSource{RelativeSource Self}/ /MultiBinding /Setter.Value /Setter Setter PropertyHeight Value20/ Setter Propertyhc:BorderElement.CornerRadius Value{StaticResource DefaultCornerRadius}/ Setter PropertyBackground Value{DynamicResource SecondaryRegionBrush}/ Setter PropertyBorderBrush Value{DynamicResource BorderBrush}/ Setter PropertyBorderThickness Value0/ ... /Style值得注意的实现细节内置百分比文字样式通过hc:VisualElement.Text附加属性挂接了一个MultiBinding把Value与Maximum交给Number2PercentageConverter转换器最终以{0:F0} %如40 %格式显示在进度条内部。也就是说使用 HandyControl 样式后进度条自带百分比文本无需额外布局 TextBlock。默认圆角hc:BorderElement.CornerRadius绑定DefaultCornerRadius资源模板中的Border与指示条均以该值裁剪圆角。轨道色Background使用SecondaryRegionBrush次要区域画刷与PrimaryBrush主题色形成明暗对比。不定状态动画模板内置IsIndeterminate触发器——当IsIndeterminateTrue时隐藏指示条与高光矩形播放一个 ScaleX RenderTransformOrigin 的无限循环动画形成流动的模糊色块效果。语义色变体Success / Info / Warning / Danger文档给出的ProgressBarSuccess、ProgressBarInfo、ProgressBarWarning、ProgressBarDanger四个变体源码实现极其简洁——它们全部BasedOn基础样式只重写一个ForegroundStyle x:KeyProgressBarSuccess BasedOn{StaticResource ProgressBarBaseStyle} TargetTypeProgressBar Setter PropertyForeground Value{DynamicResource SuccessBrush}/ /Style因为基础模板中指示条Indicator的填充色就是Foreground所以只需要更换画刷颜色即可派生全新配色的进度条这就是BasedOn继承体系的威力。对应的语义画刷定义在 Brushes.xaml即PrimaryBrush / SuccessBrush / InfoBrush / WarningBrush / DangerBrush等它们随 HandyControl 的皮肤系统默认、暗色、紫罗兰等自动切换。条纹进度条家族DrawingBrush 平铺的艺术条纹样式家族ProgressBarPrimaryStripe及四个语义色变体都基于ProgressBarStripeBaseStyle其模板与基础样式不同没有百分比文字而是在指示条外包了一层Decorator并且注册了FrameworkElement.Loaded事件触发器加载后立即启动一个RepeatBehaviorForever的TranslateTransform.X线性动画0 → 21让条纹沿 X 轴持续向右流动ProgressBarBaseStyle.xaml。真正的条纹纹理来自Foreground的DrawingBrush以主题色条纹为例ProgressBar.xamlSetter PropertyForeground Setter.Value DrawingBrush Viewport0,0,20,32 TileModeTile ViewportUnitsAbsolute StretchNone DrawingBrush.Transform TransformGroup RotateTransform Angle20/ TranslateTransform X0/ /TransformGroup /DrawingBrush.Transform DrawingBrush.Drawing GeometryDrawing GeometryDrawing.Brush LinearGradientBrush EndPoint1,0 StartPoint0,0 GradientStop Color{DynamicResource DarkPrimaryColor} Offset0/ GradientStop Color{DynamicResource DarkPrimaryColor} Offset0.5/ GradientStop Color{DynamicResource BackgroundColor} Offset0.5/ GradientStop Color{DynamicResource BackgroundColor} Offset1/ /LinearGradientBrush /GeometryDrawing.Brush GeometryDrawing.Geometry RectangleGeometry Rect0,0,20,32/ /GeometryDrawing.Geometry /GeometryDrawing /DrawingBrush.Drawing /DrawingBrush /Setter.Value /Setter解读这个纹理画刷Viewport0,0,20,32TileModeTileViewportUnitsAbsolute以 20×32 像素为单元在水平方向无限平铺RotateTransform Angle20将平铺单元旋转 20°产生斜条纹单元内的LinearGradientBrush以DarkXxxColor深色与BackgroundColor背景色各占半格渐变形成明暗相间的条纹颜色。因此五种条纹样式Primary/Success/Info/Warning/Danger本质是同一套平铺模板换了不同的深色资源其中ProgressBarPrimaryStripe使用DarkPrimaryColor其余分别对应DarkSuccessColor / DarkInfoColor / DarkWarningColor / DarkDangerColor。ProgressBarFlat4 像素扁平细条ProgressBarFlat与前两类完全不同它不 BasedOn 任何样式自带完整模板ProgressBar.xamlStyle x:KeyProgressBarFlat TargetTypeProgressBar Setter PropertyHeight Value4/ Setter PropertyBackground Value{DynamicResource SecondaryRegionBrush}/ Setter PropertyForeground Value{DynamicResource PrimaryBrush}/ ... /Style其模板极简hc:SimplePanel中只有轨道矩形、指示条和动画矩形Height4的细条形态适合做加载进度条或顶部进度指示。它同样支持IsIndeterminateScaleX 从 0.25 滑动的无限动画与OrientationVertical通过RotateTransform Angle-90旋转 90° 实现竖向。完整示例一套 XAML 跑通全部样式以下示例完整对应文档案例并补充了Maximum与IsIndeterminate的用法可直接在任意引用 HandyControl 资源字典的窗口中运行StackPanel Margin20 TextBlock Text默认样式/TextBlock ProgressBar Value40/ProgressBar /StackPanel StackPanel Margin20 TextBlock TextProgressBarSuccess/TextBlock ProgressBar Style{DynamicResource ProgressBarSuccess} Value40/ProgressBar /StackPanel StackPanel Margin20 TextBlock TextProgressBarInfo/TextBlock ProgressBar Style{DynamicResource ProgressBarInfo} Value40/ProgressBar /StackPanel StackPanel Margin20 TextBlock TextProgressBarWarning/TextBlock ProgressBar Style{DynamicResource ProgressBarWarning} Value40/ProgressBar /StackPanel StackPanel Margin20 TextBlock TextProgressBarDanger/TextBlock ProgressBar Style{DynamicResource ProgressBarDanger} Value40/ProgressBar /StackPanel StackPanel Margin20 TextBlock TextProgressBarPrimaryStripe/TextBlock ProgressBar Style{DynamicResource ProgressBarPrimaryStripe} Value40/ProgressBar /StackPanel StackPanel Margin20 TextBlock TextProgressBarSuccessStripe/TextBlock ProgressBar Style{DynamicResource ProgressBarSuccessStripe} Value40/ProgressBar /StackPanel StackPanel Margin20 TextBlock TextProgressBarInfoStripe/TextBlock ProgressBar Style{DynamicResource ProgressBarInfoStripe} Value40/ProgressBar /StackPanel StackPanel Margin20 TextBlock TextProgressBarWarningStripe/TextBlock ProgressBar Style{DynamicResource ProgressBarWarningStripe} Value40/ProgressBar /StackPanel StackPanel Margin20 TextBlock TextProgressBarDangerStripe/TextBlock ProgressBar Style{DynamicResource ProgressBarDangerStripe} Value40/ProgressBar /StackPanel StackPanel Margin20 TextBlock TextProgressBarFlat/TextBlock ProgressBar Style{DynamicResource ProgressBarFlat} Value40/ProgressBar /StackPanel注意事项使用DynamicResource而非StaticResource引用样式可以跟随皮肤主题色动态切换当Value超过默认的Maximum100时务必显式设置Maximum否则进度将截断在 100%需要不确定进度如等待加载时设置IsIndeterminateTrue此时忽略Value。进阶玩法竖向进度条与源码级自定义仓库的官方演示工程 NativeProgressBarDemo.xaml 展示了这些样式的更多实战用法其中包括竖向布局ProgressBar Style{StaticResource ProgressBarSuccess} Value40 OrientationVertical Width20/ ProgressBar Style{StaticResource ProgressBarPrimaryStripe} Value120 Maximum200 OrientationVertical Width20/ ProgressBar Style{StaticResource ProgressBarFlat} Value110 Maximum200 IsIndeterminateTrue OrientationVertical Width4/竖向时基础样式与条纹样式均通过模板触发器将根元素LayoutTransform旋转 -90° 实现只需指定Width控制条宽即可。如需自定义颜色、圆角或其它效果文档给出的建议是参考 ProgressBar.xaml 自行派生新样式。典型做法有两种换色BasedOn{StaticResource ProgressBarBaseStyle}后重写Foreground例如Value{DynamicResource 你的画刷}改圆角在自定义样式中覆盖hc:BorderElement.CornerRadius因为模板通过TemplatedParent绑定读取该附加属性无需重写整个模板完全重做从ProgressBarFlat的模板结构入手复制ControlTemplate后修改Storyboard的RepeatBehavior、关键帧或旋转角度即可实现自定义动画节奏的条纹/扁平进度条。所有样式定义均集中在 ProgressBar.xaml基础模板位于 ProgressBarBaseStyle.xaml配合 Brushes.xaml 中的语义画刷资源即可在完全掌握配色来源的前提下构建属于自己的进度条视觉体系。赞分享UI组件桌面应用【免费下载链接】HandyControlContains some simple and commonly used WPF controls项目地址https://gitcode.com/gh_mirrors/ha/HandyControl点击查看免费下载相关推荐Flet ProgressBar 进度条控件详解从 determinate 到 Material 3 样式定制Flet ProgressBar 进度条控件详解从 determinate 到 Material 3 样式定制 本指南围绕 Flet 官方文档 website前端跨平台桌面应用移动开发一人身兼开发团队全角色用ChatDev把活儿分给一群AI智能体一人身兼开发团队全角色用ChatDev把活儿分给一群AI智能体 写应用时你其实是在一个人扮演整个团队 如果你有过自己写个小应用的经历大概率体会过这种拧人工智能AI Agent多智能体Agent 工作流后端前端低代码python-prompt-toolkit 进度条ProgressBar完全指南从基础用法到自定义格式化python prompt toolkit 进度条ProgressBar完全指南从基础用法到自定义格式化 本文以 python prompt toolkiCLI上一篇RevokeMsgPatcher 防撤回补丁完整指南安装、原理与多开一次生效下一篇ARIA无障碍API映射指南核心AAM、HTML AAM和SVG AAM详解创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表