WPF-18: Drawing and Animation

From "Introduction to WPF" (Liu Tiemeng) reading notes

There are three elements to the success of a software project: resources, cost, and time.

Vector Image: No aliasing occurs no matter how you zoom in/out.

XAML images can be drawn directly using Blend; Design can draw graphics like Photoshop or Fireworks, and then export to png or XAML format at the designer's discretion.

The basic graphics of WPF include the following (all are derived from the Shape class):

1) Line: Stroke can be set;

2) Rectangle: both strokes and fills;

3) Ellipse: stroke + fill;

4) Polygon: polygon, stroke + fill;

5) Polyline: Polyline (not closed), consisting of multiple straight line segments connected end to end;

6) Path: Path (closed area)

The drawing ratio must be done in Canvas, which can be done in any layout control, commonly used drawing containers: Canvas, Grid.

The WPF drawing system contains a very rich Brush type (abstract class), commonly used by:

i)SolidColorBrush;

ii) LinearGradientBrush: Linear gradient brush. The color is gradient along the set line direction, according to the set change point;

iii) RadialGradientBrush: radial gradient brush;

iv) ImageBrush: use image as filling content;

v) DrawingBrush: Use Vector and Bitmap as filling content;

vi) VisualBrush: Image fill.

The Data property of Path is the Geometry class, but the Geometry class is an abstract class, so you cannot use the <Geometry> tag directly in XAML. Geometry subclasses include: LineGeometry, RectangleGeometry, EllipseGeometry, PathGeometry, StreamGeometry, CombineGeometry, GeometryGroup.

Line segments have no starting point (StartPoint), because the starting point is the end point of the previous line segment, and the starting point of the first line segment is the StartPoint of PathFigure.

Drawing using path markup syntax is generally divided into three steps: moving to the starting point - "drawing -" closing the graph. The syntax is not case sensitive.


Filter plug-in: The Effect property of the UIElement class, which is located in the System.Windows.Media.Effects namespace, and its derived classes are: Blureffect, DropShadowEffect, ShaderEffect.

There are two properties that control deformation, they are:

i) RenderTransform: Rendering transformation, defined in the UiElement class;

ii) LayoutTransform: Layout transformation, defined in the FrameworkElement class.

An instance of a derived class of the Transform class can be used to assign values ​​to both properties. The derived classes of the Transform abstract class are:

a) MatrixTransform: rectangle deformation;

b) RoateTransform: rotational deformation;

c) ScaleTransform: coordinate system deformation;

d) SkewTransform: stretch deformation;

e) TranslateTransform: offset deformation;

f) TransformGroup: deformation group.

Rendering deformation only changes where the element "appears", so it does not involve changes to the layout, only the redrawing of the form, which is fast - consider making animations.

Layout deformations are generally only used for static deformations, not for animation.


The essence of animation is the continuous change of object position, angle, color, transparency and other attribute values ​​within a period of time. Properties that can be used to animate in WPF must be dependency properties.

Simple linear animation: It only consists of four elements: the starting point of change, the ending point of change, the magnitude of change, and the time of change.



Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325644327&siteId=291194637