Making materials in WPF: A contest between picture and vector graphics

If you want to do one of these things as a background. How would you do it?

Figure 1. Target background effect

Plan one, use PS to draw out. Then take the PNG picture as the background color. This scheme can be, but what if you want the color of this line to be configurable? How is the thickness of the line uncertain? No matter which problem, the way of pixel graph is difficult to solve.

Scenario two, drawing with a vector graph of WPF. This scheme can easily solve the above two problems.

But no matter which way we use it, we don't draw the whole size of the picture. Instead, the drawing is a minimal entity, and then repeats.

Scalar graph Scheme

For the scalar of PS painting, there is a picture below. It then repeats indefinitely within the area to be drawn. Especially do the material on the page is so, to know the size of the picture is not more than the text, all the pictures can be a big picture. and visual designer will be more tired to change.

Figure 2. PNG material picture (enlarged)

For example, the figure is called Twill.png, the size is 6*6. Then use this entity in WPF to create the following code for the material in Figure 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>

By default, this is the perfect material for the solution, which is perfect with fig. 1. But if you use Viewbox to put this picture down, the following phenomenon will appear.

Figure 3. Achieve rendering effect (Viewbox amplification)