WPF圆形进度条制作

最新推荐文章于 2021-05-19 09:22:09 发布
最新推荐文章于 2021-05-19 09:22:09 发布
阅读量7.2k 收藏 10
点赞数 1
分类专栏： wpf 文章标签： wpf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shiqijiamengjie/article/details/50724924
版权

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

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

代码展示：

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

LoadingWait.xaml

<UserControl x:Class="进度条.LoadingWait"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  Background="#19A39E9E" Name="loadingWait">
    <!--设置圆的颜色-->
    <UserControl.Resources>
        <SolidColorBrush Color="CornflowerBlue" x:Key="CirclesColor"/>
    </UserControl.Resources>

    <Grid>
        <StackPanel   HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <Viewbox Width="100" Height="100"
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
                <Grid x:Name="LayoutRoot" 
                Background="Transparent"
                HorizontalAlignment="Center"
                VerticalAlignment="Center">
                    <!--此处有canvas的加载和卸载事件-->
                    <Canvas RenderTransformOrigin="0.5,0.5"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center" Width="120"
                    Height="120" Loaded="HandleLoaded"
                    Unloaded="HandleUnloaded"  >
                        <!--画圆,设置成不同的透明度Opacity-->
                        <Ellipse x:Name="C0" Width="20" Height="20"
                         Canvas.Left="0"
                         Canvas.Top="0" Stretch="Fill"
                         Fill="{StaticResource CirclesColor}" Opacity="1.0"/>
                        <Ellipse x:Name="C1" Width="20" Height="20"
                         Canvas.Left="0"
                         Canvas.Top="0" Stretch="Fill"
                         Fill="{StaticResource CirclesColor}" Opacity="0.9"/>
                        <Ellipse x:Name="C2" Width="20" Height="20"
                         Canvas.Left="0"
                         Canvas.Top="0" Stretch="Fill"
                         Fill="{StaticResource CirclesColor}" Opacity="0.8"/>
                        <Ellipse x:Name="C3" Width="20" Height="20"
                         Canvas.Left="0"
                         Canvas.Top="0" Stretch="Fill"
                         Fill="{StaticResource CirclesColor}" Opacity="0.7"/>
                        <Ellipse x:Name="C4" Width="20" Height="20"
                         Canvas.Left="0"
                         Canvas.Top="0" Stretch="Fill"
                         Fill="{StaticResource CirclesColor}" Opacity="0.6"/>
                        <Ellipse x:Name="C5" Width="20" Height="20"
                         Canvas.Left="0"
                         Canvas.Top="0" Stretch="Fill"
                         Fill="{StaticResource CirclesColor}" Opacity="0.5"/>
                        <Ellipse x:Name="C6" Width="20" Height="20"
                         Canvas.Left="0"
                         Canvas.Top="0" Stretch="Fill"
                         Fill="{StaticResource CirclesColor}" Opacity="0.4"/>
                        <Ellipse x:Name="C7" Width="20" Height="20"
                         Canvas.Left="0"
                         Canvas.Top="0" Stretch="Fill"
                         Fill="{StaticResource CirclesColor}" Opacity="0.3"/>
                        <Ellipse x:Name="C8" Width="20" Height="20"
                         Canvas.Left="0"
                         Canvas.Top="0" Stretch="Fill"
                         Fill="{StaticResource CirclesColor}" Opacity="0.2"/>
                        <Canvas.RenderTransform>
                            <RotateTransform x:Name="SpinnerRotate"
                         Angle="0" />
                        </Canvas.RenderTransform>
                    </Canvas>
                </Grid>
            </Viewbox>
            <!--这两个针对的元素名称是loadingWait，所以必须要给本界面一个名称-->
            <!--TextBlock里面放置提示信息；Label放置相当于按钮的东西-->
            <TextBlock Text="{Binding TipContent,ElementName=loadingWait}" FontStretch="Medium" HorizontalAlignment="Center" FontSize="16"></TextBlock>
            <Label Content="{Binding InnerContent,ElementName=loadingWait}" HorizontalAlignment="Center"/>
        </StackPanel>
    </Grid>
</UserControl>

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

      <pre name="code" class="csharp"><Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="42*" />
            <RowDefinition Height="219*" />
        </Grid.RowDefinitions>
        <Button Content="开始" Height="23" HorizontalAlignment="Left" Margin="39,12,0,0" Name="btnBegin" VerticalAlignment="Top" Width="75" Click="btnBegin_Click" />
        <Button Content="结束" Height="23" HorizontalAlignment="Left" Margin="162,12,0,0" Name="btnEnd" VerticalAlignment="Top" Width="75" Click="btnEnd_Click" />
        <!--TipContent：绑定要显示的提示信息-->
        <my:LoadingWait Visibility="Collapsed" TipContent="正在处理..." x:Name="loadingWait" Grid.Row="2">
            <my:LoadingWait.InnerContent>
                <StackPanel>
                    <!--这些事件也可以使用绑定来完成，例如：Command="{Binding FXBCXNoCmd}"-->
                    <Button Content="取消" Width="300" Click="Button_Click"></Button>
                </StackPanel>
            </my:LoadingWait.InnerContent>
        </my:LoadingWait>
    </Grid>

 

 

 

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等待画面！
 

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


 

                

        

        

    

  


    

      

        

            

              
                
                  梦Dreamer
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
【WPF】利用Ellipse或Rectangle制作圆形进度条

				
			

			

				

					weixin_56814032的博客
				

				

					12-24
					
					1220
					
				

			

		

		

			
				
public MainViewModel()
        {
            Task.Run(() =>
            {
                while(true)
                {
                    Application.Current.Dispatcher.Invoke(() =>
                    {
                        double seco...

			
		

	



                

              
                



	

		

			

				
					
wpf 环形进度条，自定义控件

					
最新发布

				
			

			

				

					sunjay117的专栏
				

				

					07-25
					
					1539
					
				

			

		

		

			
				
// CircleProgress.xaml 的交互逻辑。

			
		

	



                


  
              

                


	

		

			

				
					
wpf仪表盘、圆形进度条控件

				
			

			

				

					02-17
				

			

		

		

			
				
wpf仪表盘、圆形进度条控件

			
		

	





	

		

			

				
					
WPF实现的圆形进度条

				
			

			

				

					03-16
				

			

		

		

			
				
WPF实现的圆形进度条，仿安卓上常见的圆形进度条效果。中间带进度的文字显示，有需要的可以参考下

			
		

	



		

			
		



	

		

			

				
					
WPF利用动画实现圆形进度条

				
			

			

				

					weixin_33816821的博客
				

				

					12-16
					
					843
					
				

			

		

		

			
				
原文:WPF利用动画实现圆形进度条
　　这是我的第一篇随笔，最近因为工作需要，开始学习WPF相关技术，自己想实现以下圆形进度条的效果，逛了园子发现基本都是很久以前的文章，实现方式一般都是GDI实现的，想到WPF中动画效果不错，于是自己研究了一下，还真让我做出来了，废话不多说了，先上效果。

　　这个效果是不是还不错？这里面实现了数字实时显示以及根据进度进行...

			
		

	





	

		

			

				
					
WPF 实现圆形进度条

				
			

			

				

					weixin_33963594的博客
				

				

					10-08
					
					791
					
				

			

		

		

			
				
项目中用到圆形进度条，首先就想到使用 ProgressBar 扩展一个，在园子里找到迷途的小榔头给出的思路和部分代码，自己加以实现。
进度小于60显示红色，大于60则显示绿色。效果如下：
     
     


基本思路：

本质上是一个进度条，只是外观有别于矩形进度条，所以需要修改ProgressBar的ControlT...

			
		

	





	

		

			

				
					
wpf 圆形进度条

				
			

			

				

					飞鸟慕鱼的博客
				

				

					05-19
					
					2302
					
				

			

		

		

			
				
效果图



Style


<Style x:Key="CircleProgressBar" TargetType="{x:Type ProgressBar}">
    <Setter Property="Width" Value="100" />
    <Setter Property="Height" Value="100" />
    <Setter Property="Template">
      <Setter.Value>


			
		

	





	

		

			

				
					
WPF中的圆形进度条

				
			

			

				

					11-21
				

			

		

		

			
				
Creating a circular progress bar in WPF or Silverlight by Timo Korinth.很有参考意义.

			
		

	





	

		

			

				
					
WPF，C#圆形加载进度条。

				
			

			

				

					01-25
				

			

		

		

			
				
对于圆形进度条的实现，我们将使用WPF中的`Path`控件配合`Geometry`来绘制圆弧，模拟进度条的效果。`Path`控件允许我们通过数据来描绘复杂的形状，而`Geometry`则用来定义这些形状。  下面是一个简单的步骤来创建...

			
		

	





	

		

			

				
					
C#圆形进度条

				
			

			

				

					07-28
				

			

		

		

			
				
通过阅读和学习这些代码，开发者可以快速掌握制作圆形进度条的方法。  10. 扩展与应用：圆形进度条可以广泛应用于各种场景，如加载指示器、健康条、电池状态等。了解其工作原理后，开发者可以进一步扩展功能，如添加...

			
		

	





	

		

			

				
					
Circular-Progress-Bar:您可以为您的视频游戏统一创建圆形进度条。 下面是一个如何实现圆形进度条的简单例子

				
			

			

				

					07-17
				

			

		

		

			
				
在众多的UI元素中，圆形进度条是一种常见的设计，用于展示任务完成度、加载进度或者角色的生命值等。在本文中，我们将探讨如何使用C#语言来创建一个圆形进度条，并参考提供的资源“Circular-Progress-Bar”来深入...

			
		

	





	

		

			

				
					
WPF圆形进度条WPF圆形进度条

				
			

			

				

					12-08
				

			

		

		

			
				
WPF圆形进度条

			
		

	





	

		

			

				
					
WPF,好看的圆形ProgressBar实现

				
			

			

				

					05-18
				

			

		

		

			
				
经典的使用样式的方法是用圆形的ProgressBar，提供多种演示样式。

			
		

	





	

		

			

				
					
自定义圆形进度条，wpf Progressbar进度条样式修改

				
			

			

				

					08-10
				

			

		

		

			
				
win8 小点进度条，自定义圆形进度条，wpf Progressbar进度条样式更改

			
		

	





	

		

			

				
					
在WPF中设计进度条

				
			

			

				

					03-13
				

			

		

		

			
				
很好的东西，关于WPF中设计进度条的例子，值得学习。

			
		

	





	

		

			

				
					
WPF圆形进度条

				
			

			

				

					zhoumouren88的博客
				

				

					04-02
					
					1178
					
				

			

		

		

			
				
项目中使用了各种各样进度条 这次主要记录自己使用圆形的进度条心得 如下图:分别对应着 老版本、新版本、现在      做东西之前 肯定先网上找找看，一搜索一大堆连接，当然也有一些UI框架带这样的控件，我看了几个，各种类和样式继承类,主要是和他们自己框架结合一起。仅仅为了一个控件,那样做 简单问题复杂化。下面是单独介绍的一些有用链接. https://www.cnblogs.com/lgmbk/p/5050367.html https://www.cnblogs.com/dipwater/p/401...

			
		

	





	

		

			

				
					
wpf 进度条两侧圆角_WPF圆形进度条

				
			

			

				

					weixin_42131890的博客
				

				

					01-14
					
					768
					
				

			

		

		

			
				
项目中使用了各种各样进度条 这次主要记录自己使用圆形的进度条心得如下图:分别对应着 老版本、新版本、现在   做东西之前 肯定先网上找找看，一搜索一大堆连接，当然也有一些UI框架带这样的控件，我看了几个，各种类和样式继承类,主要是和他们自己框架结合一起。仅仅为了一个控件,那样做 简单问题复杂化。下面是单独介绍的一些有用链接.但是介于项目好多不能直接使用，因为有些功能不全，不能满足要求。 比如起点的...

			
		

	





	

		

			

				
					
wpf button重写圆形进度条

				
			

			

				

					08-02
				

			

		

		

			
				
在WPF中，要重写一个圆形进度条，我们可以通过自定义一个继承自Button的新控件来实现。  首先，我们需要定义一个新的类，比如名为CircularProgressBar的控件。在这个类中，我们可以重写Button的外观和交互逻辑来实现...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 8

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值