WPF圆形进度条制作

快来打我* 2022-08-20 10:27 332阅读 0赞

WPF和Winform都为我们提供了ProgressBar进度条。但是这种死板的进度条已经不能满足用户对美的要求了。因此，本篇文章要为大家展示一种圆形进度条。

为了方便进度条的复用，我们将进度条制作成用户控件。

# 代码展示： #

## 圆形进度条用户控件的制作： ##

### LoadingWait.xaml ###

### LoadingWait.xaml.cs ###

#region 参数
            //     集成到按指定时间间隔和指定优先级处理的 System.Windows.Threading.Dispatcher 队列中的计时器。
            private readonly DispatcherTimer animationTimer;
            #endregion
    
            #region 构造方法
            /// <summary>
            /// 构造方法
            /// </summary>
            public LoadingWait()
            {
                InitializeComponent();
                animationTimer = new DispatcherTimer(DispatcherPriority.ContextIdle, Dispatcher);
                animationTimer.Interval = new TimeSpan(0, 0, 0, 0, 75); //指定时间间隔
            }
            #endregion
    
            #region 属性
            #region 得到要显示的提示信息
            /// <summary>
            /// 得到要显示的提示信息
            /// </summary>
            public string TipContent
            {
                get { return (string)GetValue(TipContentProperty); }
                set { SetValue(TipContentProperty, value); }
            }
    
            public static readonly DependencyProperty TipContentProperty = DependencyProperty.Register("TipContent", typeof(string), typeof(LoadingWait), new UIPropertyMetadata("正在处理..."));
            #endregion
    
            #region 按钮的名称--例如：取消
            /// <summary>
            /// 按钮的名称
            /// </summary>
            public object InnerContent
            {
                get { return (object)GetValue(InnerContentProperty); }
                set { SetValue(InnerContentProperty, value); }
            }
    
            // Using a DependencyProperty as the backing store for InnerContent.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty InnerContentProperty =
                DependencyProperty.Register("InnerContent", typeof(object), typeof(LoadingWait), new UIPropertyMetadata(null));
            #endregion
    
            #region 按钮的显示或隐藏
            /// <summary>
            /// 按钮的显示与隐藏
            /// </summary>
            public Visibility InnerContentVisibility
            {
                get { return (Visibility)GetValue(InnerContentVisibilityProperty); }
                set { SetValue(InnerContentVisibilityProperty, value); }
            }
    
            // Using a DependencyProperty as the backing store for InnerContentVisibility.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty InnerContentVisibilityProperty =
                DependencyProperty.Register("InnerContentVisibility", typeof(Visibility), typeof(LoadingWait), new UIPropertyMetadata(Visibility.Collapsed));
            #endregion
            #endregion
    
            #region 方法
            /// <summary>
            /// 开始方法
            /// </summary>
            private void Start()
            {
                //修改光标的样式，为等待状态
                this.Cursor = Cursors.Wait;
                //超过计时器间隔时发生。
                animationTimer.Tick += HandleAnimationTick;
                animationTimer.Start();
            }
    
            /// <summary>
            /// 结束方法
            /// </summary>
            private void Stop()
            {
                animationTimer.Stop();
                //修改光标的样式，为箭头
                this.Cursor = Cursors.Arrow;
                animationTimer.Tick -= HandleAnimationTick;
            }
    
            /// <summary>
            /// 超过计时器间隔时发生。
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="e"></param>
            private void HandleAnimationTick(object sender, EventArgs e)
            {
                //设置旋转角度
                SpinnerRotate.Angle = (SpinnerRotate.Angle + 36) % 360;
            }
    
            /// <summary>
            /// Canvas加载时
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="e"></param>
            private void HandleLoaded(object sender, RoutedEventArgs e)
            {
                //圆周长就是：C = π * d 或者C=2*π*r（其中d是圆的直径，r是圆的半径）
                const double offset = Math.PI;  //π
                const double step = Math.PI * 2 / 10.0;
    
                SetPositin(C0, offset, 0.0, step);
                SetPositin(C1, offset, 1.0, step);
                SetPositin(C2, offset, 2.0, step);
                SetPositin(C3, offset, 3.0, step);
                SetPositin(C4, offset, 4.0, step);
                SetPositin(C5, offset, 5.0, step);
                SetPositin(C6, offset, 6.0, step);
                SetPositin(C7, offset, 7.0, step);
                SetPositin(C8, offset, 8.0, step);
                this.IsVisibleChanged -= HandleVisibleChanged;
                this.IsVisibleChanged += HandleVisibleChanged;
                  DesignerProperties   提供用于与设计器进行通信的附加属性。
                if (!DesignerProperties.GetIsInDesignMode(this))
                {
                    if (this.Visibility == System.Windows.Visibility.Visible)
                    {
                        Start();
                    }
                }
    
            }
    
            /// <summary>
            /// Canvas卸载时
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="e"></param>
            private void HandleUnloaded(object sender, RoutedEventArgs e)
            {
                Stop();
            }
    
            /// <summary>
            /// 确定圆的位置
            /// </summary>
            /// <param name="ellipse"></param>
            /// <param name="offset"></param>
            /// <param name="posOffSet"></param>
            /// <param name="step"></param>
            private void SetPositin(Ellipse ellipse, double offset, double posOffSet, double step)
            {
                ellipse.SetValue(Canvas.LeftProperty, 50.0 + Math.Sin(offset + posOffSet * step) * 50.0);
    
                ellipse.SetValue(Canvas.TopProperty, 50 + Math.Cos(offset + posOffSet * step) * 50.0);
            }
    
            /// <summary>
            /// 设置显示与隐藏
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="e"></param>
            private void HandleVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
            {
                bool isVisible = (bool)e.NewValue;
    
                if (isVisible)
                    Start();
                else
                    Stop();
            }
            #endregion

## Window界面使用圆形进度条用户控件： ##

### Window.xaml    ###

### Window.xaml.cs ###

private void btnBegin_Click(object sender, RoutedEventArgs e)
            {
                loadingWait.Visibility = Visibility.Visible;
                loadingWait.TipContent = "处理中。。。";
            }
    
            private void btnEnd_Click(object sender, RoutedEventArgs e)
            {
                loadingWait.Visibility = Visibility.Collapsed;
            }
    
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                //此处可以写取消事件
    
                loadingWait.TipContent = "正在取消...";
                loadingWait.Visibility = Visibility.Collapsed;
            }

以上事件也可以使用绑定来完成，参考：[wpf之mvvm][wpf_mvvm]。

效果图：

![Center][]

小编曾看到另一种制作圆形进度条的方法，感觉不错，分享给大家--[WPF 圆形Loading等待画面][WPF _Loading]！

本篇文章是设置好圆的透明度，随着时间的推移修改每个圆的位置实现转动。分享的文章是设置好每个圆的位置，改变圆的透明度，实现了假象的转动。

[wpf_mvvm]: http://blog.csdn.net/shiqijiamengjie/article/details/50116873
[Center]: /images/20220731/447eedd0c96241e0bcfb46d4d7795107.png
[WPF _Loading]: http://blog.csdn.net/cjwix2012/article/details/41940661