WPF 圆形进度条(一):整体框架

  看了浸水的WPF 实现圆形进度条这篇文章,突发灵感,决定自己做一个圆形进度条(用户控件),名为LoadingRing。

  首先,圆形进度条必定有一个Ellipse(这简直就是废话),所以需要一个Ellipse。

  为了好看,我把它设为灰色并且半透明。

  接着需要填充部分的控件,开始我想用Ellipse,并用StrokeDashArray来填充的,但是后来发现使用StrokeDashArray就难以使用动画。折腾半天,还是在Blend使用Arc形状好了。Arc中的StartAngle指定弧线的起始处,以圆的最顶端为0°,EndAngle指定结束的度数。现在的代码如下:

1 <Ellipse Stroke="Gray" StrokeThickness="3" Opacity="0.6"/>
2 <ed:Arc ArcThickness="3" EndAngle="0" Margin="0" Stretch="None" Stroke="Transparent" StrokeThickness="0" StartAngle="0" Fill="#FF0071BC" x:Name="EllipseFill"/>

  还有一点细节,就是使用ed还要声明:

1 xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"

  把EndAngle随便设个1~360之间的数(0就看不见了)来看看效果。

  效果还挺令人满意。但有一个很重要的依赖性属性还没定义,给使用者设定进度,我把它的名设为Value。

 1 public static DependencyProperty ValueProperty;
 2 public byte Value
 3 {
 4     get { return (byte)GetValue(ValueProperty); }
 5     set { SetValue(ValueProperty, value); }
 6 }
 7
 8 static LoadingRing()
 9 {
10     ValueProperty = DependencyProperty.Register("Value", typeof(byte), typeof(LoadingRing), new FrameworkPropertyMetadata((byte)0, new PropertyChangedCallback(OnValueChanged)));
11 }

  (有一个编程的细节就是初始值前要加byte的显示转换,因为数值默认为int。否则编译器会一直告诉你初始值错误,无法调用构造函数,却不知道哪里有错误。)

  和一个依赖项回调函数:

private static void OnValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
  LoadingRing lr = (LoadingRing)d;
  if (lr.Value > 100) lr.Value = 100;
  if (lr.Value < 0) lr.Value = 0;
  lr.EllipseFill.EndAngle = lr.Value / 0.01 * 360;
}

  不显示进度多少,着急的你沉得住气吗?加一个TextBlock用作显示进度。XAML代码增加一行:

1 <TextBlock Foreground="White" FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,-40,0,0" x:Name="TValue" FontFamily="Segoe UI"><Run Text="0%"/></TextBlock>

  进度更新时也要有变化,在回调函数中添加一行:  

1 lr.TValue.Text = lr.Value.ToString() + "%";

  来看看效果。

  感觉不错,但总觉得应该告诉别人你在干什么,加多一个TextBlock显示事件。XAML代码再增加一行:

1 <TextBlock Foreground="White" FontSize="17" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,-45" x:Name="TText" FontFamily="Segoe UI Light"><Run Text="Something to do…"/></TextBlock>

  还有另一个依赖项和回调函数:

 1 public static DependencyProperty TextProperty;
 2 public string Text
 3 {
 4   get { return (string)GetValue(TextProperty); }
 5   set { SetValue(TextProperty, value); }
 6 }
 7
 8 static LoadingRing()
 9 {
10   TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(LoadingRing), new FrameworkPropertyMetadata("Something to do…", new PropertyChangedCallback(OnTextChanged)));
11   ValueProperty = DependencyProperty.Register("Value", typeof(byte), typeof(LoadingRing), new FrameworkPropertyMetadata((byte)0, new PropertyChangedCallback(OnValueChanged)));
12
13 }
14
15 private static void OnTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
16 {
17   LoadingRing lr = (LoadingRing)d;
18   lr.TText.Text = lr.Text;
19 }

  结果还挺好看:

  可在进度变化时,填充区域的变化显得十分死板,直接跳到另一边。所以下一篇将会给它一点灵性,用一些动画使它变得流畅一些。

时间: 2024-11-08 03:14:36

WPF 圆形进度条(一):整体框架的相关文章

WPF 实现圆形进度条

项目中用到圆形进度条,首先就想到使用 ProgressBar 扩展一个,在园子里找到 迷途的小榔头 给出的思路和部分代码,自己加以实现.在此感谢 迷途的小榔头! 进度小于60显示红色,大于60则显示绿色.效果如下: 基本思路: 本质上是一个进度条,只是外观有别于矩形进度条,所以需要修改ProgressBar的ControlTemplate. 进度条部分实际是一个扇形,用WPF动态绘出(原理参考迷途的小榔头讲解). 要将进度条的值(Value依赖属性)转换为进度条,需要一个Converter. 根

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

这是我的第一篇随笔,最近因为工作需要,开始学习WPF相关技术,自己想实现以下圆形进度条的效果,逛了园子发现基本都是很久以前的文章,实现方式一般都是GDI实现的,想到WPF中动画效果不错,于是自己研究了一下,还真让我做出来了,废话不多说了,先上效果. 这个效果是不是还不错?这里面实现了数字实时显示以及根据进度进行自动渐变的效果.实现原理其实很简单,利用WPF动画,其中主要元素有border(实现里外层圆的效果),Arc扇面(就是用来实现外层填充效果的),Label(用来显示进度百分比). 1.实现

自定义圆形进度条

关于控件呢,我想大家应该都很熟悉了吧,android应用开发MVC架构中,控件担任着至关重要的作用,感觉可以说是基于控件的事件模型人机交互的基础吧.这种特性感觉在wpf开发中体现得更为直接,感兴趣的同学可以去了解一下.而android框架自身就已经给我们提供了很多控件.那么问题来了?为什么有那么多控件可以用,你还要去屑自定义控件呢?是因为大家闲的蛋疼吗?显然不是.个人认为只要有两方面吧,要么是觉得有些原生控件是在是丑得难以忍受(即使是在你已经自定义了他的shape,圆角,selector等一系列

CAShapeLayer实现圆形进度条效果

一.CAShapeLayer简介: 1.CAShapeLayer继承至CALayer,可以使用CALayer的所有属性值 2.CAShapeLayer需要与贝塞尔曲线配合使用才有意义 3.使用CAShapeLayer与贝塞尔曲线可以实现不在view的drawRect方法中画出一些想要的图形 4.CAShapeLayer属于CoreAnimation框架,其动画渲染直接提交到手机的GPU当中,相较于view的drawRect方法使用CPU渲染而言,其效率极高,能大大优化内存使用情况 五角星动画 #

基于CAShapeLayer和贝塞尔曲线的圆形进度条动画【装载】

初次接触CAShapeLayer和贝塞尔曲线,看了下极客学院的视频.对初学者来说感觉还不错.今天来说一个通过CAShapeLayer和贝塞尔曲线搭配的方法,创建的简单的圆形进度条的教程先简单的介绍下CAShapeLayer1,CAShapeLayer继承自CALayer,可使用CALayer的所有属性2,CAShapeLayer需要和贝塞尔曲线配合使用才有意义.Shape:形状贝塞尔曲线可以为其提供形状,而单独使用CAShapeLayer是没有任何意义的.3,使用CAShapeLayer与贝塞尔

基于jQuery漂亮的圆形进度条倒计时插件

jQuery Final Countdown是一款时尚的圆形进度条样式的jQuery倒计时插件.该倒计时插件可以显示倒计时的秒.分钟.小时和天数.它采用圆形进度条来作为倒计时的动画,非常的时尚大方. 在线预览   源码下载 使用方法 该倒计时插件依赖于jQuery和KineticJS-一个HTML5 Canvas库.使用是要将它们引入. <script type="text/javascript" src="js/jquery.min.js"></

iOS 图片加载 圆形进度条

项目中有加载网络图片的需求,加一个加载的进度条会提高用户体验,网络不好的时候会清晰的看到图片加载的进度,比让用户看着满屏幕空白好.下面是我们项目自己封装的圆形进度条,分享给大家. 其实实现原理很简单,只是根据图片加载的进度来绘制一个圆. 先来看.h文件,需要一个进度的属性和进度条展示位置的方法: @property (nonatomic, assign) CGFloat progress; +(HMProgressView *)showHMProgressView:(UIView *)paren

利用css3动画和border来实现圆形进度条

最近在学习前端的一些知识,发现border的功能十分强大啊! 首先来看看demo 就是这么一个圆形的进度条,在文本框中输入0-100的数值下面的进度条相应的转到多少 这个主要是利用border,旋转和css动画来实现的,主要思想是利用两个div来互相遮挡border形成的一个只有半圈有颜色的圆形,再利用旋转div的角度来调整显示 上代码: html+css+js(这里引入了jquery) <!DOCTYPE html> <html lang="en"> <

Android自定义View——圆形进度条式按钮

介绍 今天上班的时候有个哥们问我怎么去实现一个按钮式的进度条,先来看看他需要实现的效果图. 和普通的圆形进度条类似,只是中间的地方有两个状态表示,未开始,暂停状态.而且他说圆形进度的功能已经实现了.那么我们只需要对中间的两个状态做处理就行了. 先来看看实现的效果图: 上面说了我们只需要处理中间状态的变化就可以了,对于进度的处理直接使用了弘洋文章中实现: http://blog.csdn.net/lmj623565791/article/details/43371299 下面开始具体实现. 具体实