?? ? 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

總結

以上是生活随笔為你收集整理的WPF实现环（圆）形进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。