Making cube picture effects in the WPF design tools Blend2

--------------------------------------------------------------------------------
Please keep the following information when referencing:
da can shan [Msn:a3news (at) hotmail.com]
Online graphic image processing of http://www.zpxp.com radish mouse
--------------------------------------------------------------------------------

Or first look at the effect:

Production steps:
(1) By adding an existing item under the Item menu (Project-> add Existing Item), select your picture in the dialog box, and a new file item will be displayed in the right Project project.
(2) You can drag it directly into the Design view, and then, in the case of selected pictures, you need to adjust the size of the picture according to your requirements, adjust the method:
A. In the Right property tab (properties), enter the width and height (default is auto, auto)
B. Drag the Action box "handle" directly around the design view to change the size and position of the picture.
Remind:
(i) Drag the handle directly around the picture, the picture will be scaled proportionally, hold down the SHIFT key while dragging, you can change the picture size disproportionately;
(ii) hold down the ALT key while dragging, it will be proportional to the target Center point (which defaults to the center of the object, but can also change it), or you can hold down the Ctrl key and drag, and you'll test yourself. Of course, you can also hold down SHIFT, CTRL, and then drag, and you'll test yourself.
C. When you move your mouse around the handle, you will notice that in addition to the top and bottom arrow markers used to change the vertical size, there are markers that can be used to rotate or tilt the picture, and if you need to rotate and skew the picture to a parallelogram, press the right mouse button to drag it.
Tip: You can hold down Shift,ctrl at the same time, alt one or its combination to produce the desired image effect.
(3) Repeat steps (2), and finally get a picture of the effect shown above.

To post 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"
"640" height= "width=" >

<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"/>
<translatetransform x= "0" y= " -47.942"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<image rendertransformorigin= "0.5,0.5" stretch= "Fill" horizontalalignment= "left" margin= "9.353,8,0,0" Verticalalignment= "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 two of the above pictures with the other two pictures, the effect is as follows:


Then select all of them and click on the Menu Object (object)-> to join the group ... (Group into)-> border (Border), and then rotate it, and then the front picture and the right side of the picture plus a stereo shadow effect, and finally get the following figure:

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"
"640" height= "width=" >

<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,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,0,0 "width=" 146.302 ">
<Image.RenderTransform>
<TransformGroup>
<scaletransform scalex= "1" scaley= "1"/>
<skewtransform anglex= "0" angley= " -33.180865458091745"/>
<rotatetransform angle= "0"/>
<translatetransform x= "0" y= " -47.942"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<image rendertransformorigin= "0.5,0.5" stretch= "Fill" height= "95.491" source= "20070520024538654.jpg" margin= " 0,0,146.299,0 "verticalalignment=" 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= "#33FFFFFF" 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= "#33FFFFFF" offset= "0.361"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Window>

Next, you can control it with C # code! (If you have time to write another article, how C # controls the picture in WPF to build the faceted effect).

The inspiration for this style comes from the online image processing of radish mouse: http://www.zpxp.com/ZPWeb/qqaaweb/ImageEffects/CubePhoto/CubePhotoSetting.aspx

Next Demo: In Expression Blend to make the side-trapezoid class prism