WPF中材质制作：图片和矢量图之争

如果要做下面这样的一个东西作为背景。你会如何做呢？

图1. 目标背景效果

方案一，用PS画出来。然后把这个PNG图片作为背景色。这个方案可以，但是 如果想让这个线的颜色可配置呢？如何线的粗细不确定呢？无论哪个问题，用像 素图的方式都不好解决。

方案二，用WPF的矢量图绘制。这个方案可以比较容易地解决上面两个问题。

但是无论我们用哪种方式，都不会把整个图的大小画出来。而是画是一个最小 的图元，然后重复。

标量图方案

对于PS画的标量而言，有下面这样的一个图就可以了。然后在要绘制的区域内 无限重复。尤其是做网页的上的材质都是这样，要知道图片的大小可不是比文字 ，全部绘制出来的话图片可能会很大。而且Visual Designer改起来也会比较累。

图2. PNG材质图片（放大后）

比如这个图叫Twill.png，大小是6*6。那么在WPF中使用这个图元来建立图1中 材质的代码如下。

<DrawingBrush　x:Key="PicTwillBrush"
　　　　　　　　　　　　　　　　　　　　　　 Stretch="Fill"　 TileMode="Tile"
　　　　　　　　　　　　　　　　　　　　　　 Viewport="0,0,6,6"　 ViewportUnits="Absolute">
　　　　　　　　　　　　 <DrawingBrush.Drawing>
　　　　　　　　　　　　　　　　 <ImageDrawing　ImageSource="Textures\Twill.png"　 Rect="0,0,6,6"/>
　　　　　　　　　　　　 </DrawingBrush.Drawing>
　　　　　　　　 </DrawingBrush>

默认情况下，这个用方案一实现的材质很完美，和图1完美一样。但是如果用 ViewBox把这个图片放下之后会出现下面的现象。

图3. 实现渲染效果（ViewBox放大）