反射效果(又称"Wet table湿桌子"效果,Reflections) 看起来很优雅;  可以用来展示深度效果。例如，反射效果可以将白色平面背景变成平滑而有光泽的白色镜面。这里，我将带你看看如何用 ScaleTransform 和 opacity mask 在 WPF/E 中创建反射效果。

你将在以下图片的基础上创建反射效果。

完成后的效果如下所示。

1. 下载这个zip文件并打开它: reflection_examples.zip。 找到 reflection_examples\reflection_example 子目录。它包含4个文件: aghost.js, gear_large.png, reflection.html, and reflection.xaml。（若是不清楚这几个文件的更能，请参考WPF/E SDK帮助文档）

2. 打开 reflection.xaml， 找到这段.

   XAML (reflection.xaml)

   <Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!-- The object to reflect. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="20">
     </Image>
   </Canvas>

   在浏览器中打开 reflection.html 来运行这个例子。应该看到如下输出。

   

3. 创建一个复制的图片来用作反射效果.

   XAML (reflection.xaml)

   <Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!-- The object to reflect. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="20">
     </Image>
     <!-- The reflection. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="20">
     </Image>
   </Canvas>

4. 反转这个反射图，让它上下颠倒，创建 ScaleTransform 并设置 ScaleY 属性为 -1.

   XAML (reflection.xaml)

   <Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!-- The object to reflect. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="20">
     </Image>
     <!-- The reflection. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="20">
       <Image.RenderTransform>
         <ScaleTransform ScaleY="-1" />
       </Image.RenderTransform>
     </Image>
   </Canvas>

   运行这个例子，注意这个反转的图片几乎在Canvas外面了.

   

5. 将这个反转图片移动到原始图片的下方。 最直接的方法是调整第二个图片的 Canvas.Top 属性.

   XAML (reflection.xaml)

   <Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!-- The object to reflect. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="20">
     </Image>
   <!-- The reflection. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="258">
       <Image.RenderTransform>
         <ScaleTransform ScaleY="-1" />
       </Image.RenderTransform>
     </Image>
   </Canvas>

   现在这段XAML的输出如下.

   

6. 现在做一些处理，用 opacity mask 做出反射图片的淡出效果.

   XAML (reflection.xaml)

   <Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!-- The object to reflect. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="20">
     </Image>
     <!-- The reflection. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="258">
       <Image.RenderTransform>
         <ScaleTransform ScaleY="-1" />
       </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>
   </Canvas>

   输出如下, 第二个图片现在淡出到背景色.

   

7. 给反射效果加些扭曲变形， 更改 ScaleTransform 中 ScaleY 的值，从 -1 改到 -0.75.

   XAML (reflection.xaml)

   <Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!-- The object to reflect. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="20">
     </Image>
     <!-- The reflection. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="258">
       <Image.RenderTransform>
         <ScaleTransform ScaleY="-0.75" />
       </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>
   </Canvas>

   现在输出如下，注意反射图像的位置需要调整.

   

8. 移动反射图像的位置.

   XAML (reflection.xaml)

   <Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!-- The object to reflect. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="20">
     </Image>
     <!-- The reflection. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="228">
       <Image.RenderTransform>
         <ScaleTransform ScaleY="-0.75" />
       </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>
   </Canvas>

   输出如下，反射图像来到正确的位置上.

   

9. 最后可以做点修饰，更改 opacity 至 0.75，让它的淡出效果更强烈些.

   XAML (reflection.xaml)

   <Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!-- The object to reflect. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="20">
     </Image>
     <!-- The reflection. -->
     <Image Source="gear_large.png"
   Canvas.Left="75" Canvas.Top="228"
   Opacity="0.75">
       <Image.RenderTransform>
         <ScaleTransform ScaleY="-0.75" />
       </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>
   </Canvas>

   完成.

   

-m jacobs  

原文见：http://blogs.msdn.com/wpfedevcon/archive/2007/01/0...