WPF：理解TileBrush（ImageBrush，DrawingBrush和VisualBrush）

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"/>

结果：

Related Posts:

1. WPF：使用RenderTargetBitmap和DrawingVisual为图片添加简单的水印
2. WPF：警惕Path或Line的Stretch属性
3. WPF：通过BitmapSource的CopyPixels和Create方法来切割图片
4. 自定义WPF滚动条(ScrollViewer)：仿苹果系统规划