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

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

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

还是先看效果:
在WPF设计工具Blend2中制作立方体图片效果
制作步骤:
(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">

将上面的图片中的两张换为另两张图片,显示效果如下图:
在WPF设计工具Blend2中制作立方体图片效果

再将它们全部选中,点击菜单物体(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">

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

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

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

秒客网

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

相关文章