WPF实现环（圆）形进度条

  • A+
所属分类：.NET技术
摘要

WPF开发者QQ群： 340500857  | 微信群 -> 进入公众号主页 加入组织 每日一笑
便宜好用的国外VPS推荐

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实现环（圆）形进度条

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

便宜好用的国外VPS推荐