WPF实现环(圆)形进度条
程序员文章站
2022-03-06 15:48:39
WPF开发者QQ群: 340500857 | 微信群 -> 进入公众号主页 加入组织 每日一笑 对我们宅男宅女来说,休息日就是在家躺着看剧吃东西,累了再睡一觉,才叫休息日!别问我“休息日怎么不出去逛逛!”哪怕走一步!只要出去了!开门了!那就不叫休息日,那是工作日! 前言 需要实现环(圆)形进度条。 ......
wpf开发者qq群: 340500857 | 微信群 -> 进入公众号主页 加入组织
每日一笑
对我们宅男宅女来说,休息日就是在家躺着看剧吃东西,累了再睡一觉,才叫休息日!别问我“休息日怎么不出去逛逛!”哪怕走一步!只要出去了!开门了!那就不叫休息日,那是工作日!
前言
需要实现环(圆)形进度条。
欢迎转发、分享、点赞,谢谢大家~。
效果预览(更多效果请下载源码体验):
一、circularprogressbar.cs代码如下:
using system; using system.windows; using system.windows.controls; using system.windows.media.animation; namespace wpfcircularprogressbar { public partial class circularprogressbar : progressbar { public circularprogressbar() { this.valuechanged += circularprogressbar_valuechanged; } void circularprogressbar_valuechanged(object sender, routedpropertychangedeventargs<double> e) { circularprogressbar bar = sender as circularprogressbar; double currentangle = bar.angle; double targetangle = e.newvalue / bar.maximum * 359.999; doubleanimation anim = new doubleanimation(currentangle, targetangle, timespan.frommilliseconds(500)); bar.beginanimation(circularprogressbar.angleproperty, anim, handoffbehavior.snapshotandreplace); } public double angle { get { return (double)getvalue(angleproperty); } set { setvalue(angleproperty, value); } } public static readonly dependencyproperty angleproperty = dependencyproperty.register("angle", typeof(double), typeof(circularprogressbar), new propertymetadata(0.0)); public double strokethickness { get { return (double)getvalue(strokethicknessproperty); } set { setvalue(strokethicknessproperty, value); } } public static readonly dependencyproperty strokethicknessproperty = dependencyproperty.register("strokethickness", typeof(double), typeof(circularprogressbar), new propertymetadata(10.0)); public double brushstrokethickness { get { return (double)getvalue(brushstrokethicknessproperty); } set { setvalue(brushstrokethicknessproperty, value); } } public static readonly dependencyproperty brushstrokethicknessproperty = dependencyproperty.register("brushstrokethickness", typeof(double), typeof(circularprogressbar), new propertymetadata(1.0)); } }
二、style.xaml代码如下:
<style targettype="local:circularprogressbar"> <setter property="maximum" value="100"/> <setter property="strokethickness" value="10"/> <setter property="foreground" value="gray"/> <setter property="background" value="#1fa7fc"/> <setter property="width" value="100"/> <setter property="height" value="100"/> <setter property="template"> <setter.value> <controltemplate targettype="local:circularprogressbar"> <viewbox> <canvas width="{templatebinding width}" height="{templatebinding height}"> <path stroke="{templatebinding borderbrush}" strokethickness="{templatebinding brushstrokethickness}"> <path.data> <pathgeometry> <pathfigure startpoint="50,0"> <arcsegment sweepdirection="clockwise" size="50,50" point="49.999127335374,7.61543361704753e-09" islargearc="true"> </arcsegment> </pathfigure> </pathgeometry> </path.data> </path> <path stroke="{templatebinding background}" strokethickness="{templatebinding strokethickness}"> <path.data> <pathgeometry> <pathfigure startpoint="50,0"> <arcsegment sweepdirection="clockwise" size="50,50" point="{binding path=angle, converter={staticresource prconverter}, relativesource={relativesource findancestor, ancestortype=progressbar}}" islargearc="{binding path=angle, converter={staticresource islargeconverter}, relativesource={relativesource findancestor, ancestortype=progressbar}}"> </arcsegment> </pathfigure> </pathgeometry> </path.data> </path> <border width="{templatebinding width}" height="{templatebinding height}"> <textblock foreground="{templatebinding foreground}" horizontalalignment="center" verticalalignment="center" text="{binding path=value, stringformat={}{0}%, relativesource={relativesource templatedparent}}" fontsize="{templatebinding fontsize}"/> </border> </canvas> </viewbox> </controltemplate> </setter.value> </setter> </style>
三、mainwindow.xaml代码如下:
<window x:class="wpfcircularprogressbar.mainwindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:wpfcircularprogressbar" mc:ignorable="d" title="mainwindow" height="450" width="800"> <grid> <uniformgrid> <local:circularprogressbar background="#21ba9d" value="{binding elementname=cirularslider,path=value}" brushstrokethickness="2" borderbrush="lightgray"/> <local:circularprogressbar background="#e14d5f" borderbrush="#42abac" value="{binding elementname=cirularslider,path=value}" brushstrokethickness="4"/> <local:circularprogressbar background="#1fa7fc" borderbrush="#d6d6d6" value="{binding elementname=cirularslider,path=value}" brushstrokethickness="10" strokethickness="10" foreground="black"/> <local:circularprogressbar value="{binding elementname=cirularslider,path=value}"/> <slider minimum="0" maximum="100" x:name="cirularslider" issnaptotickenabled="true" verticalalignment="center" value="10"/> <image source="gzh.png"/> </uniformgrid> </grid> </window>
更多教程欢迎关注微信公众号:
wpf开发者qq群: 340500857
blogs: https://www.cnblogs.com/yanjinhua/p/14345136.html
源码github:https://github.com/yanjinhuagood/wpfdevelopers.git
gitee:https://gitee.com/yanjinhua/wpfdevelopers.git
上一篇: 哪些站点命中算法?2016年百度搜索各大算法大盘点
下一篇: 站群的8种暴利赚钱方法分享