WPF基础入门——绘画和动画(Draw&Animation)

发布时间 2023-05-29 21:27:02作者: Swbna

本篇文章学习于: 刘铁猛老师《深入浅出WPF》

  • XAML语言针对的是界面美化问题,可以让设计师直接加入开发团队、降低沟通成本。XAML的图形绘制功能非常强大,可以轻易绘制出复杂的图标、图画。
  • WPF支持“滤镜”功能,可以像Photoshop那样为对象添加各种效果。
  • WPF原生支持动画开发,无论是设计师还是程序员,都能够使用XAML 或C#轻松开发制作出炫丽的动画效果
  • WPF原生支持3D效果,甚至可以将其他3D建模工具创建的模型导入进来、为我所用。
  • Blend作为专门的设计工具让 WPF 如虎添翼,既能帮助不了解编程的设计师快速上手,又能帮助资深开发者快速建立图形或动画的原型。

WPF 绘图

WPF的基本图形包括以下几个(它们都是Shape类的派生类):

  • Line:直线段,可以设置其笔触(Stroke)。
  • Rectangle:矩形,既有笔触,又有填充(Fill)。
  • Ellipse:椭圆,长、宽相等的椭圆即为正圆,既有笔触又有填充。
  • Polygon:多边形,由多条直线段围成的闭合区域,既有笔触又有填充。
  • Polyline:折线(不闭合),由多条首尾相接的直线段组成。
  • Path:路径(闭合区域),基本图形中功能最强大的一个,可由若干直线、圆弧、贝塞尔曲线组成。

直线

直线是最简单的图形。使用X1、Y1两个属性可以设置它的起点坐标,X2、Y2两个属性则用来设置其终点坐标。控制起点/终点坐标就可以实现平行、交错等效果。Stroke(笔触)属性的数据类型是Brush(画刷),凡是 Brush的派生类均可用于给这个属性赋值。因为WPF提供了多种渐变色画刷,所以画直线也可以画出渐变效果。同时,Line 的一些属性还帮助我们画出虚线以及控制线段终点的形状。
示例:
image.png
image.png
image.png

矩形

矩形由笔触(Stroke,即边线)和填充(Fill)构成。Stroke属性的设置与Line一样,Fill属性的数据类型是Brush。Brush是个抽象类,所以我们不可能拿一个Brush类的实例为Fill属性赋值而只能用Brush派生类的实例进行赋值。
WPF的绘图系统包含非常丰富的Brush类型,常用的有:

  • SolidColorBrush:实心画刷。在XAML中可以使用颜色名称字符串(如Red、Blue)直接赋值。
  • LinearGradientBrush:线性渐变画刷。色彩沿设定的直线方向、按设定的变化点进行渐变。
  • RadialGradientBrush:径向渐变画刷。色彩沿半径的方向、按设定的变化点进行渐变,形成圆形填充。
  • ImageBrush:使用图片((Image)作为填充内容。
  • DrawingBrush:使用矢量图( Vector)和位图(Bitmap)作为填充内容。
  • VisualBrush : WPF中的每个控件都是由 FrameworkElement类派生来的,而FrameworkElement又是由 Visual类派生来的。Visual意为“可视”之意,每个控件的可视化形象就可以通过Visual类的方法获得。获得这个可视化的形象后,我们可以用这个形象进行填充,这就是VisualBrush。比如当我想把窗体上的某个控件拖拽到另一个位置,当鼠标松开之前需要在鼠标指针下显现一个控件的“幻影”,这个“幻影”就是用VisualBrush填充出来的一个矩形,并让矩形捕捉鼠标的位置、随鼠标移动。

示例:
image.png
image.png
image.png

椭圆

椭圆也是一种常用的几何图形,它的使用方法与矩形没有什么区别。
下面的例子是绘制一个球体,球体的轮廓是正圆(Circle),Width与Height相等的椭圆即是正圆;球体的光影效果使用径向渐变实现。XAML代码如下:
image.png
image.png
image.png

路径 Path

路径(Path)可以说是WPF绘图中最强大的工具,一来是因为它完全可以替代其他几种图形,二来它可以将直线、圆弧、贝塞尔曲线等基本元素结合进来,形成更复杂的图形。路径最重要的一个属性是Data,Data 的数据类型是Geometry(几何图形),我们正是使用这个属性将一些基本的线段拼接起来、形成复杂的图形。
为Data属性赋值的语法有两种:一种是标签式的标准语法,另一种是专门用于绘制几何图形的“路径标记语法”。本小节我们借助标准语法认识各种基本线段,下一小节我们将学习绘制几何图形的路径标记语法。
想要使用Path绘制图形,首先要知道几何图形数据是如何组合在Data属性中的。Path的 Data属性是Geometry类,但Geometry类是个抽象类,所以我们不可能在XAML 中直接使用标签。

动画

何为动画?动画自然就是“会动的画”。所谓“会动”不光指位置会移动,还包括角度的旋转、颜色的变化、透明度的增减等。细心的读者一定已经发现,动画本质就是在一个时间段内对象位置、角度、颜色、透明度等属性值的连续变化。这些属性中,有些是对象自身的属性,有些则是上一节所学的图形变形的属性。
有一点需要注意,WPF规定,可以用来制作动画的属性必须是依赖属性。
变化即是运动。WPF的动画也是一种运动,这种运动的主体就是各种UI元素,这种运动本身就是施加在UI元素上的一些Timeline派生类的实例。在实际工作中,我们要做的事情往往就是先设计好一个动画构思、用一个Timeline派生类的实例加以表达,最后让某个UI元素来执行这个动画、完成动画与动画主体的结合。
简单的动画由一个元素来完成就可以了,就像一个演员的独角戏,WPF把简单动画称为AnimationTimeline。复杂的(即并行的、复合的)动画就需要UI上的多个元素协同完成,就像电影中的一段场景。复杂动画的协同包括有哪些UI元素参与动画、每个元素的动画行为是什么、动画何时开始何时结束等。WPF把一组协同的动画也称为Storyboard。
Timeline、AnimationTimeline和 Storyboard的关系