WPF 省略号动画

1、WPF 省略号动画省略号动画可以用于加载数据，等待等多个场景使用，在wpf中要实现省略号动画方式多种多样，但是要通用起来目前笔者还没有看到一个好的结局方案。现在我们一起来做一个通用的省略号动画类，达到像拖控件一样简单。思路，有一个类，我只要实例化它后，传入一个UI元素比如Border或Panel。调用某个方法比如Run，就可以让小圆点跑起来。首先建立一个用来调用的类，取名为：EllipsisRun调用类创建完成。省略号。是6个小圆点。那么我就需要在类里面来创建6个小圆点。小圆点创建好了，那么怎么让小圆点看起来似乎在动呢?通过设置小圆点的样式来实现，比如：先定义三个个样式字段:1. Ellips

2、eStyleBase用来设置小圆点的Height，Width，Margin；2. EllipseStyleNormal继承EllipseStyleBase追加Stroke（设置边框颜色）和StrokeThickness（设置边框显示大小）；3. EllipseStyleHilight继承EllipseStyleBase追加Fill(设置填充颜色)所以我们需要一个方法来设置这三个样式：我们想设置个默认值怎么样，同时又想自己定义下值，那么我可以用一个方法来设置。我这里使用构造方法来实现。小圆点样式已经完成了，那么我们现在需要让小圆点“动起来”，我们需要创建一个Run方法，传入我们指定的容器，让校园

3、的在这个容器中“动起来”。开来我们还需要添加一些关键性的字段和属性现在小圆点可以跑起来了。在情景中，我们数据加载完了。还需要关闭动画。所以我们还需要一个退出动画的方法来调用，这里我们用End()方法来实现。好的大功告我们来调用下我们的小圆点动画XAMLCS：运行起来看上去还不错哦。下面是完整代码：/ <summary> / 省略号动画 / 用法: / var er = new EllipsisRun(); / er.Run(参数:Border或Panel); / </summary> public class EllipsisRun private Style Elli

4、pseStyleBase; private Style EllipseStyleNormal; private Style EllipseStyleHilight; private UIElement _Content; / <summary> / 要插入动画的UI元素 Border或Panel / </summary> public UIElement TargetParent get; private set; / <summary> / true动画正在进行中 false动画未开始或者已经结束 / </summary> public boo

5、l IsRun get; private set; / <summary> / 实例化 省略号动画动画对象 / </summary> public EllipsisRun() double hw = 8, m = 2, s = 1; init(hw, hw, m, s, Brushes.BlueViolet); / <summary> / 实例化 省略号动画动画对象 / height省略号元素高 / width省略号元素宽 / margion省略号元素边距 / strokeThickness省略号元素裱框 / brush省略号元素填充色 / </sum

6、mary> / <param name="height">省略号元素高</param> / <param name="width">省略号元素宽</param> / <param name="margion">省略号元素边距</param> / <param name="strokeThickness">省略号元素裱框</param> / <param name="brush">省略

7、号元素裱框</param> public EllipsisRun(double height, double width, double margion, double strokeThickness, Brush brush) init(height, width, margion, strokeThickness, brush); private void init(double h, double w, double m, double s, Brush brush) EllipseStyleBase = new Style(typeof(Ellipse); var s_he

8、ight = new Setter(Ellipse.HeightProperty, h); var s_width = new Setter(Ellipse.WidthProperty, w); var s_margin = new Setter(Ellipse.MarginProperty, new Thickness(m); EllipseStyleBase.Setters.Add(s_height); EllipseStyleBase.Setters.Add(s_width); EllipseStyleBase.Setters.Add(s_margin); EllipseStyleNor

9、mal = new Style(typeof(Ellipse), EllipseStyleBase); var s_stroke = new Setter(Ellipse.StrokeProperty, brush); var s_stroke_thickness = new Setter(Ellipse.StrokeThicknessProperty, s); EllipseStyleNormal.Setters.Add(s_stroke); EllipseStyleNormal.Setters.Add(s_stroke_thickness); EllipseStyleHilight = n

10、ew Style(typeof(Ellipse), EllipseStyleBase); var s_fill = new Setter(Ellipse.FillProperty, brush); EllipseStyleHilight.Setters.Add(s_fill); / <summary> / 开始动画 / targetUI 指定要进行动画UI元素（Border或Panel） / 异常： / 1.动画进行中 / 2.targetUI为null或非Border、Panel元素 / </summary> / <param name="target

11、UI">指定要进行动画UI元素（Border或Panel）</param> / <returns></returns> public EllipsisRun Run(UIElement targetUI) if (IsRun) throw new Exception("目标正在使用中"); List<Ellipse> items = null; var parent = createEllipseItems(out items); if (targetUI is Border) (targetUI as Bor

12、der).Child = parent; else if (targetUI is Panel) (targetUI as Panel).Children.Add(parent); else throw new Exception("目标ui只能是Panel或Border类型"); TargetParent = targetUI; _Content = parent; IsRun = true; var task = Task.Factory.StartNew() => int index = 0; while (IsRun) if (index >= item

13、s.Count) index = 0; var index_last = index - 1; if (index_last < 0) index_last = items.Count - 1; var item_last = itemsindex_last; var item_next = itemsindex; targetUI.Dispatcher.Invoke() => item_last.Style = EllipseStyleNormal; item_next.Style = EllipseStyleHilight; ); index+; Thread.Sleep(12

14、0); ); return this; / <summary> / 结束正在进行的动画 / 异常： / 1.动画未进行 / 2.动画已经结束 / </summary> / <returns></returns> public EllipsisRun End() if (IsRun) IsRun = false; Thread.Sleep(200); if (TargetParent is Border) (TargetParent as Border).Child = null; else if (TargetParent is Panel) (TargetParent as Panel).Children.Remove(_Content); return this; else throw new Exception("目标已经停止使用或未开始"); private WrapPanel createEllipseItems(out List<Ellipse> list) list = new List<Ellipse>(); var parent = new Wrap