WPF，Silverlight与XAML读书笔记第三十六可视化效果之Visual

说明：本系列基本上是《WPF揭秘》的读书笔记。在结构安排与文章内容上参照《WPF揭秘》的编排，对内容进行了总结并加入一些个人理解。

Visual与其它可视化类之间的继承关系如下图：

其包含了绘制任何东西到屏幕上的底层构造，前面章节我们通过Image将Drawing绘制到屏幕上，Image派生自FrameworkElement，继承层次中多了UIElement与FrameworkElement，它们提供了一些如样式，数据绑定，资源，鼠标支持，路由事件支持等Drawing不需要的特性。如果要绘制大量Drawing到屏幕（如实现横屏滚轴效果），宿主于一个Image会导致很大不必要的开销。

解决方法是使用WPF提供的DrawingVisual这个Visual的子类，其提供了轻量级方法用于将Drawing渲染到屏幕上。虽然DrawingVisual很轻量，其仍然提供了像透明和剪切这样的渲染效果。另外，通过Visual命中测试还可以实现与输入设备的基本交互。

下面我们将分三部分来做详细阐述：

DrawingVisual的填充
DrawingVisual的呈现
Visual的命中测试

DrawingVisual的填充

我们需要调用DrawingVisual的RenderOpen方法得到一个DrawingContent的实例，通过这个对象进行绘制，完成后调用Close方法关闭这个对象。（另外注意，DrawingVisual的Drawing属性是只读的，不能通过设置这个属性完成填充。）

下面是一段典型的填充DrawingVisual的代码：

1 GeometryDrawing drawing = new GeometryDrawing();
2 DrawingVisual visual = new DrawingVisual();
3 using (DrawingContext dc = visual.RenderOpen())
4 {
5     dc.DrawDrawing(drawing);
6 }

这段代码之所以可以实现，因为DrawingContext实现了IDisposal接口，并且在Dispose方法中调用了Close方法。

另外DrawingContext上DrawDrawing（或其它DrawXXX方法）调用的顺序可以直接将z-order的效果体现出来。DrawingContext上提供了一系列DrawingXXX方法，覆盖了Drawing类（GeometryDrawing，ImageDrawing，VideoDrawing和GlyphRunDrawing）提供的所有功能（绘制几何体，图像，文本甚至视频）。

下面表格中列出了DrawingContext提供的方法

DrawRectangle, DrawRoundedRectangle, DrawingEllipse,DrawLine	绘制一些定制的图形（，而无须通过Geometry系列）
DrawGeometry,DrawImage,DrawVideo, DrawGlyphRun,DrawText	无须通过Drawing实例绘制Drawing
DrawDrawing	前文示例中使用的方法，通过Drawing实例绘制Drawing
PushClip,PushEffect, PushGuidelineSet,PushOpacity, PushOpacityMask,PushTransform,Pop	像绘画应用效果
Close	结束绘画命令序列

上表中PushXXX系列与Pop命令用于将透明或旋转等应用到一系列命令上，命令还可以进行嵌套。如PushClip用于设置剪切区域，PushEffect用于应用BitmapEffect效果，Push方法会一直将效果向后续对象作用，直到使用Pop方法移除效果。（.NET Framework4.0中过时）

DrawingContext类是最接近Win32（GDI）的类，所以其性能最高，但需注意的是，其仍然工作于保留模式（而非立即模式）中，所以绘制的图形直到实际用到才会显示。

Visual的呈现

对于是UIElement的Visual，只需要将其设置给ContentControl的Content属性即可在OnRender中被正确的渲染。对于一个不是UIElement的Visual（如DrawingVisual），需要将它们手工添加到某些UIElement的Visual树上（否则只会呈现出Visual对象执行ToString()的结果）。

我们可以在一个顶层的UIElement中设置几千个Visual（而不是在其中放置几千个UIElment），从而可以大大提高应用程序的性能。

将Visual添加到元素的方法是，自定义一个派生自UIElement的类，重写两个基类中protected virtual标记的成员函数：VisualChildrenCount和GetVisualChild。下面是一个自定义类的例子，这个例子中我们把Visual宿主到Window这个UIElement元素中：

 1 using System;
 2 using System.Windows;
 3 using System.Windows.Media;
 4 
 5 public class WindowHostingVisual : Window
 6 {
 7     DrawingVisual visual = null;
 8 
 9     public WindowHostingVisual()
10     {
11         Title = "Render by DrawingVisuals";
12 
13         visual = new DrawingVisual();
14         using (DrawingContext dc = visual.RenderOpen())
15         {
16             //draw
17         }
18 
19         AddVisualChild(visual);
20         AddLogicalChild(visual);
21     }
22 
23     //必须重写的方法
24     protected override int VisualChildrenCount
25     {
26         get { return 1; }
27     }
28 
29     protected override Visual GetVisualChild(int index)
30     {
31         if (index != 0)
32             throw new ArgumentOutOfRangeException("index");
33 
34         return visual;
35     }
36 }

如代码所示，VisualChildrenCount必须返回Window中Visual的个数，这个例子中此值为1。GetVisualChild方法通过索引值返回一个Visual对象，这里只有一个索引值，所以接收的索引值只能是0。

注意，重写VisualChildrenCount与GetVisual方法会使Window的Content属性不再被绘制。另外，在构造函数中调用的AddVisualChild（定义于Visual类中）和AddLogicalChild（定义于FrameworkElement类中）方法将Visual分别注册到可视树与逻辑树，这样路由事件，命中测试和属性继承等才能正常工作。RemoveVisualChild和RemoveLogicalChild可以移除Visual注册。

Visual命中测试

命中测试指的是判断一个点（或一组点）是否与一个给定的对象相交。可视命中测试被所有的Visual对象支持。（由UIElement支持的输入命中测试）

Visual没有UIElement中所提供的输入事件（如MouseLeftButtonDown，MouseMove），要想让Visual也可以响应鼠标操作，需要通过处理所宿主的UIElement的鼠标事件，并在处理函数中通过Visual命中测试来确定鼠标动作是否与一个Visual相关，在相关情况下让Visual响应事件完成定义的操作。

VisualTreeHelper.HitTest方法用于支持命中测试，其最简单的重载接受Visual根对象和要测试的坐标点（相对根元素的坐标）。该方法以根对象起向下遍历可视树，其返回值包含了被命中的最上层的Visual对象。下面是一段示例代码：

 1 protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
 2 {
 3     base.OnMouseLeftButtonDown(e);
 4 
 5     Point location = e.GetPosition(this);
 6         
 7     //对Window进行Visual命中测试
 8     HitTestResult result = VisualTreeHelper.HitTest(this, location);
 9 
10     if (result.VisualHit == visual)
11     {
12         if (visual.Transform == null)
13         {
14             visual.Transform = new RotateTransform();
15         }
16         (visual.Transform as RotateTransform).Angle++;
17     }
18 }

下面是一个综合示例，其中演示了将多个Visual添加到UIElement并管理它们，以及对多个Visual执行命中测试。

 1 using System;
 2 using System.Windows;
 3 using System.Windows.Media;
 4 using System.Collections.Generic;
 5 using System.Windows.Input;
 6 
 7 public class WindowHostingVisual : Window
 8 {
 9     List<Visual> visuals = new List<Visual>();
10 
11     public WindowHostingVisual()
12     {
13         Title = "绘制多个Visual";
14         Width = 300;
15         Height = 350;
16 
17         DrawingVisual bodyVisual = new DrawingVisual();
18         DrawingVisual eyesVisual = new DrawingVisual();
19         DrawingVisual mouthVisual = new DrawingVisual();
20 
21         using (DrawingContext dc = bodyVisual.RenderOpen())
22         {
23             // The body
24             dc.DrawGeometry(Brushes.Blue, null, Geometry.Parse(
25             @"M 240,250
26               C 200,375 200,250 175,200
27               C 100,400 100,250 100,200
28               C 0,350 0,250 30,130
29               C 75,0 100,0 150,0
30               C 200,0 250,0 250,150 Z"));
31         }
32         using (DrawingContext dc = eyesVisual.RenderOpen())
33         {
34             // Left eye
35             dc.DrawEllipse(Brushes.Black, new Pen(Brushes.White, 10),
36               new Point(95, 95), 15, 15);
37             // Right eye
38             dc.DrawEllipse(Brushes.Black, new Pen(Brushes.White, 10),
39              new Point(170, 105), 15, 15);
40         }
41         using (DrawingContext dc = mouthVisual.RenderOpen())
42         {
43             // The mouth
44             Pen p = new Pen(Brushes.Black, 10);
45             p.StartLineCap = PenLineCap.Round;
46             p.EndLineCap = PenLineCap.Round;
47             dc.DrawLine(p, new Point(75, 160), new Point(175, 150));
48         }
49 
50         visuals.Add(bodyVisual);
51         visuals.Add(eyesVisual);
52         visuals.Add(mouthVisual);
53 
54         // 注册到可视树，逻辑树
55         foreach (Visual v in visuals)
56         {
57             AddVisualChild(v);
58             AddLogicalChild(v);
59         }
60     }
61 
62     protected override int VisualChildrenCount
63     {
64         get { return visuals.Count; }
65     }
66     protected override Visual GetVisualChild(int index)
67     {
68         if (index < 0 || index >= visuals.Count)
69             throw new ArgumentOutOfRangeException("index");
70         return visuals[index];
71     }
72 
73     protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
74     {
75         base.OnMouseLeftButtonDown(e);
76 
77         Point location = e.GetPosition(this);
78         // Visual命中测试
79         HitTestResult result = VisualTreeHelper.HitTest(this, location);
80 
81         if (result.VisualHit.GetType() == typeof(DrawingVisual))
82         {
83             DrawingVisual dv = result.VisualHit as DrawingVisual;
84             if (dv.Transform == null)
85                 dv.Transform = new RotateTransform();
86             (dv.Transform as RotateTransform).Angle++;
87         }
88     }
89 }

提示：

DrawingVisual派生自VisualGroup，由于VisualGroup用类似上文综合示例中的代码对VisualChildrenCount与GetVisualChild进行了重载，呈现及命中测试会对所有添加到VisualGroup的子对象起作用。所以，对于上面的例子，我们可以将后两个DrawingVisual(即eyesVisual,mouthVisual)作为子对象添加到第一个DrawingVisual(即bodyVisual)中，然后将bodyVisual关联到Window(UIElement)上即可，DrawingVisual(bodyVisual)会处理剩余工作。

对重叠的Visual进行命中测试

实现这个目标，需要调用HitTest一个接受HittestResultCallback委托的重载，在HitTest返回之前，对每个命中测试成功的Visual会按最顶层到最底层调用该委托。参考下面这段示例代码：

 1 public HitTestResultBehavior HitTestCallback(HitTestResult result)
 2 {
 3     if (result.VisualHit.GetType()==typeof(DrawingVisual))
 4     {
 5         DrawingVisual dv = result.VisualHit as DrawingVisual;
 6         if (dv.Transform == null)
 7         {
 8             dv.Transform = new RotateTransform();
 9         }
10         (dv.Transform as RotateTransform).Angle++;
11     }
12     //继续寻找命中
13     return HitTestResultBehavior.Continue;
14 }

如代码所示，这里最大的不同是，HitTest函数不再返回任何值处理。HitResult的逻辑放在了回调方法中。回调方法返回HitTestResultBehavior枚举两个值之一：Continue或者Stop。从而可以在任何时候停止捕获剩余的Visual对象。代码中第二个参数接收HitTestFilterCallback类型的委托，可以实现在不停止处理的情况下跳过某些Visual的处理。另外注意这个重载方法没有像前面示例那样接收一个Point对象，而是一个包含Point的PointHitTestParameters对象。PointHitTestParameters类是HitTestParameters类（重载方法接收的参数类型）的子类，该类另一个子类是GeometryHitTestParameters，用于对区域进行命中测试。

注意：

不要在回调函数中修改Visual树，否则会导致不正确的结果。应该在回调过程中记录相关信息，并在HitTest返回（可以确保此时所有回调函数已返回）之后再修改。

本文完

参考：

《WPF揭秘》

WPF，Silverlight与XAML读书笔记第三十六 可视化效果之Visual

WPF，Silverlight与XAML读书笔记第三十六可视化效果之Visual