WPF实现环（圆）形进度条

Posted 2021-06-30 dotNET跨平台

     WPF开发者QQ群： 340500857  | 微信群 -> 进入公众号主页 加入组织

“ 前言，接着上一篇圆形菜单。”

欢迎转发、分享、点赞、在看，谢谢~。  

01

—

效果预览

效果预览（更多效果请下载源码体验）：

02

—

代码如下

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

源码地址

github：https://github.com/yanjinhuagood/WPFDevelopers.git

gitee：https://gitee.com/yanjinhua/WPFDevelopers.git

WPF开发者QQ群： 340500857 

blogs： https://www.cnblogs.com/yanjinhua

Github：https://github.com/yanjinhuagood

出处：https://www.cnblogs.com/yanjinhua

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

转载请著名作者 出处 https://github.com/yanjinhuagood