Create cube image effects in the WPF design tool blend2

--------------------------------------------------------------------------------
Keep the following information when referencing:
Da Keshan[MSN: a3news (AT) hotmail.com]
Online image processing of http://www.zpxp.com radish rat
--------------------------------------------------------------------------------

Let's take a look at the results first:
 
Procedure:
(1) Click "add existing item" under the project menu and select your image in the dialog box, A new file item is displayed in the project on the right;
(2) You can drag the image directly into the design view, and then adjust the image size according to your requirements when selecting the image. The adjustment method is as follows:
A. On the Properties tab on the right, enter the width and height (Auto by default)
B. In the design view, drag the surrounding operation block "handle" to change the image size and position.
Reminder:
(I) directly drag the handle around the image, and the image will be scaled proportionally; hold down the Shift key and drag at the same time, you can change the image size proportionally in one way;
(Ii) Hold down the Alt key and drag it at the same time, it will change proportionally to the target center point (the center of the object by default, but it can also be changed); you can also press and hold the ctrl key to drag, test the specific effect on your own. of course, you can also hold down shift, Ctrl, and ALT at the same time and drag them. Test the specific results by yourself.
C. when you move your mouse around the handle, you will find that in addition to the up, down, and left arrows used to change the vertical size, there are also labels that can be used for image rotation or tilt, if you want to rotate and tilt the image to a parallel four-sided shape, right-click it and drag it.
Tip: You can hold down shift, Ctrl, or Alt at the same time to produce the desired image effect.
(3) Repeat Step (2) to obtain the image with the effect shown above.

Paste the final XAML code:
<Window
Xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
X: class = "transform3d. transoformimage3d"
X: Name = "window"
Title = "transoformimage3d"
Width = "640" Height = "480">

<Grid X: Name = "layoutroot">
<Image rendertransformorigin = "0.5, 0.5" horizontalalignment = "Left" margin = "9.353, 103.491, 0, 2.999" width = "300.273" Source = "200706126569517.jpg" stretch =" fill ">
<Image. rendertransform>
<Transformgroup>
<Scaletransform scalex = "1" scaley = "1"/>
<Skewtransform anglex = "0" angley = "0"/>
<Rotatetransform angle = "0"/>
<Translatetransform x = "0" Y = "0"/>
</Transformgroup>
</Image. rendertransform>
</Image>
<Image stretch = "fill" rendertransformorigin = "0.5, 0.5" margin = "309.623, 103.71, 176.075, 2.78" Source = "200706126569517.jpg">
<Image. rendertransform>
<Transformgroup>
<Scaletransform scalex = "1" scaley = "1"/>
<Skewtransform anglex = "0" angley = "-33.180865458091745"/>
<Rotatetransform angle = "0"/>
<Maid x = "0" Y = "-47.942"/>
</Transformgroup>
</Image. rendertransform>
</Image>
<Image rendertransformorigin = "0.5, 0.5" stretch = "fill" horizontalalignment = "Left" margin = "9.353, 0 "verticalignment =" TOP "width =" 300.273 "Height =" 95.491 "Source =" 200706126569517.jpg">
<Image. rendertransform>
<Transformgroup>
<Scaletransform scalex = "1" scaley = "1"/>
<Skewtransform anglex = "-56.803" angley = "0"/>
<Rotatetransform angle = "0"/>
<Translatetransform x = "72.972" Y = "0"/>
</Transformgroup>
</Image. rendertransform>
</Image>
</GRID>
</WINDOW>

Replace the two images in the above image with the other two images. The display effect is as follows:

Then select all of them and click the menu Object> join group... (group into)-> border (Border), then rotate it, add a three-dimensional shadow effect to the front image and the image on the right, and finally get:

The resulting XAML code:
<Window
Xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
X: class = "transform3d. transoformimage3d"
X: Name = "window"
Title = "transoformimage3d"
Width = "640" Height = "480">

<Grid X: Name = "layoutroot">
<Border opacitymask = "{X: NULL}" rendertransformorigin = "0.5, 0.5" margin = "56.588, 29.547, 181.438, 32.495" background = "{X: null} "borderbrush =" {X: NULL} "borderthickness =" 1, 1, 1 ">
<Border. rendertransform>
<Transformgroup>
<Scaletransform scalex = "1" scaley = "1"/>
<Skewtransform anglex = "0" angley = "0"/>
<Rotatetransform angle = "18.587"/>
<Translatetransform x = "0" Y = "0"/>
</Transformgroup>
</Border. rendertransform>
<Grid>
<Image rendertransformorigin = "0.5, 0.5" Source = "200706126569517.jpg" stretch =" fill "margin =" 0, 95.491, 146.299, 0.219 ">
<Image. rendertransform>
<Transformgroup>
<Scaletransform scalex = "1" scaley = "1"/>
<Skewtransform anglex = "0" angley = "0"/>
<Rotatetransform angle = "0"/>
<Translatetransform x = "0" Y = "0"/>
</Transformgroup>
</Image. rendertransform>
</Image>
<Image stretch = "fill" rendertransformorigin = "0.5, 0.5" Source = "20070520023537779.jpg" horizontalalignment =" right "margin =" 0, 95.71, 146.302 "width =" ">
<Image. rendertransform>
<Transformgroup>
<Scaletransform scalex = "1" scaley = "1"/>
<Skewtransform anglex = "0" angley = "-33.180865458091745"/>
<Rotatetransform angle = "0"/>
<Maid x = "0" Y = "-47.942"/>
</Transformgroup>
</Image. rendertransform>
</Image>
<Image rendertransformorigin = "0.5, 0.5" stretch = "fill" Height = "95.491" Source = "20070520024542554.jpg" margin =" 146.299, 0 "verticalignment =" TOP ">
<Image. rendertransform>
<Transformgroup>
<Scaletransform scalex = "1" scaley = "1"/>
<Skewtransform anglex = "-56.803" angley = "0"/>
<Rotatetransform angle = "0"/>
<Translatetransform x = "72.972" Y = "0"/>
</Transformgroup>
</Image. rendertransform>
</Image>
</GRID>
</Border>
<Rectangle opacitymask = "{X: NULL}" rendertransformorigin = "0.5, 0.5" margin = "272.015, 194.182, 215.231,-33.09" stroke = "{X: NULL}">
<Rectangle. rendertransform>
<Transformgroup>
<Scaletransform scalex = "1" scaley = "1"/>
<Skewtransform anglex = "0" angley = "-33.008"/>
<Rotatetransform angle = "18.587"/>
<Translatetransform x = "25.521" Y = "-75.892"/>
</Transformgroup>
</Rectangle. rendertransform>
<Rectangle. Fill>
<Lineargradientbrush endpoint = "0.017, 0.985" startpoint = "0.582, 0.398">
<Gradientstop color = "# ff000000" offset = "1"/>
<Gradientstop color = "#33 ffffff" offset = "0.361"/>
</Lineargradientbrush>
</Rectangle. Fill>
</Rectangle>
<Rectangle opacitymask = "{X: NULL}" rendertransformorigin = "0.5, 0.5" stroke = "{X: NULL}" horizontalalignment = "Left" margin = "36.351, 132.398, 0, 28.694 "width =" 245.267 ">
<Rectangle. rendertransform>
<Transformgroup>
<Scaletransform scalex = "1" scaley = "1"/>
<Skewtransform anglex = "0" angley = "0.222"/>
<Rotatetransform angle = "18.587"/>
<Translatetransform x = "10.446" Y = "-31.063"/>
</Transformgroup>
</Rectangle. rendertransform>
<Rectangle. Fill>
<Lineargradientbrush endpoint = "-0.189, 1.11" startpoint = "0.938, 0.139">
<Gradientstop color = "# ff000000" offset = "1"/>
<Gradientstop color = "#33 ffffff" offset = "0.361"/>
</Lineargradientbrush>
</Rectangle. Fill>
</Rectangle>
</GRID>
</WINDOW>

Next, you can use the C # code to control it! (If you have time to write another article, how to C # control the image in WPF to build a polygon effect ).

This style is inspired by radish mouse online graphic image processing: http://www.zpxp.com/ZPWeb/qqaaweb/ImageEffects/CubePhoto/CubePhotoSetting.aspx

Next Demonstration: create a class prism with a trapezoid side in expression Blend