WPF圆形进度条制作

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

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

代码展示：

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

LoadingWait.xaml

LoadingWait.xaml.cs

        #region 参数
        //     集成到按指定时间间隔和指定优先级处理的 System.Windows.Threading.Dispatcher 队列中的计时器。
        private readonly DispatcherTimer animationTimer;
        #endregion

        #region 构造方法
        /// 

        /// 构造方法
        /// 
        public LoadingWait()
        {
            InitializeComponent();
            animationTimer = new DispatcherTimer(DispatcherPriority.ContextIdle, Dispatcher);
            animationTimer.Interval = new TimeSpan(0, 0, 0, 0, 75); //指定时间间隔
        }
        #endregion

        #region 属性
        #region 得到要显示的提示信息
        /// 

        /// 得到要显示的提示信息
        /// 
        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 按钮的名称--例如：取消
        /// 

        /// 按钮的名称
        /// 
        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 按钮的显示或隐藏
        /// 

        /// 按钮的显示与隐藏
        /// 
        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 方法
        /// 

        /// 开始方法
        /// 
        private void Start()
        {
            //修改光标的样式，为等待状态
            this.Cursor = Cursors.Wait;
            //超过计时器间隔时发生。
            animationTimer.Tick += HandleAnimationTick;
            animationTimer.Start();
        }

        /// 

        /// 结束方法
        /// 
        private void Stop()
        {
            animationTimer.Stop();
            //修改光标的样式，为箭头
            this.Cursor = Cursors.Arrow;
            animationTimer.Tick -= HandleAnimationTick;
        }

        /// 

        /// 超过计时器间隔时发生。
        /// 
        /// 
        /// 
        private void HandleAnimationTick(object sender, EventArgs e)
        {
            //设置旋转角度
            SpinnerRotate.Angle = (SpinnerRotate.Angle + 36) % 360;
        }

        /// 

        /// Canvas加载时
        /// 
        /// 
        /// 
        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();
                }
            }

        }

        /// 

        /// Canvas卸载时
        /// 
        /// 
        /// 
        private void HandleUnloaded(object sender, RoutedEventArgs e)
        {
            Stop();
        }

        /// 

        /// 确定圆的位置
        /// 
        /// 
        /// 
        /// 
        /// 
        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);
        }

        /// 

        /// 设置显示与隐藏
        /// 
        /// 
        /// 
        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 圆形Loading等待画面！
   本篇文章是设置好圆的透明度，随着时间的推移修改每个圆的位置实现转动。分享的文章是设置好每个圆的位置，改变圆的透明度，实现了假象的转动。