WPF 控件库——仿制Windows10的进度条
原文:WPF 控件库——仿制Windows10的进度条

一、其实有现成的

  先来看看Windows10进度条的两种模式:

 

  网上有不少介绍仿制Windows10进度条的文章,也都实现了不错的效果。而我再开一文的原因是觉得如果在这基础上添加一些功能,比如圆点的数量,圆点的大小等等,效果可能会更好一些。接触过UWP的朋友应该知道,其框架中自带了进度条控件,以 ProgressRing 为例,通过Blend,我们可以获取到控件的XAML,以下是部分截图:

 

  粗略一看,只要稍作修改便能用到WPF中——我们几乎可以什么都不做!

二、添加功能

  如果要更改圆点的数量,圆点的大小或者圆点的移动速度,我们该如何实现呢?继承章节一中的XAML,并根据所需调整模板就显得太麻烦了,这会让我们的样式文件显得臃肿不堪,所以采用纯粹的C#代码来实现它或许比较明智。不过之前的XAML也不是一无是处,至少它给出了环形进度条的关键帧动画的构成,这些信息对我们来说很重要,免去了我们自己去分析的步骤。

  现在我们的主要工作就是让写死的关键帧能够通过属性灵活配置,所以我们可能需要先编码一份进度条的基类( LoadingBase ),以提取两种类型进度条的共性。基类中定义8个属性,分别是 IsRunning 、 DotCount 、 DotInterval 、 DotBorderBrush 、 DotBorderThickness 、 DotDiameter 、 DotSpeed 、 DotDelayTime ,它们的含义已经是自注释的,不必赘述。而在环形进度条中,还有另外两个属性: DotOffSet 和 NeedHidden ,分别表示圆点整体的位置偏移和在运动中是否需要隐藏圆点。

三、关键帧动画

  最后一步就是用C#代码实现关键帧动画,不过得先有米才能做饭,故而需要先创建圆点:

 1 protected Ellipse CreateEllipse(int index)
 2         {
 3             var ellipse = new Ellipse();
 4             ellipse.SetBinding(WidthProperty, new Binding("DotDiameter") {Source = this});
 5             ellipse.SetBinding(HeightProperty, new Binding("DotDiameter") {Source = this});
 6             ellipse.SetBinding(Shape.FillProperty, new Binding("Foreground") {Source = this});
 7             ellipse.SetBinding(Shape.StrokeThicknessProperty, new Binding("DotBorderThickness") {Source = this});
 8             ellipse.SetBinding(Shape.StrokeProperty, new Binding("DotBorderBrush") {Source = this});
 9             return ellipse;
10         }

  上面的方法在进度条基类中实现,仅仅是用相关的属性初始化了我们的原材料:圆点。由于环形进度条在X、Y轴方向都有移动,所以为了方便,我们可以考虑在圆点外面再包一层 Border 作为看不见的壳,我们将圆点与壳底部对齐,现在只要让壳绕中心旋转就基本实现了目标,下面是环形进度条1个点到5个点带壳的示意图:

  想一想,如果没有这层壳,我们又有什么替代方法,这些方法是否都是极为方便的?可能没有这层壳,就需要去琢磨怎么改变圆点的 RenderTransformOrigin ,好让它们看起来都是围绕一个点旋转的,即使改变了进度条整体的尺寸。套壳的代码如下:

 1 private Border CreateBorder(int index)
 2         {
 3             var ellipse = CreateEllipse(index);
 4             ellipse.HorizontalAlignment = HorizontalAlignment.Center;
 5             ellipse.VerticalAlignment = VerticalAlignment.Bottom;
 6             var rt = new RotateTransform
 7             {
 8                 Angle = -DotInterval * index
 9             };
10             var myTransGroup = new TransformGroup();
11             myTransGroup.Children.Add(rt);
12             var border = new Border
13             {
14                 RenderTransformOrigin = new Point(0.5, 0.5),
15                 RenderTransform = myTransGroup,
16                 Child = ellipse,
17                 Visibility = NeedHidden ? Visibility.Collapsed : Visibility.Visible
18             };
19             border.SetBinding(WidthProperty, new Binding("Width") { Source = this });
20             border.SetBinding(HeightProperty, new Binding("Height") { Source = this });
21
22             return border;
23         }

  套壳代码除了套壳和相关的初始化,最重要的是19和20行的宽高绑定,这是让圆点旋转中心始终唯一的关键。有了以上的准备,我们终于可以开始for循环了:

 1 //定义动画
 2 Storyboard = new Storyboard
 3 {
 4     RepeatBehavior = RepeatBehavior.Forever
 5 };
 6
 7 for (var i = 0; i < DotCount; i++)
 8 {
 9     //在这里创建圆点
10 }

  下面就是最核心的关键帧动画,通过之前用Blend提取出来的XAML,我们可以看到它使用了 SplineDoubleKeyFrame ,这会涉及三次贝塞尔曲线的控制点,考虑到易用性,我们会用 LinearDoubleKeyFrame 和 EasingDoubleKeyFrame 代替。在XAML中我们最关心的关键字应该是角度,在时间片的哪部分,圆点应该在哪儿,而又在什么时候,圆点应该会消失,我们只要随意截取两个点的关键帧就能获得以上所有信息:

  上面两张分别是圆点1和2透明度和位置的关键帧截图,通过两个点我们完全可以推断所有点。出于个人喜好,我将透明度替换成了 Visibility 的切换,所以还会引入 DiscreteObjectKeyFrame 。篇幅原因,我们直接总结分析结果:

  • 一开始所有点都是显示的,但是位置不同,从点1的-110度开始,角度逐个减6;
  • 点1开始运动后,0.167秒(1/6秒)后点2开始运动,所以各点动画延迟时间为1/6秒(这里不太能确定是否和圆点数量有关);
  • 以点1为例,旋转角度随时间变化图如下:

  从上面7张图中可以看出,在一次循环中点1是这样运动的:减速、匀速、加速、减速、匀速、加速,而且与之对应的角度位置也给出了,最后水到渠成,环形进度条就完成了。

四、截图

  通过设置不同的属性,可以实现不同的效果:

  

五、源码

  本文所讨论的进度条源码已经在github开源:https://github.com/NaBian/HandyControl

posted on 2018-07-11 13:14 NET未来之路 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/9293945.html

WPF 控件库——仿制Windows10的进度条相关推荐

  1. Panuon.UI.Silver – 开源C# WPF控件库

    Panuon.UI.Silver – 开源C# WPF控件库 Dotnet9 • 2019年12月13日 22:55 • WPF • 阅读 12145 时间如流水,只能流去不流回! 点赞再看,养成习惯 ...

  2. 《Dotnet9》系列-开源C# WPF控件库2《Panuon.UI.Silver》强力推荐

    国内优秀的WPF开源控件库,Panuon.UI的优化版本.一个漂亮的.使用样式与附加属性的WPF UI控件库,值得向大家推荐使用与学习. 今天站长(Dotnet9,站长网址:https://dotne ...

  3. (四)开源C# WPF控件库《AduSkin – UI》

    微信公众号:[Dotnet9的博客],网站:[Dotnet9],问题或建议:[请网站留言], 如果对您有所帮助:[欢迎赞赏]. https://dotnet9.com 追求极致,永臻完美 A Beau ...

  4. WPF控件库MaterialDesignInXamlToolkit

    WPF控件库MaterialDesignInXamlToolkit 引用 MaterialDesignThemes.Wpf.dll 第一步:安装控件库 Install-Package Material ...

  5. 开源C# WPF控件库强力推荐

    点击上方"Dotnet9"添加关注哦 开源C# WPF控件库及项目推荐 本系列已介绍四款开源C# WPF控件库,其中一款国外的,另三款是国内的,大家如有比较好的开源C# WPF控件 ...

  6. 控件 qml_Flat风格的Qml进度条

    基于Qml的ProgressBar控件修改而成. 进度条代码 import QtQuick 2.0 import QtQuick.Controls 2.0ProgressBar {id: rootpr ...

  7. wpf加载上千张图片部分图片不显示_开源WPF控件库MaterialDesignInXAML推荐

    (给DotNet加星标,提升.Net技能) 转自:沙漠之狐耶dotnet9.com/?p=2180 前言 介绍一个开源的C# WPF开源控件库,非常漂亮,重点是开源哦 WPF做桌面开发是很有优势的,除 ...

  8. 开源WPF控件库MaterialDesignInXAML推荐

    今天介绍一个开源的C# WPF开源控件库,非常漂亮,重点是开源哦 WPF做桌面开发是很有优势的,除了微软自带的控件外,还有很多第三方的控件库,比如收费的Dev Express For WPF.Tele ...

  9. 很棒的WPF控件库 Newbeecoder.UI

    Newbeecoder.UI是一个强大的WPF基于MVVM框架和控件库实用程序.它支持窗口边框阴影,窗口圆角,包含许多优雅的控件.它让开发人员更高效.更快地创建漂亮的WPF构建应用程序.它支持从4.0 ...

最新文章

  1. CentOS7.5下yum安装MySQL8图文教程
  2. CTF---Web入门第十三题 拐弯抹角
  3. 云计算&大数据 “下一幕”智能变革之力
  4. python写一个表白程序-用Python写一个表白神器让你脱单
  5. OVS vswitchd启动(三十六)
  6. poj2976Dropping tests (二分搜索+还是涉及昨天遇见的o1分数规划)
  7. linkedlist(c语言_简单实现)
  8. C语言 · 交换Easy
  9. Oracle 安装时候的fs.aio-max-nr参数
  10. vue中$watch源码阅读笔记
  11. 消防给水及消火栓系统技术规范_对于高位消防水箱《消防给水及消火栓系统技术规范》是如何规定...
  12. realtekrtl8139网卡驱动 linux,Realtek网卡驱动官方版-瑞昱网卡驱动下载-PC下载网
  13. 2022年最新餐饮外卖行业市场研报合集(共45份)
  14. 移动端获取手机网络信息
  15. 〔首届CSDN.南京区程序员聚会〕正式报名情况[每日更新7月19日 17:30]
  16. 解决windows有线连接不上问题
  17. 计算机开机出现ROM,电脑无法开机并显示EXITING INTEL PXE ROM如何解决
  18. 什么是极大似然估计?
  19. 覃卫平java,湖南省职业教育“十一五”省级重点建设项目验收通过项目.doc
  20. Sencha Architect打开闪退问题修复

热门文章

  1. android炫酷动画代码,Android高级UI特效仿直播点赞动画效果
  2. 渗透测试之通过代码审计打点
  3. 学习《apache源代码全景分析》之模块化体系结构摘录
  4. R绘图 vs Python绘图(散点图、折线图、直方图、条形图、箱线图、饼图、热力图、蜘蛛图)
  5. SparkContext转化为JavaSparkContext
  6. MySQL事务隔离级别和Spring事务关系介绍
  7. OScached页面缓存的入门使用
  8. JVM类加载机制详解(一)JVM类加载过程
  9. 【EASYDOM系列教程】之创建页面元素
  10. h5常见问题汇总及解决方案