学Silverlight 2系列（31）：图形图像综合实例—实现水中倒影效果

核心提示： Step 3：创建倒影复制一张图片，使其位置与原始图片一样，学Silverlight 2系列（31）：图形图像综合实例—实现水中倒影效果(2)，然后我们使用ScaleTransform进行创建图片的倒影，这时图片已经翻转到了屏幕的外面，可以通过调节Canvas.Top进行调节，或者使用Tr

Step 3：创建倒影

复制一张图片，使其位置与原始图片一样，然后我们使用ScaleTransform进行创建图片的倒影，这时图片已经翻转到了屏幕的外面，可以通过调节Canvas.Top进行调节，或者使用TranslateTransform：

<Canvas Background="#000000">
　　<Image Canvas.Top="20" Canvas.Left="182" Source="a.png">
　　</Image>
　　<Image Canvas.Top="20" Canvas.Left="182" Source="a.png" Opacity="0.4">
　　　　<Image.RenderTransform>
　　　　　　<TransformGroup>
　　　　　　　　<ScaleTransform ScaleY="-1"></ScaleTransform>
　　　　　　　　<TranslateTransform Y="320"></TranslateTransform>
　　　　　　</TransformGroup>
　　　　</Image.RenderTransform>
　　</Image>
</Canvas>

运行后看起来如下所示：

Step 4：半透明遮罩

利用我们在图片处理一文介绍过的OpacityMask属性实现半透明遮罩，使其看起来更加像倒影:)

<Canvas Background="#000000">
　　<Image Canvas.Top="20" Canvas.Left="182" Source="a.png">
　　</Image>
　　<Image Canvas.Top="20" Canvas.Left="182" Source="a.png">
　　　　<Image.RenderTransform>
　　　　　　<TransformGroup>
　　　　　　　　<ScaleTransform ScaleY="-1"></ScaleTransform>
　　　　　　　　<TranslateTransform Y="320"></TranslateTransform>
　　　　　　</TransformGroup>
　　　　</Image.RenderTransform>
　　　　<Image.OpacityMask>
　　　　　　<LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0.0">
　　　　　　　　<GradientStop Offset="0.0" Color="#00000000" />
　　　　　　　　<GradientStop Offset="1.0" Color="#FF000000" />
　　　　　　</LinearGradientBrush>
　　　　</Image.OpacityMask>
　　</Image>
</Canvas>

运行后效果如下，倒影图片显示出了淡出效果：