在WPF设计工具Blend2中制作立方体图片效果

原文:在WPF设计工具Blend2中制作立方体图片效果

--------------------------------------------------------------------------------
引用时请保留以下信息：
大可山 [MSN:a3news(AT)hotmail.com]
http://www.zpxp.com 萝卜鼠在线图形图像处理
--------------------------------------------------------------------------------

还是先看效果:
 
制作步骤:
(1)在项目菜单下按增加已存在项(Project -> Add Existing Item),在对话框中选择你的图片,此时在右边Project项目中将新增一个文件项显示;
(2)你可以将它直接拖入设计视图内部,之后,在选中图片的情况下,你需要根据你的要求调整图片的大小,调整方法:
a.在右边属性选项卡(Properties)中,输入宽度和高度(默认为Auto,自动)
b.在设计视图中直接拖动四周的操作方块"把柄"以改变图片的大小和位置.
提醒:
(i)直接拖动图片周围的把柄,图片将成比例缩放;按住Shift键同时拖动,可以单向不成比例地改变图片大小;
(ii)按住Alt键同时拖动,则将以目标中心点(默认是物体的中心,但也可以改变它)成比例改变;也可以按住Ctrl键拖动,具体效果你自行测试.当然,你还可以同时按住Shift, Ctrl, Alt键后拖动,具体结果你自己测试.
c.将你的鼠标在把柄周围移动时,你会发现除了用于改变横纵向大小的上下左右箭头标记外,还有可用于图片旋转或倾斜的标记,如果你需要旋转和使图片倾斜为平行四边形状,此时按下鼠标右键拖拉它.
提示:你可以同时按住Shift,Ctrl, Alt之一或其组合,产生你想要的图片效果.
(3)重复步骤(2),最终得到如上面所示效果的图片.

贴出最终的XAML代码:
<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"/>
     <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>

将上面的图片中的两张换为另两张图片,显示效果如下图:


再将它们全部选中,点击菜单物体(Object) -> 加入组...(Group Into) -> 边框(Border),然后旋转它,再对正面图片及右侧面的图片加上立体阴影效果,最后得到下图:

得到的XAML代码:
<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,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>

下一步,可以用C#代码控制它!(有空再写出另一篇文章,如何C#控制WPF中的图片进构建多面体效果).

此样式的灵感来源于萝卜鼠在线图形图像处理: http://www.zpxp.com/ZPWeb/qqaaweb/ImageEffects/CubePhoto/CubePhotoSetting.aspx

下一篇演示:在Expression Blend中制作侧面为梯形的类棱柱体