项目中用到圆形进度条,首先就想到使用 ProgressBar 扩展一个,在园子里找到迷途的小榔头给出的思路和部分代码,自己加以实现。

进度小于60显示红色,大于60则显示绿色。效果如下:

基本思路:

  • 本质上是一个进度条,只是外观有别于矩形进度条,所以需要修改ProgressBar的ControlTemplate。
  • 进度条部分实际是一个扇形,用WPF动态绘出。
  • 要将进度条的值(Value依赖属性)转换为进度条,需要一个Converter。
  • 根据不同的值区间绘制不同的颜色即实现颜色随进度变化。

关键代码:

1. 修改ProgressBar的ControlTemplate。

  

 <ProgressBar Minimum=""
Maximum=""
Value="{Binding SuccessRate, Mode=OneWay}">
<ProgressBar.Template>
<ControlTemplate TargetType="ProgressBar">
<Border Background="{TemplateBinding Value, Converter={StaticResource ValueToProcessConverter}, ConverterParameter=200}"/>
</ControlTemplate>
</ProgressBar.Template>
</ProgressBar>

2. 实现根据值绘制扇形的转换器。

见Demo。

3. 动态设置进度条依赖属性Value。

参考文献

  1. http://www.cnblogs.com/goxmpx/p/3741915.html

源码下载

WPF 实现圆形进度条的更多相关文章

  1. WPF利用动画实现圆形进度条

    原文:WPF利用动画实现圆形进度条 这是我的第一篇随笔,最近因为工作需要,开始学习WPF相关技术,自己想实现以下圆形进度条的效果,逛了园子发现基本都是很久以前的文章,实现方式一般都是GDI实现的,想到 ...

  2. android 自定义控件——(四)圆形进度条

    ----------------------------------↓↓圆形进度条(源代码下有属性解释)↓↓---------------------------------------------- ...

  3. html5 svg 圆形进度条

    html5 svg 圆形进度条 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  4. canvas圆形进度条

    通过定义一个canvas标签, new方法传进ID值,和旋转角度值,即可生成圆形进度条 <!DOCTYPE html> <html lang="en"> & ...

  5. iOS之UI--Quartz2D的入门应用--重绘下载圆形进度条

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  6. Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)

      Android 高手进阶(21)  版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请注明地址:http://blog.csdn.net/xiaanming/article/detail ...

  7. Qt之QRoundProgressBar(圆形进度条)

    简述 QRoundProgressBar类能够实现一个圆形进度条,继承自QWidget,并且有和QProgressBar类似的API接口. 简述 详细说明 风格 颜色 字体 共有函数 共有槽函数 详细 ...

  8. 简单实用的纯CSS百分比圆形进度条插件

    percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...

  9. Android 带进度的圆形进度条

    最近项目有个需求,做带进度从下到上的圆形进度条. 网上查了一下资料,发现这篇博客写得不错http://blog.csdn.net/xiaanming/article/details/10298163 ...

随机推荐

  1. 转载:Centos7 从零编译Nginx+PHP+MySql 序言 一

    这次玩次狠得.除了编译器使用yum安装,其他全部手动编译.哼~ 看似就Nginx.PHP.MySql三个东东,但是它们太尼玛依赖别人了. 没办法,想用它们就得老老实实给它们提供想要的东西. 首先的一些 ...

  2. Windows7安装 .net framework 4.0

    1.首先下载安装包.net framework 4.0点击下载即可 2.安装,双击下载好的安装包

  3. overload、overwrite、override

    1.重载 overload 函数名一样,参数不同(类型.顺序,与返回值类型无关),重载的函数一般在同一个类中 class A { public: void test() {} void test(in ...

  4. codeblocks16.01 中配置Opencv3 姿势

    VS太大安装时间长,考虑到效率问题,可以使用opencv+codeblocks opencv3没有codeblocks版本,需要自己编译,编译过程略. 已编译版本下载地址 http://pan.bai ...

  5. PXE+Kickstart+DHCP+TFTP实现无人值守安装操作系统

    PXE+Kickstart+DHCP+TFTP实现无人值守安装操作系统 PXE + Kickstart PXE的工作流程及配置文件 Kickstart的配置文件 Linux安装大致可以分为2个阶段 第 ...

  6. Eclipse最常用快捷键

    常用快捷键: Ctrl + 1 :快速修复(当编辑器出现红色波浪线时使用此快捷键能快速弹出提示) Ctrl + d :删除当前光标所在的行 Ctrl + z :撤销上一步的操作 Ctrl + y :重 ...

  7. connect/express 的参考

    1.Node.js[5] connect & express简介    对connect中间件的分类比较容易理解. http://www.cnblogs.com/luics/archive/2 ...

  8. 基于TXT文本的简单图书管理系统

    1 ////////////////////////////////////////////////////////////////////////////////////// //SqList.h ...

  9. Bing Test -必应每日壁纸自动换

    今天向大家推荐一个桌面美化类的工具,没错就是自动更换壁纸,而且是精美的必应每日壁纸哦!绿色小巧,开机自启动,设置后每日自动更新你的桌面~ 软件名称:Bing Test 链接: http://pan.b ...

  10. [原创]MvvmLight中用IDialogService替代DialogMessage的用法

    在新版的MvvmLight中,DialogMessage被标注为已过时,需要用IDialogService来替代,IDialogService的具体用法如下: 先在主窗体中实现IDialogServi ...