我们知道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]):

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

左下角表示的是我们的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

05-11 05:21