Go deep into imagebrush in WPF 2-how to lay imagebrush

2-The way imagebrush is laid reference: http://blog.csdn.net/johnsuna/article/details/1772969

Radish RAT online Image Processing
--------------------------------------------------------------------------------

Undertake the previous article: go deep into the image painting brush in WPF (imagebrush) 1 -- imagebrush use example. This article focuses on the way imagebrush is laid.

First, let's take a look at the effect of imagebrush when the laying method is not used:

Figure 1 is the source image, and figure 2, 3, and 4 are the effects of filling the image with an imagebrush into an ellipse.
The XAML code in Figure 1:
<Border width = "142" borderbrush = "# ff000000" borderthickness = "0.5, 0.5" rendertransformorigin = "11.159," horizontalalignment = "Left" margin = "8, 150 "verticalalignment =" TOP "Height =" ">
<Image Source = "xian.png" stretch = "fill"Width = "142" Height = "150"/>
</Border>
(Border is used to locate and draw borders)

The XAML code in Figure 2:
<Ellipse X: Name = "ellipsewithimagebrush" stroke = "# ff000000" Height = "150" margin = "169.557, 0 "horizontalalignment =" Left "width =" 150 "D: layoutoverrides =" height "verticalalignment =" TOP ">
<Ellipse. Fill>
<Imagebrush imagesource = "xian.png"/>
</Ellipse. Fill>
</Ellipse>
Here the fill attribute of ellipse is used, so that imagebrush is used as the filling brush of ellipse.

The XAML code in Figure 3:
<Ellipse X: Name = "ellipsfillwithimagebrush" stroke = "# ff000000" rendertransformorigin = "0.5, 0.5" margin = "0, 11.159, 167.443, 0 "verticalalignment =" TOP "Height =" 150 "horizontalalignment =" right "width =" 150 ">
<Ellipse. Fill>
<Imagebrush imagesource = "xian.png" viewport = "-0.05,-0.1, 1, 1.1"/>
</Ellipse. Fill>
</Ellipse>

Figure 4 XAML code:
<Ellipse X: Name = "ellipsfillwithimagebrushfill" stroke = "# ff000000" rendertransformorigin = "0.5, 0.5" margin =, 150 "verticalalignment =" TOP "Height =" 150 "horizontalalignment =" right "width =" ">
<Ellipse. Fill>
<Imagebrush imagesource = "xian.png" viewport = "-0.16,-0.16, 1.18, 1.28"/>
</Ellipse. Fill>
</Ellipse>
You can compare the effect of the viewport parameter on the final effect. (For more information about viewport, see later)

Let's take a look at the effects of various Laying Methods in imagebrush:

The following describes different auxiliary settings and their codes.

From 5 to 9, we used viewport = "0.3, 0.3," In imagebrush ". The first two parameters (0, 0) represent the starting position, and the last two parameters (0.3, 0.3) represent the scaling ratio. Example 5 (XAML code ):
<Ellipse X: Name = "ellipsfillwithimagebrushtile" stroke = "# ff000000" horizontalalignment = "Left" margin = "8,177.015, 0,240.985" width = "208" Height = "208">
<Ellipse. Fill>
<Imagebrush imagesource = "xian.png"
Viewport = "0,0, 0.3, 0.3"
Tilemode = "NONE"
Alignmentx = "left"
Alignmenty = "TOP"
/>
</Ellipse. Fill>
</Ellipse>
(Tilemode. None is used. Therefore, the small and medium-sized circular images are not tiled. Only a small image is placed in the upper left corner)

The XAML code in Figure 6:
<Ellipse X: Name = "regular" stroke = "# ff000000" rendertransformorigin = "0.5, 0.5" Height = "208" D: layoutoverrides = "height" margin = "225,177.015, 219,240.985 ">
<Ellipse. Fill>
<Imagebrush imagesource = "xian.png"
Tilemode = "flipx"
Alignmentx = "left"
Alignmenty = "TOP"
Viewport = "0,0, 0.3, 0.3"
/>
</Ellipse. Fill>
</Ellipse>
Note: Because tilemode. flipx is used here, we find that the image performs symmetric inversion in the horizontal (x) Direction.

Figure 7 XAML code:
<Ellipse X: Name = "ellipsfillwithimagebrushtile_copy1" stroke = "# ff000000" rendertransformorigin = "0.5, 0.5" margin = "0,177.015, 4,240.985" D: layoutoverrides = "width" horizontalalignment = "right" width = "208" Height = "208">
<Ellipse. Fill>
<Imagebrush imagesource = "xian.png"
Viewport = "0,0, 0.3, 0.3"
Tilemode = "flipy"
Alignmentx = "left"
Alignmenty = "Top"
/>
</Ellipse. Fill>
</Ellipse>
Note: Because tilemode. flipy is used here, we find that the image is in the vertical (y) direction and the image is in symmetric inversion (upright/inverted ).

Figure 8 XAML code:
<Ellipse X: Name = "ellipsfillwithimagebrushtile_copy4" stroke = "# ff000000" rendertransformorigin = "0.5, 0.5" width = "208" Height = "208" D: layoutoverrides = "Width, height "horizontalalignment =" Left "margin =", "verticalignment =" bottom ">
<Ellipse. Fill>
<Imagebrush imagesource = "xian.png"
Viewport = "0,0, 0.3, 0.3"
Tilemode = "tile"
Alignmentx = "left"
Alignmenty = "TOP"
/>
</Ellipse. Fill>
</Ellipse>
Note:Because tilemode. tile is used here, we find that the image is tiled together and filled into the circle, but there is no symmetrical reversal of the image.

Figure 9 XAML code:
<Ellipse X: Name = "ellipsfillwithimagebrushtile_copy2" stroke = "# ff000000" rendertransformorigin = "0.5, 0.5" margin = "225,0, 219,8" D: layoutoverrides = "height" verticalignment = "bottom" Height = "208">
<Ellipse. Fill>
<Imagebrush imagesource = "xian.png"
Viewport = "0,0, 0.3, 0.3"
Tilemode = "flipxy"
Alignmentx = "left"
Alignmenty = "TOP"
/>
</Ellipse. Fill>
</Ellipse>
Note:Tilemode is used here. flipxy, we found that the image not only performs symmetric inversion in the horizontal direction, but also performs symmetric inversion (vertical/inverted) in the vertical (y) Direction ).

Figure 10 XAML code:
<Ellipse X: Name = "ellipsfillwithimagebrushtile_copy" stroke = "# ff000000" rendertransformorigin = "0.5, 0.5" Height = "208" D: layoutoverrides = "height" horizontalalignment = "right" margin = "208," verticalignment = "bottom" width = "">
<Ellipse. Fill>
<Imagebrush imagesource = "xian.png"
Viewport = "0,0, 0.18, 0.18"
Tilemode = "flipxy"
Alignmentx = "left"
Alignmenty = "TOP"
/>
</Ellipse. Fill>
</Ellipse>
Compare figures 9 and 10 to see their code. The value of the viewport attribute is determined"0.3, 0.3"Changed"0.18, 0.18"In this way, we can see that the proportion of small images filled in is smaller (of course, more small images can be placed ).

It should be noted that the viewport is represented by a rect object in WPF. If you need to specify the absolute value instead of the scaling ratio, you need to set brushmappingmode to brushmappingmode. Absolute. Specify the absolute value of viewport. For example, change the XAML code corresponding to figure 6:
<Imagebrush
Viewport = "0, 0, 25, 25"
Viewportunits = "absolute"
Tilemode = "tile"
Imagesource = "xian.png"/>

Then, the following results are obtained:

Fill the thumbnail here. The width and height of each graph are 25 or 25 pixels respectively.

To make everyone better impressed, we may wish to compare it with the image painting brush of GDI +.
In GDI +, the image in WPF corresponds to texturebrush and imagebrush. tilemode corresponds to texturebrush. wrapmode, And the enumerated value of wrapmode (note that the "enumerated value") is: clamp, tile,

Tileflipx, tileflipy, and tileflipxy correspond to none, tile, flipx, flipy, and flipxy of the tilemode attribute values (note: "attribute values.
Unlike specifying the viewport attribute in WPF to control the starting point and image scaling, the following is the difference: in GDI +, graphic. renderingorigin will have an impact on the starting position of the image painting in texturebrush. If you need to perform geometric scaling on the part of the texturebrush object, you can use the scaletransform () method, for example:
Public void scaletransform_example (painteventargs E)
{
Texturebrush tbrush = new texturebrush (New Bitmap ("texture.jpg "));
Tbrush. scaletransform (2, 1, matrixorder. prepend );
E. Graphics. fillrectangle (tbrush, 0, 0,100,100 );
}