知识概要：
1.使用2D内容创建3D体验，了解图像的PlaneProjection属性，具体内容读者自己查看文档。
2.Silverlight图形图形的变换效果的使用。
最终的效果如下图：
马上开始动手：
首先准备五张图片：直接在xaml中进行导入：
代码
< Grid x:Name ="LayoutRoot" Background ="Black" > //背景色通过background属性设为黑色 < Image Source ="1.jpg" Stretch ="Fill" Width ="192" Height ="276" /> < Image Source ="2.jpg" Stretch ="Fill" Width ="192" Height ="276" /> < Image Source ="3.jpg" Stretch ="Fill" Width ="192" Height ="276" /> < Image Source ="4.jpg" Stretch ="Fill" Width ="192" Height ="276" /> < Image Source ="5.jpg" Stretch ="Fill" Width ="192" Height ="276" /> </ Grid >
其中的Stretch属性设置为Fill;
知识拓展： 关于Stretch属性的四个值------------------------->Start：
----------------------------------->1.None: 不对图像进行拉伸，使得填充完规定的大小尺寸
----------------------------------->2.Uniform:按比例进行拉伸，直到有一边达到规定的尺寸，其余部分不会被填充
----------------------------------->3.UniformToFill:按比例进行拉伸，直到所以的边都满足规定的尺寸。超出大小部分会被剪裁。
----------------------------------->4.Fill：不按比例拉伸，完全填充规定的尺寸
------END
至此，你已经成功让5张漂亮的图片在屏幕上显示了。
接着，我们试着让它们出现3D透视效果：
代码
< Image Source ="1.jpg" Stretch ="Fill" Width ="192" Height ="276" > < Image.Projection > < PlaneProjection RotationY ="-70" GlobalOffsetX ="-230" GlobalOffsetZ ="-100" /> </ Image.Projection > </ Image > < Image Source ="2.jpg" Stretch ="Fill" Width ="192" Height ="276" > < Image.Projection > < PlaneProjection RotationY ="-70" GlobalOffsetX ="-155" GlobalOffsetZ ="-100" /> </ Image.Projection > </ Image > < Image Source ="3.jpg" Stretch ="Fill" Width ="192" Height ="276" > < Image.Projection > < PlaneProjection RotationY ="70" GlobalOffsetX ="230" GlobalOffsetZ ="-100" /> </ Image.Projection > </ Image > < Image Source ="4.jpg" Stretch ="Fill" Width ="192" Height ="276" > < Image.Projection > < PlaneProjection RotationY ="70" GlobalOffsetX ="155" GlobalOffsetZ ="-100" /> </ Image.Projection > </ Image > < Image Source ="5.jpg" Stretch ="Fill" Width ="192" Height ="276" />
在上述代码中，除了第五张图片不对他进行变化（因为他是放在中间的图片），其它的都通过 Projection的PlaneProjection属性进行设置。
PlaneProjection提供的一套属性使得其中的element具有在3维空间中的形状。其中RotationY是对element在三维坐标中沿着Y轴旋转一定的度数，这里第一张图片旋转-70 ；GlobalOffsetX是在X轴坐标上的偏移。例如：GlobalOffsetX=“-230”，就表示在X负半轴上离原点230个单位处。GlobalOffsetZ与GlobalOffsetX一样，只不过它是在Z轴（垂直于屏幕）的偏移。我们让图像在Z轴向屏幕里面移动100个单位。
到此，我们已经让图片具有3D效果。
接下来，就开始设置倒影：
我们以图片一为例：
代码
< Image Source ="1.jpg" Stretch ="Fill" Width ="192" Height ="276" > < Image.Projection > < PlaneProjection RotationY ="-70" GlobalOffsetX ="-230" GlobalOffsetZ ="-100" /> </ Image.Projection > </ Image > < Image Source ="1.jpg" Stretch ="Fill" Width ="192" Height ="276" Opacity ="0.2" > < Image.RenderTransform > < TransformGroup > < ScaleTransform ScaleY ="-1" /> < TranslateTransform Y ="470" /> < SkewTransform AngleY ="-25" /> </ TransformGroup > </ Image.RenderTransform > < Image.Projection > < PlaneProjection RotationY ="-70" GlobalOffsetX ="-230" GlobalOffsetZ ="-100" /> </ Image.Projection > < Image.OpacityMask > < LinearGradientBrush StartPoint ="0.5,0.0" EndPoint ="0.5,1.0" > < GradientStop Offset ="0.0" Color ="#00000000" /> < GradientStop Offset ="1.0" Color ="#FF000000" /> </ LinearGradientBrush > </ Image.OpacityMask > </ Image >
A.实现思路很简单：
1.复制图片一
2.沿着X轴翻转
3.进行图片的倾斜变换进行调整
4.制作半遮罩效果
-----------------------------知识延伸：（变换效果)-------------------------
Silverlight中的变换是由Transform类来定义，其中主要包括：
RotateTransform:旋转变换
ScaleTransform：缩放变换
SkewTransform：倾斜变换
TranslateTransform：移动变换
TransformGroup：变换组
MatrixTransform：矩阵变换
（ 这里不做具体介绍，具体内容及使用方法请查看文档和相关基础书籍）
--------------------------------------------------------------------------------
复制图片：我们采用在原有图片基础上再导入图片一；沿着X轴翻转，使用ScaleTransform属性，使它的ScaleY="-1",这样就使得图片翻转。然后通过TranslateTransform属性的Y属性在y 轴上进行位置的调整，使得图像一的副本位于图
像一下面的合适位置，但是你会发现，由于之前进行了3D透视变化。两图像并没有在同一基准线上，因此要通过SkewTransform进行图像的倾斜变换。
最后制作对倒影图片制作半遮罩效果，通过Image属性的OpcityMask 属性进行设置。在其中，我们放入了一个
LinearGradientBrush线性渐变画刷，通过设置GradientStop属性的Offset以及Color属性，制作出半遮罩效果。
至此，一个简单的三维透视+倒影效果就做好了。
完整的代码：
代码
< Grid x:Name ="LayoutRoot" Background ="Black" > < Image Source ="1.jpg" Stretch ="Fill" Width ="192" Height ="276" > < Image.Projection > < PlaneProjection RotationY ="-70" GlobalOffsetX ="-230" GlobalOffsetZ ="-100" /> </ Image.Projection > </ Image > < Image Source ="1.jpg" Stretch ="Fill" Width ="192" Height ="276" Opacity ="0.2" > < Image.RenderTransform > < TransformGroup > < ScaleTransform ScaleY ="-1" /> < TranslateTransform Y ="470" /> < SkewTransform AngleY ="-25" /> </ TransformGroup > </ Image.RenderTransform > < Image.Projection > < PlaneProjection RotationY ="-70" GlobalOffsetX ="-230" GlobalOffsetZ ="-100" /> </ Image.Projection > < Image.OpacityMask > < LinearGradientBrush StartPoint ="0.5,0.0" EndPoint ="0.5,1.0" > < GradientStop Offset ="0.0" Color ="#00000000" /> < GradientStop Offset ="1.0" Color ="#FF000000" /> </ LinearGradientBrush > </ Image.OpacityMask > </ Image > < Image Source ="2.jpg" Stretch ="Fill" Width ="192" Height ="276" > < Image.Projection > < PlaneProjection RotationY ="-70" GlobalOffsetX ="-155" GlobalOffsetZ ="-100" /> </ Image.Projection > </ Image > < Image Source ="2.jpg" Stretch ="Fill" Width ="192" Height ="276" Opacity ="0.2" > < Image.RenderTransform > < TransformGroup > < ScaleTransform ScaleY ="-1" /> < TranslateTransform Y ="500" /> < SkewTransform AngleY ="-25" /> </ TransformGroup > </ Image.RenderTransform > < Image.Projection > < PlaneProjection RotationY ="-70" GlobalOffsetX ="-155" GlobalOffsetZ ="-100" /> </ Image.Projection > < Image.OpacityMask > < LinearGradientBrush StartPoint ="0.5,0.0" EndPoint ="0.5,1.0" > < GradientStop Offset ="0.0" Color ="#00000000" /> < GradientStop Offset ="1.0" Color ="#FF000000" /> </ LinearGradientBrush > </ Image.OpacityMask > </ Image > < Image Source ="3.jpg" Stretch ="Fill" Width ="192" Height ="276" > < Image.Projection > < PlaneProjection RotationY ="70" GlobalOffsetX ="230" GlobalOffsetZ ="-100" /> </ Image.Projection > </ Image > < Image Source ="3.jpg" Stretch ="Fill" Width ="192" Height ="276" Opacity ="0.2" > < Image.RenderTransform > < TransformGroup > < ScaleTransform ScaleY ="-1" /> < TranslateTransform Y ="380" /> < SkewTransform AngleY ="25" /> </ TransformGroup > </ Image.RenderTransform > < Image.Projection > < PlaneProjection RotationY ="70" GlobalOffsetX ="230" GlobalOffsetZ ="-100" /> </ Image.Projection > < Image.OpacityMask > < LinearGradientBrush StartPoint ="0.5,0.0" EndPoint ="0.5,1.0" > < GradientStop Offset ="0.0" Color ="#00000000" /> < GradientStop Offset ="1.0" Color ="#FF000000" /> </ LinearGradientBrush > </ Image.OpacityMask > </ Image > < Image Source ="4.jpg" Stretch ="Fill" Width ="192" Height ="276" > < Image.Projection > < PlaneProjection RotationY ="70" GlobalOffsetX ="155" GlobalOffsetZ ="-100" /> </ Image.Projection > </ Image > < Image Source ="4.jpg" Stretch ="Fill" Width ="192" Height ="276" Opacity ="0.2" > < Image.RenderTransform > < TransformGroup > < ScaleTransform ScaleY ="-1" /> < TranslateTransform Y ="380" /> < SkewTransform AngleY ="25" /> </ TransformGroup > </ Image.RenderTransform > < Image.Projection > < PlaneProjection RotationY ="70" GlobalOffsetX ="155" GlobalOffsetZ ="-100" /> </ Image.Projection > < Image.OpacityMask > < LinearGradientBrush StartPoint ="0.5,0.0" EndPoint ="0.5,1.0" > < GradientStop Offset ="0.0" Color ="#00000000" /> < GradientStop Offset ="1.0" Color ="#FF000000" /> </ LinearGradientBrush > </ Image.OpacityMask > </ Image > < Image Source ="5.jpg" Stretch ="Fill" Width ="192" Height ="276" Opacity =" {0.2} " /> < Image Source ="5.jpg" Stretch ="Fill" Width ="192" Height ="276" Opacity ="0.2" > < Image.RenderTransform > < TransformGroup > < ScaleTransform ScaleY ="-1" /> < TranslateTransform Y ="552" /> </ TransformGroup > </ Image.RenderTransform > < Image.OpacityMask > < LinearGradientBrush StartPoint ="0.5,0.0" EndPoint ="0.5,1.0" > < GradientStop Offset ="0.0" Color ="#00000000" /> < GradientStop Offset ="1.0" Color ="#FF000000" /> </ LinearGradientBrush > </ Image.OpacityMask > </ Image > </ Grid >
