WPF实现转圈进度条效果
更新时间:2021年9月22日 10:02 点击:2284
在设计界面时,有时会遇到进度条,本次讲解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 }
数据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"/>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
相关文章
- 这篇文章主要介绍了解决echarts 一条柱状图显示两个值,类似进度条的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-20
c# WPF中通过双击编辑DataGrid中Cell的示例(附源码)
这篇文章主要介绍了c# WPF中通过双击编辑DataGrid中Cell的示例(附源码),帮助大家更好的理解和学习使用c#,感兴趣的朋友可以了解下...2021-03-03- 本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下:具体代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24
ant design中upload组件上传大文件,显示进度条进度的实例
这篇文章主要介绍了ant design中upload组件上传大文件,显示进度条进度的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29- 本文实例讲述了jquery实现模拟百分比进度条渐变效果代码。分享给大家供大家参考,具体如下:这里为了便于看到加载百分比,对代码进行了处理,实际使用时并不需要这样。运行效果截图如下:在线演示地址如下:http://demo.jb51.net...2015-10-30
- 最近在网上看到了新版的360安全卫士,感觉界面还不错,于是用WPF制作了一个,时间有限,一些具体的控件没有制作,用图片代替了。感兴趣的朋友一起跟着小编学习WPF实现类似360安全卫士界面的程序源码分享...2020-06-25
- 这篇文章主要介绍了C#实现带进度条的ListView 的相关资料,需要的朋友可以参考下...2020-06-25
- 本篇文章主要介绍了nodejs 终端打印进度条实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-04-27
- APC模块,它的全称是Alternative PHP Cache。APC可以将所有PHP代码会被缓存起来, 另外它可提供一定的内存缓存功能.但是这个功能并不是十分完美,有报告说如果频繁使用APC缓存的写入功能,会导致不可预料的错误.如果想使用...2015-10-30
- 在网页中,经常见到进度条效果,那么这些个性的进度条组件效果是怎么实现的呢,下面脚本之家小编给大家分享Bootstrap进度条组件知识详解,感兴趣的朋友要求学习吧...2016-05-04
- php不具备实时上传进度条功能,如果想有这种功能我们一般会使用ajax来实现,但是php提供了一个apc,它就可以与php配置实现上传进度条功能。 主要针对的是window上的应用。 1.服务器要支持apc扩展,没有此扩展的话,下载一个扩...2015-10-30
BootStrap Progressbar 实现大文件上传的进度条的实例代码
这篇文章主要介绍了BootStrap Progressbar 实现大文件上传的进度条的实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-01- php 大文件带进度的上传,一直是一个令php程序员很苦恼的问题。查询baidu 、Google ,大体做带进度的上传方式为:flash+php,socket,apc+php等,下面我介绍了apc +php+ajax制作的带进度的上传,并贴出源码,希望对大家有用。 Altern...2015-10-30
- 这篇文章主要为大家详细介绍了WPF仿三星手机充电界面实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要介绍了C# WPF 通过委托实现多窗口间的传值的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
这篇文章主要介绍了Bootstrap进度条与AJAX后端数据传递结合使用,需要的朋友可以参考下...2017-04-27- 这篇文章主要介绍了C#中WPF使用多线程调用窗体组件的方法,涉及C#中多线程的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要为大家详细介绍了WPF TextBox实现按字节长度限制输入功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要介绍了C# Oracle批量插入数据进度条的实现代码,需要的朋友可以参考下...2020-06-25
- 这篇文章主要为大家详细介绍了WPF InkCanvas绘制矩形和椭圆,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25