原文:WPF 绕圈进度条(一)

在设计界面时,有时会遇到进度条,本次讲解如何设计自定义的绕圈进度条,直接上代码:

1、控件界面

<UserControl x:Class="ProgressBarControl" 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"mc:Ignorable="d" d:DesignHeight="200" d:DesignWidth="300"Background="Gray" Loaded="ProgressBarControl_OnLoaded"><Grid><Grid.Resources><Style TargetType="Ellipse"><Setter Property="Height" Value="{Binding EclipseSize}"></Setter><Setter Property="Width" Value="{Binding EclipseSize}"></Setter><Setter Property="Stretch" Value="Fill"></Setter><!--设置圆的颜色--><Setter Property="Fill" Value="White"></Setter></Style></Grid.Resources><StackPanel   HorizontalAlignment="Center"  VerticalAlignment="Center"><Viewbox Width="{Binding ViewBoxSize}" Height="{Binding ViewBoxSize}"  HorizontalAlignment="Center"  VerticalAlignment="Center"><Grid x:Name="LayoutRoot"   Background="Transparent"  HorizontalAlignment="Center"  VerticalAlignment="Center"><!--此处有canvas的加载和卸载事件--><Canvas x:Name="ProgressBarCanvas" RenderTransformOrigin="0.5,0.5"  HorizontalAlignment="Center"  VerticalAlignment="Center" Width="{Binding CanvasSize}"  Height="{Binding CanvasSize}" Loaded="HandleLoaded"  Unloaded="HandleUnloaded"  ><!--画圆-->                        <Canvas.RenderTransform><RotateTransform x:Name="SpinnerRotate" Angle="0" /></Canvas.RenderTransform></Canvas></Grid></Viewbox></StackPanel></Grid>
</UserControl> 

2、控件后台逻辑:

控件后台:

/// <summary>/// 进度条/// </summary>public partial class ProgressBarControl : UserControl{//集成到按指定时间间隔和指定优先级处理的 System.Windows.Threading.Dispatcher 队列中的计时器。private DispatcherTimer animationTimer;private ProgressBarDataModel _dataModel;private int index = 0;#region 构造方法与加载/// <summary>/// 构造方法/// </summary>public ProgressBarControl(){InitializeComponent();}/// <summary>/// 加载后刷新/// </summary>/// <param name="sender"></param>/// <param name="e"></param>private void ProgressBarControl_OnLoaded(object sender, RoutedEventArgs e){animationTimer = new DispatcherTimer(DispatcherPriority.ContextIdle, Dispatcher);//指定时间间隔animationTimer.Interval = new TimeSpan(0, 0, 0, 0, TimeSpan);if (EllipseCount < 1){EllipseCount = 12;}for (int i = 0; i < EllipseCount; i++){ProgressBarCanvas.Children.Add(new Ellipse());}var dataModel = new ProgressBarDataModel(){CanvasSize = CanvasSize,EclipseSize = EllipseSize};_dataModel = dataModel;this.DataContext = dataModel;}#endregion#region 属性/// <summary>/// 获取或设置圆圈数量/// 默认12/// </summary>public double EllipseCount{get { return (double)GetValue(EllipseCountProperty); }set { SetValue(EllipseCountProperty, value); }}public static readonly DependencyProperty EllipseCountProperty =DependencyProperty.Register("EllipseCount", typeof(double), typeof(ProgressBarControl),new FrameworkPropertyMetadata(10.0, FrameworkPropertyMetadataOptions.AffectsRender));/// <summary>/// 获取或设置圆圈大小/// 默认10/// </summary>public double EllipseSize{get { return (double)GetValue(EllipseSizeProperty); }set { SetValue(EllipseSizeProperty, value); }}public static readonly DependencyProperty EllipseSizeProperty =DependencyProperty.Register("EllipseSize", typeof(double), typeof(ProgressBarControl),new FrameworkPropertyMetadata(10.0, FrameworkPropertyMetadataOptions.AffectsRender));/// <summary>/// 获取或设置面板大小/// 默认80/// </summary>public double CanvasSize{get { return (double)GetValue(CanvasSizeProperty); }set { SetValue(CanvasSizeProperty, value); }}public static readonly DependencyProperty CanvasSizeProperty =DependencyProperty.Register("CanvasSize", typeof(double), typeof(ProgressBarControl),new FrameworkPropertyMetadata(80.0, FrameworkPropertyMetadataOptions.AffectsRender));/// <summary>/// 获取或设置每次旋转角度/// 默认10.0/// </summary>public double StepAngle{get { return (double)GetValue(StepAngleProperty); }set { SetValue(StepAngleProperty, value); }}public static readonly DependencyProperty StepAngleProperty =DependencyProperty.Register("StepAngle", typeof(double), typeof(ProgressBarControl),new FrameworkPropertyMetadata(10.0, FrameworkPropertyMetadataOptions.AffectsRender));/// <summary>/// 获取或设置每次旋转间隔时间(毫秒)/// 默认100毫秒/// </summary>public int TimeSpan{get { return (int)GetValue(TimeSpanProperty); }set { SetValue(TimeSpanProperty, value); }}public static readonly DependencyProperty TimeSpanProperty =DependencyProperty.Register("TimeSpan", typeof(int), typeof(ProgressBarControl),new FrameworkPropertyMetadata(100, FrameworkPropertyMetadataOptions.AffectsRender));#endregion#region 方法/// <summary>/// Canvas加载/// </summary>/// <param name="sender"></param>/// <param name="e"></param>private void HandleLoaded(object sender, RoutedEventArgs e){//设置设置圆的位置和旋转角度
            SetEclipsePosition(_dataModel);//DesignerProperties   提供用于与设计器进行通信的附加属性。if (!DesignerProperties.GetIsInDesignMode(this)){if (this.Visibility == System.Windows.Visibility.Visible){//超过计时器间隔时发生。animationTimer.Tick += HandleAnimationTick;animationTimer.Start();}}}/// <summary>/// 设置圆的位置和旋转角度/// </summary>private void SetEclipsePosition(ProgressBarDataModel dataModel){//圆周长就是:C = π * d 或者C=2*π*r(其中d是圆的直径,r是圆的半径)double r =dataModel.R;var children=ProgressBarCanvas.Children;int count = children.Count;double step = (Math.PI * 2) / count;//根据圆中正弦、余弦计算距离int index = 0;foreach (var element in children){var ellipse = element as Ellipse;//透明度var opacity = Convert.ToDouble(index)/(count - 1);ellipse.SetValue(UIElement.OpacityProperty, opacity<0.05?0.05:opacity);//距离double left = r + Math.Sin(step*index)*r;ellipse.SetValue(Canvas.LeftProperty,left);double top = r - Math.Cos(step*index)*r;ellipse.SetValue(Canvas.TopProperty, top);index++;}}/// <summary>/// Canvas卸载时/// </summary>/// <param name="sender"></param>/// <param name="e"></param>private void HandleUnloaded(object sender, RoutedEventArgs e){animationTimer.Stop();//除去委托animationTimer.Tick -= HandleAnimationTick;}/// <summary>/// 超过计时器间隔时发生。/// </summary>/// <param name="sender"></param>/// <param name="e"></param>private void HandleAnimationTick(object sender, EventArgs e){//设置旋转角度SpinnerRotate.Angle = (SpinnerRotate.Angle + StepAngle) % 360;}#endregion}

View Code

数据Model类:

/// <summary>/// 进度条Model类/// </summary>public class ProgressBarDataModel{public double EclipseSize { get; set; }public double CanvasSize { get; set; }public double ViewBoxSize{get{double length = Convert.ToDouble(CanvasSize) - Convert.ToDouble(EclipseSize);return length;}}public double EclipseLeftLength{get{double length = Convert.ToDouble(CanvasSize) / 2;return length;}}public double R{get{double length = (Convert.ToDouble(CanvasSize) - Convert.ToDouble(EclipseSize)) / 2;return length;}}}

3、取用控件

<control:ProgressBarControl  CanvasSize="100" EllipseCount="10" EllipseSize="10" StepAngle="36" TimeSpan="60"/>

WPF 绕圈进度条(一)相关推荐

  1. WPF 实现圆形进度条

    WPF 实现圆形进度条 控件名:CircularProgressBar 作   者:WPFDevelopersOrg - 驚鏵 原文链接[1]:https://github.com/WPFDevelo ...

  2. 使用线程新建WPF窗体(公用进度条窗体)

    使用线程新建窗体 项目中需要一个公用的进度条窗体.大家知道在wpf中,有两个线程,一个是UI线程,另一个是监听线程(一直监听用户的输入).如果我们后台有阻塞UI线程的计算存在,那么界面上的比如进度条什 ...

  3. 【WPF】环形进度条

    WPF中自带有长条形的进度条,大部分场景都算适用,但是仍然有一部分空间小的场景不太合适,此时我们想到安卓上常用的环形进度条,美观,又不占空间. 那么WPF中的环形进度条控件在哪呢? 很遗憾,自带组件中 ...

  4. WPF的ProgressBar进度条

    1. ProgressBar常用属性 1.1.  Minimum:进度条的最小值,一般为 0 1.2. Maximum:进度条的最大值,一般为100 或者是 某一个数, 如复制文件时,总文件数等 1. ...

  5. WPF在ProgressBar 进度条上加文字

    //此处定义一个精度条 <ProgressBar Name="proBar" Grid.Row="3" Value="{Binding BarP ...

  6. WPF 控件库——仿制Windows10的进度条

    WPF 控件库--仿制Windows10的进度条 原文:WPF 控件库--仿制Windows10的进度条 一.其实有现成的 先来看看Windows10进度条的两种模式: 网上有不少介绍仿制Window ...

  7. 进度条设置_朋友圈可以设置quot;仅一个月可见quot;了,什么时候出语音进度条呢?内附陈粒小姐姐的新歌哦~...

    ■听歌推电影■ 改编自日本著名作家森见登美彦同名小说的动画电影<企鹅公路>正式定档5月17日. 近日,片方发布了姐姐版中文推广曲<圆形的海>以及歌曲MV.歌曲由实力唱作人陈粒作 ...

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

    WPF利用动画实现圆形进度条 原文:WPF利用动画实现圆形进度条 这是我的第一篇随笔,最近因为工作需要,开始学习WPF相关技术,自己想实现以下圆形进度条的效果,逛了园子发现基本都是很久以前的文章,实现 ...

  9. Photoshop和WPF双剑配合,打造炫酷个性的进度条控件

    现在如果想打造一款专业的App,UI的设计和操作的简便性相当重要.UI设计可以借助Photoshop或者AI等设计工具,之前了解到WPF设计工具Expression Blend可以直接导入PSD文件或 ...

最新文章

  1. 在Linux中查看所有正在运行的进程
  2. SAP Spartacus OccCmsComponentAdapter的findComponentsByIds方法
  3. java 数据库连接实例,Java连接各种数据库的实例
  4. python query方法_Pandas dataframe.query方法语法
  5. mysql 给指定用户指定数据库
  6. 美妆海报模板|来点创意的海报设计(立体剪纸风格)
  7. uniapp实现头像上传
  8. 软件测试用例设计(三)——场景法
  9. MATLAB写入Excel文件
  10. 下载CSS参考手册之后打开却无法显示
  11. AI证件照背景色修改,几行代码搞定
  12. 智能家居加速落地,景联文科技提供数据采集标注服务
  13. linux的OOM killer
  14. ios模拟器装ipa包_用iOS模拟器安装App的方法
  15. 详解Python中列表切片及浅拷贝的关系(下)
  16. Vue最佳实践(项目经验总结,定期更新)
  17. 广播(BroadcastReceiver)---安卓中的四大天王之一
  18. java timeunit_java – 了解TimeUnit
  19. 名帖47 钟繇 小楷《宣示表》
  20. java祖玛7723,Unity - 祖玛游戏

热门文章

  1. HTMl文件的阶层架构 访问父元素和子元素
  2. Oracle 技术集锦
  3. Spring Boot 实际应用(三)发送邮件实现
  4. 初识PHP变量函数语法
  5. 《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》—— 第1章 网页设计基础知识...
  6. Java的位运算符——与()、非(~)、或(|)、异或(^)
  7. linux的安装方式(一)
  8. CMS 和 G1 收集器比较
  9. 喜报|聚焦信创——360云计算管理平台生态建设的又一里程碑!
  10. 分布式存储中的数据分布策略