关于TileBrush中Viewbox，Viewport以及Stretch，AlignmentX/Y的详细研究

我们知道TileBrush是WPF中一个战斗力爆表的虚基类，从它派生出的DrawingBrush，ImageBrush和VisualBrush在WPF图形编程中发挥着重要作用。然而关于TileBrush的Viewbox、Viewport两大重要属性经常令人感到迷惑，Stretch、AlignmentX/Y两种对齐方式也往往让人搞混。这些知识在MSDN上讲得过于模棱两可，网上似乎也没有能够很清晰并且有条理地讲述它们之间关系的文章。于是今天下午我又牺牲了一下午的大好时光，做了一些实验来研究这个问题。

Silverlight把TileBrush的Viewbox和Viewport去掉了，于是战斗力暴减。

在讲述之前，我假设读这篇文章的你已经知道了这四个玩意的基本用法，比如什么ViewboxUnits之类的东西我就不讲了。若需要入门的话请参阅参考资料[1]和MSDN上的相关内容。本文主要分析TileBrush是如何利用Viewbox，Viewport以及Stretch，AlignmentX/Y来进行绘制的。

首先参考MSDN的一张图片（引用自参考资料[2]）：

左下角表示的是我们的Brush用来绘制的原始素材（以下简称为原图，虽然它不一定来自图片文件）。左上角发亮的部分就是Viewbox区域。右边四个方框就是Viewport区域。可能有人认为右边发灰的部分是不显示的，其实不然，右边的发光部分只是为了突出Viewbox相对于Viewport的位置（默认设置AlignmentX/Y都为Center）。

Viewbox指示了一块基于原图的显示区域。请注意TileBrush并不会在原图中裁减掉Viewbox之外的内容，Viewbox只是起到提示作用，只有和另外三种属性结合到一起才能决定最终的显示效果。

Viewport指示了一块基于画布的显示区域。这里的画布就是包含了这个TileBrush的区域，如果画布开启了ClipToBounds（也在Silverlight中被砍掉了），则不管Viewport如何，超出画布区域之外的像素就都被和谐掉了，不会被绘制。

当指定了Viewbox和Viewport之后，就是Stretch、AlignmentX/Y登场了，它俩决定了Viewbox相对于Viewport的拉伸方式和相对位置。

先看Stretch，它决定了Viewbox相对于Viewport的拉伸方式。Stretch有四种取值：

1、None。取None时，就和什么都没发生一样，没有任何的伸缩调整。此时若Viewbox和Viewport的大小不同，则会根据AlignmentX/Y的取值来调整Viewbox相对于Viewport的位置。参见上图右边左上角的小图。

2、Fill。取Fill时，AlignmentX/Y失去作用，然后将Viewbox拉伸以填满Viewport，原图中Viewbox区域以外的部分将不可见。参见上图右边右上角的小图。

3、Uniform。取Uniform时，将把Viewbox拉伸，直到Viewbox的一个边抵达Viewport的边界为止。此时若Viewbox和Viewport的纵横比不同，则会根据AlignmentX/Y的取值来调整Viewbox相对于Viewport的位置。参见上图右边左下角的小图。

4、UniformToFill。取Uniform时，将把Viewbox拉伸，直到Viewbox的另一个边抵达Viewport的边界为止。此时若Viewbox和Viewport的纵横比不同，则会根据AlignmentX/Y的取值来调整Viewbox相对于Viewport的位置。原图中Viewbox区域以外的部分将不可见。参见上图右边右下角的小图。

再来看AlignmentX/Y。仅当

1、Stretch为Uniform或UniformToFill，并且Viewbox和Viewport具有不同的纵横比

2、Stretch为None并且Viewbox和Viewport具有不同的大小

这两种情况时，才会应用AlignmentX/Y来调整Viewbox相对于Viewport的位置。需要注意的是Viewbox相当于原图的一个把手，AlignmentX/Y移动Viewbox的同时也会移动原图。

这样一来，TileBrush中Viewbox，Viewport以及Stretch，AlignmentX/Y的关系就很明了了。

参考资料：

[1]DragonInSea：WPF and Silverlight 学习笔记（二十九）：Brush（1）

[2]MSDN:TileBrush.Viewbox Property

[3]MSDN:TileBrush.AlignmentX Property

本文来自暗影吉他手的博客，原文地址:http://www.cnblogs.com/lhxarcher/archive/2011/02/20/1959198.html