WPF中的TileBrush是DrawingBrush,ImageBrush和VisualBrush的基类。定义着这三种Brush的公共特性。本文以ImageBrush做示例,其他类型读者可以举一反三。
TileBrush的Stretch属性默认是Stretch,因此默认TileBrush的内容会拉伸到全部可用空间内:
<ImageBrush ImageSource="/mgenx.jpg"/>
结果:
当然可以调成其他值,此时的TileBrush类似一个Image控件:
<ImageBrush ImageSource="/mgenx.jpg" Stretch="Uniform"/>
结果:
当然如果Stretch属性不是Fill或者UniformToFill的话,TileBrush的AlignmentX和AlignmentY属性就派上用场,它们可以设置内容的停靠位置:
<ImageBrush ImageSource="/mgenx.jpg" Stretch="Uniform" AlignmentX="Right"/>
结果:
好了,上面的TileBrush的功能没有Tile起来啊,这都是TileBrush.TileMode为None的情况(默认为None)。接下来就开始介绍TileBrush的平铺功能,即TileMode不为None的情况。
首先要想平铺,必须先指定块区域的大小,只有定义了一块区域的大小,WPF才会按照这块区域的大小根据设置一块一块得平铺渲染。这个块的大小有两种定义方式,按照相对尺寸或者绝对尺寸,这个通过TileBrush的ViewportUnits属性。具体尺寸数据则是通过TileBrush.Viewport设置(Rect类型)。
比如按照相对尺寸(RelativeToBoundingBox),把区域分成4个平铺块,注意Viewport是Rect类型,而对于相对尺寸来说,前面两个坐标值是没有用的,只需要设置后面的相对比例,0.5代表二分之一。
<ImageBrush ImageSource="/mgenx.jpg" ViewportUnits="RelativeToBoundingBox" Viewport="0 0 0.5 0.5" TileMode="Tile"/>
结果:
也可以设置比1大的,这样相对方向会被放大:
<ImageBrush ImageSource="/mgenx.jpg" ViewportUnits="RelativeToBoundingBox" Viewport="0 0 0.5 1.3" TileMode="Tile"/>
结果:
接下来是绝对尺寸,设置ViewportUnits为Absolute。整个平铺块大小为指定的Viewport值,比如设置成10*10的小格子:
<ImageBrush ImageSource="/mgenx.jpg" ViewportUnits="Absolute" Viewport="0 0 50 50" TileMode="Tile"/>
结果:
此时Viewport作为Rect类型,前两个值(代表一个坐标)可以指定具体偏移量,比如向右偏移15坐标:
<ImageBrush ImageSource="/mgenx.jpg" ViewportUnits="Absolute" Viewport="15 0 50 50" TileMode="Tile"/>
结果:
上面的平铺方式都是按最普通的一个接一个放置的方式,即TileMode为Tile。TileMode还提供不同的平铺方式:FlipX,FlipY和FlipXY值来指定具体反转方向:
FlipX:
<ImageBrush ImageSource="/mgenx.jpg" ViewportUnits="Absolute" Viewport="0 0 30 30" TileMode="FlipX"/>
效果如下:
FlipY:
FlipXY:
最后就是TileBrush的Viewbox和ViewboxUnits属性。这个完全类似Viewport和ViewportUnits属性,只不过Viewport控制平铺块大小,而Viewbox控制平铺快内具体内容的显示模式。从上面示例可以看到,无论我们怎样改变Viewport和ViewportUnits,整个图片都会完整显示的,怎样显示部分内容则需要Viewbox和ViewboxUnits属性。
比如:
<ImageBrush ImageSource="/mgenx.jpg" TileMode="Tile" ViewportUnits="RelativeToBoundingBox" Viewport="0 0 0.5 0.5" ViewboxUnits="RelativeToBoundingBox" Viewbox="0 0 0.5 0.5"/>
结果: