WPF实现环（圆）形进度条

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