1.说明:在WPF中,文件下载时需要显示下载进度,由于系统自带的条型进度条比较占用空间,改用圆形的进度条,需要在DrawingVisual上呈现。

运行的效果如图:

               private Point GetPointOnCir(Point CenterPoint, double r, double angel){Point p = new Point();p.X = Math.Sin(angel * Math.PI / 180) * r + CenterPoint.X;p.Y = CenterPoint.Y - Math.Cos(angel * Math.PI / 180) * r;return p;}private Geometry drawingArc(Point bigCirclefirstPoint, Point bigCirclesecondPoint, Point smallCirclefirstPoint, Point smallCirclesecondPoint, double bigCircleRadius, double smallCircleRadius,bool  isLargeArc){PathFigure pathFigure = new PathFigure { IsClosed = true };pathFigure.StartPoint = bigCirclefirstPoint;pathFigure.Segments.Add(new ArcSegment{Point = bigCirclesecondPoint,IsLargeArc = isLargeArc,Size = new Size(bigCircleRadius, bigCircleRadius),SweepDirection = SweepDirection.Clockwise});pathFigure.Segments.Add(new LineSegment { Point = smallCirclesecondPoint });pathFigure.Segments.Add(new ArcSegment{Point = smallCirclefirstPoint,IsLargeArc = isLargeArc,Size = new Size(smallCircleRadius, smallCircleRadius),SweepDirection = SweepDirection.Counterclockwise});PathGeometry pathGeometry = new PathGeometry();pathGeometry.Figures.Add(pathFigure);return pathGeometry;}//根据已保存的大小和文件总大小来计算下载进度百分比private Geometry GetGeometry(){bool isLargeArc =false;double percent = double.Parse(Convert.ToString(savedSize)) / double.Parse(Convert.ToString(fileSize));PercentString = string.Format("{0}%",Math.Round(percent*100,0));double angel = percent * 360D;if(angel>180)isLargeArc=true;//double angel = 45;double bigR = 16;double smallR = 13;Point centerPoint = vl.StartPoint;//new Point(100, 300);Point firstpoint = GetPointOnCir(centerPoint, bigR, 0);Point secondpoint = GetPointOnCir(centerPoint, bigR, angel);Point thirdpoint = GetPointOnCir(centerPoint, smallR, 0);Point fourpoint = GetPointOnCir(centerPoint, smallR, angel);return drawingArc(firstp, secondpoint, thirdpoint, fourpoint, bigR, smallR, isLargeArc);}

画圆形的进度条,实际上是动态画两个同心圆,根据文件保存的百分比来计算画弧形的角度的大小,需要7个参数:大圆的半径bigR 、小圆的半径smallR 、同心圆的圆心centerPoint 、大圆的起始点firstpoint 、大圆的结束点secondpoint 、小圆的起始点thirdpoint、小圆的结束点fourpoint

最后需要使用DrawingContext把圆给画出来:

                public Visual drawShape(){DrawingVisual drawingWordsVisual = new DrawingVisual();DrawingContext drawingContext = drawingWordsVisual.RenderOpen();try{if (savedSize != fileSize){
                                        drawingContext.DrawEllipse(null, new Pen(Brushes.Gray, 3), vl.StartPoint, 13, 13);drawingContext.DrawGeometry(vs.VisualBackgroundBrush, vs.VisualFramePen, GetGeometry());FormattedText formatWords = new FormattedText(PercentString, System.Globalization.CultureInfo.CurrentCulture, FlowDirection.LeftToRight, new Typeface(vs.WordsFont.Name), vs.WordsFont.Size, currentStyle.VisualBackgroundBrush);formatWords.SetFontWeight(FontWeights.Bold);Point startPoint = new Point(vl.StartPoint.X - formatWords.Width / 2, vl.StartPoint.Y - formatWords.Height / 2);drawingContext.DrawText(formatWords, startPoint);}else{drawingContext.DrawEllipse(null, new Pen(Brushes.Green, 3), vl.StartPoint, 16, 16);FormattedText formatWords = new FormattedText("Open", System.Globalization.CultureInfo.CurrentCulture, FlowDirection.LeftToRight, new Typeface(vs.WordsFont.Name), vs.WordsFont.Size, Brushes.Red);formatWords.SetFontWeight(FontWeights.Bold);Point startPoint = new Point(vl.StartPoint.X - formatWords.Width / 2, vl.StartPoint.Y - formatWords.Height / 2);drawingContext.DrawText(formatWords, startPoint);}}catch (Exception ex){new SaveExceptionInfo().SaveLogAsTXTInfoex(ex.Message);}finally{drawingContext.Close();}return drawingWordsVisual;}

转载于:https://www.cnblogs.com/goxmpx/p/3741915.html

在DrawingVisual上绘制圆形的进度条,类似于IOS系统风格。相关推荐

  1. vue 圆形百分比进度条_快速构建一个圆形的进度条

    在一些特别生的网站上,用户需要一个可视化的是示,以表明网站资源仍然在加载.从Spinner到Skeleton屏幕有不同的方法来解决这类的用户体验效果. 如果我们使用的是开箱即用的解决方案,它为我们提供 ...

  2. JS框架_(Progress.js)圆形动画进度条

    百度云盘 传送门 密码: 6mcf 圆形动画进度条效果: <!DOCTYPE html> <html lang="en"> <head>< ...

  3. 如何让自定义控件的字体瘦身(优化圆形圆点进度条)

    一.开源 源码及demo下载 二.产品经理来了 本以为写好的圆形圆点进度条没问题了,因为写前篇博客时优化了一些细节.那位提需求的童鞋下班后呼叫我,说UI有点问题:我的百分比字体偏壮,没原版的苗条(告诉 ...

  4. android仿微博头像_Android 自定义 View 集锦|自定义圆形旋转进度条,仿微博头像加载效果...

    微博 App 的用户头像有一个圆形旋转进度条的加载效果,看上去效果非常不错,如图所示: 据说 Instagram 也采用了这种效果.最近抽空研究了一下,最后实现的效果是这样: 基本上能模拟出个大概,代 ...

  5. 圆形百分比进度条效果

    一.前言 最近有点懈怠啊,没怎么整理发布博客.今天写篇文章和大家分享一个常用的效果,圆形百分比进度条.前段时间我有个页面需要该效果,就在网上看了下,实现方式有好几种,我找了一种比较好实现的给大家一步步 ...

  6. PHP进度条 小程序,用微信小程序实现一个圆形的进度条

    随着小程序的热度下降,更多的人已经开始静下心来开发微信小程序了,最近在开发一款微信小程序的过程中遇到了一个问题:如何用微信小程序实现一个圆形的进度条?整理一番后,记录下来与大家共享. 代码实现的思路原 ...

  7. 超赞圆形动画进度条,爱了爱了(使用HTML、CSS和bootstrap框架)

    使用HTML和CSS的圆形动画进度条 使用HTML和CSS的圆形动画进度条 步骤1:创建进度栏的结构 步骤2:使用CSS代码设计圆形 步骤3:在进度栏中添加加载动画 步骤4:添加其他颜色以使加载动画更 ...

  8. 在html中怎么用圆形渐变,css怎么实现圆形渐变进度条效果

    css怎么实现圆形渐变进度条效果 发布时间:2021-03-17 10:29:57 来源:亿速云 阅读:129 作者:小新 这篇文章给大家分享的是有关css怎么实现圆形渐变进度条效果的内容.小编觉得挺 ...

  9. R语言ggplot2可视化在散点图中的每个点上绘制两个错误条:常见的是垂直错误条,它对应于Y值点上的错误(error bar),添加与X轴(水平)相关的错误条(error bar)

    R语言ggplot2可视化在散点图中的每个点上绘制两个错误条:常见的是垂直错误条,它对应于Y值点上的错误(error bar),添加与X轴(水平)相关的错误条(error bar) 目录

最新文章

  1. (Matlab)从已知向量中随机提取若干元素
  2. [浅谈 演示] 你所不知道的HTML - 从 XHTML2 到 HTML5 (1)
  3. 《Python3网络爬虫开发实战(第二版)》上市了!!!!
  4. brew install php55redis,Mac下安装LNMP环境
  5. Python打包分发工具setuptools简介
  6. java ftp上传超时_有关java的ftp上传文件时断网的问题
  7. java从外部得到数据_java – 如何实现Observer以从侦听器获取数据?
  8. 校门外的树和memset
  9. 第3章 形式语言与自动机
  10. C语言经典题目50题
  11. K3 LEDE踩坑专题
  12. 计算机画图卡通,windows画图工具怎么画卡通头像?
  13. lunix内核—死锁的四个必要条件和解决办法
  14. android 颜色透明度16进制换算
  15. windows批处理脚本bat命令解析【6】常用命令整理
  16. 2017广东工业大学程序设计竞赛决赛 E-倒水(Water) (二进制的应用) + H-tmk买礼物(dp思想)
  17. 你想制作一款属于自己的游戏吗?
  18. 网站图片优化SEO方法有哪些
  19. python/gdal处理遥感影像(读取、投影转换、裁剪、建立图像金字塔等)
  20. hadoop2和hadoop3的比较

热门文章

  1. Oracle 安装 网络配置 警告
  2. SQL Server 2000 JDBC驱动的完整安装及测试说明
  3. 使用WEUI uploader上传图片
  4. Springboot 项目中 xml文件读取yml 配置文件
  5. 12-1 12 防盗链 访问控制 php解析 代理
  6. 1970“变种”bug连WiFi热点iOS设备会变砖?
  7. [LeetCode]--71. Simplify Path
  8. paper 35 :交叉验证(CrossValidation)方法思想
  9. 基于KVM的虚拟化研究及应用
  10. HDU-2159 FATE 二维背包