WPF實現環（圓）形進度條

阿新 • • 發佈：2021-07-05

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>