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 绕圈进度条(一)相关推荐
- WPF 实现圆形进度条
WPF 实现圆形进度条 控件名:CircularProgressBar 作 者:WPFDevelopersOrg - 驚鏵 原文链接[1]:https://github.com/WPFDevelo ...
- 使用线程新建WPF窗体(公用进度条窗体)
使用线程新建窗体 项目中需要一个公用的进度条窗体.大家知道在wpf中,有两个线程,一个是UI线程,另一个是监听线程(一直监听用户的输入).如果我们后台有阻塞UI线程的计算存在,那么界面上的比如进度条什 ...
- 【WPF】环形进度条
WPF中自带有长条形的进度条,大部分场景都算适用,但是仍然有一部分空间小的场景不太合适,此时我们想到安卓上常用的环形进度条,美观,又不占空间. 那么WPF中的环形进度条控件在哪呢? 很遗憾,自带组件中 ...
- WPF的ProgressBar进度条
1. ProgressBar常用属性 1.1. Minimum:进度条的最小值,一般为 0 1.2. Maximum:进度条的最大值,一般为100 或者是 某一个数, 如复制文件时,总文件数等 1. ...
- WPF在ProgressBar 进度条上加文字
//此处定义一个精度条 <ProgressBar Name="proBar" Grid.Row="3" Value="{Binding BarP ...
- WPF 控件库——仿制Windows10的进度条
WPF 控件库--仿制Windows10的进度条 原文:WPF 控件库--仿制Windows10的进度条 一.其实有现成的 先来看看Windows10进度条的两种模式: 网上有不少介绍仿制Window ...
- 进度条设置_朋友圈可以设置quot;仅一个月可见quot;了,什么时候出语音进度条呢?内附陈粒小姐姐的新歌哦~...
■听歌推电影■ 改编自日本著名作家森见登美彦同名小说的动画电影<企鹅公路>正式定档5月17日. 近日,片方发布了姐姐版中文推广曲<圆形的海>以及歌曲MV.歌曲由实力唱作人陈粒作 ...
- WPF利用动画实现圆形进度条
WPF利用动画实现圆形进度条 原文:WPF利用动画实现圆形进度条 这是我的第一篇随笔,最近因为工作需要,开始学习WPF相关技术,自己想实现以下圆形进度条的效果,逛了园子发现基本都是很久以前的文章,实现 ...
- Photoshop和WPF双剑配合,打造炫酷个性的进度条控件
现在如果想打造一款专业的App,UI的设计和操作的简便性相当重要.UI设计可以借助Photoshop或者AI等设计工具,之前了解到WPF设计工具Expression Blend可以直接导入PSD文件或 ...
最新文章
- 在Linux中查看所有正在运行的进程
- SAP Spartacus OccCmsComponentAdapter的findComponentsByIds方法
- java 数据库连接实例,Java连接各种数据库的实例
- python query方法_Pandas dataframe.query方法语法
- mysql 给指定用户指定数据库
- 美妆海报模板|来点创意的海报设计(立体剪纸风格)
- uniapp实现头像上传
- 软件测试用例设计(三)——场景法
- MATLAB写入Excel文件
- 下载CSS参考手册之后打开却无法显示
- AI证件照背景色修改,几行代码搞定
- 智能家居加速落地,景联文科技提供数据采集标注服务
- linux的OOM killer
- ios模拟器装ipa包_用iOS模拟器安装App的方法
- 详解Python中列表切片及浅拷贝的关系(下)
- Vue最佳实践(项目经验总结,定期更新)
- 广播(BroadcastReceiver)---安卓中的四大天王之一
- java timeunit_java – 了解TimeUnit
- 名帖47 钟繇 小楷《宣示表》
- java祖玛7723,Unity - 祖玛游戏
热门文章
- HTMl文件的阶层架构 访问父元素和子元素
- Oracle 技术集锦
- Spring Boot 实际应用(三)发送邮件实现
- 初识PHP变量函数语法
- 《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》—— 第1章 网页设计基础知识...
- Java的位运算符——与()、非(~)、或(|)、异或(^)
- linux的安装方式(一)
- CMS 和 G1 收集器比较
- 喜报|聚焦信创——360云计算管理平台生态建设的又一里程碑!
- 分布式存储中的数据分布策略