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

简介: 原文:在WPF设计工具Blend2中制作立方体图片效果 --------------------------------------------------------------------------------引用时请保留以下信息:大可山 [MSN:a3news(AT)hotmail.
原文: 在WPF设计工具Blend2中制作立方体图片效果

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

还是先看效果:
在Blend中制作的立方体效果 
制作步骤:
(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中制作侧面为梯形的类棱柱体

目录
相关文章
|
C# 前端开发
WPF - 图形设计器(Diagram Designer)
原文:WPF - 图形设计器(Diagram Designer)   OpenExpressApp计划中包括建模工具,计划是采用MetaEdit+模型来作为元模型,使用codeproject的《WPF Diagram Designer》一系列文章来做为设计器实现参考,本篇介绍一下codeprojcet的这四个文章,推荐给对图形设计器感兴趣的人去看看,通过WPF的模板功能和其他功能可以很方便的设计出图形编辑器。
3592 0
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
C#WPF 图片在显示时没有问题,但在运行时图片显示不出来的解决
选中项目,点击右上角的显示全部文件按钮,会将默认隐藏的文件显示出来,选中所需图片,右键,添加到项目,然后选择图片查看属性,生成操作选择resource。完毕。本人目前的解决方案。
502 41
C#WPF 图片在显示时没有问题,但在运行时图片显示不出来的解决
|
C#
2000条你应知的WPF小姿势 基础篇<45-50 Visual Tree&Logic Tree 附带两个小工具>
2000条你应知的WPF小姿势 基础篇<45-50 Visual Tree&Logic Tree 附带两个小工具>
120 0
|
7月前
|
文字识别 C# 开发者
WPF开源的一款免费、开箱即用的翻译、OCR工具
WPF开源的一款免费、开箱即用的翻译、OCR工具
127 0
|
7月前
|
C#
浅谈WPF之ToolTip工具提示
在日常应用中,当鼠标放置在某些控件上时,都会有相应的信息提示,从软件易用性上来说,这是一个非常友好的功能设计。那在WPF中,如何进行控件信息提示呢?这就是本文需要介绍的ToolTip【工具提示】内容,本文以一些简单的小例子,简述如何在WPF开发中,应用工具提示,仅供学习分享使用,如有不足之处,还请指正。
100 2
|
程序员 C# 异构计算
一个为程序员定制的、WPF开发的小巧、美观桌面快捷工具
一个为程序员定制的、WPF开发的小巧、美观桌面快捷工具
116 0
|
C#
WPF Image Source 设置相对路径图片
原文:WPF Image Source 设置相对路径图片   BitmapImage bt = new BitmapImage(new Uri("Images\\3_u10484.png", UriKind.Relative));this.Img1.Source = bt;
4026 0
|
C#
【WPF】ImageMagick调节图片的颜色
原文:【WPF】ImageMagick调节图片的颜色 需求:打开一张图片后,自由调节图片的颜色(色调)。 思路:读取显示一张图片后,用ColorPicker取色器选择一种颜色,之后将图片的色调调节为该颜色。
1563 0