欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

WPF实现环(圆)形进度条

程序员文章站 2022-06-19 11:43:37
WPF开发者QQ群: 340500857 | 微信群 -> 进入公众号主页 加入组织 每日一笑 对我们宅男宅女来说,休息日就是在家躺着看剧吃东西,累了再睡一觉,才叫休息日!别问我“休息日怎么不出去逛逛!”哪怕走一步!只要出去了!开门了!那就不叫休息日,那是工作日! 前言 需要实现环(圆)形进度条。 ......

wpf开发者qq群: 340500857  | 微信群 -> 进入公众号主页 加入组织

每日一笑

对我们宅男宅女来说,休息日就是在家躺着看剧吃东西,累了再睡一觉,才叫休息日!别问我“休息日怎么不出去逛逛!”哪怕走一步!只要出去了!开门了!那就不叫休息日,那是工作日!

WPF实现环(圆)形进度条

前言 

      需要实现环(圆)形进度条。

欢迎转发、分享、点赞,谢谢大家~。  

效果预览(更多效果请下载源码体验):

WPF实现环(圆)形进度条

一、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