Loading

WPF实现环(圆)形进度条

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>

更多教程欢迎关注微信公众号:

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

posted @ 2021-07-05 17:37  驚鏵  阅读(1901)  评论(2编辑  收藏  举报