Fun with Silverlight系列之一 －－ 倒影效果

不过这种直截了当的倒影似乎并不符合我们的审美观，让我们再添加一些渐变效果让控件仿佛倒影在水中一般

1　<InkPresenter Canvas.Left="70" Canvas.Top="180" Name="inkMirror" Width="400" Height="100"
2
3RenderTransformOrigin="0.5,0.5">
4　　<InkPresenter.RenderTransform>
5　　　<TransformGroup>
6　　　　<ScaleTransform ScaleX="1" ScaleY="-1" />
7　　　　<TranslateTransform Y="1" />
8　　　</TransformGroup>
9　　</InkPresenter.RenderTransform>
10　　<Rectangle Width="400" Height="100">
11　　　<Rectangle.OpacityMask>
12　　　　<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
13　　　　　<LinearGradientBrush.GradientStops>
14　　　　　　<GradientStop Offset="1.0" Color="#66000000" />
15　　　　　　<GradientStop Offset="0.0" Color="#00000000" />
16　　　　　</LinearGradientBrush.GradientStops>
17　　　　</LinearGradientBrush>
18　　　</Rectangle.OpacityMask>
19　　　<Rectangle.Fill>
20　　　　<ImageBrush ImageSource="inkbackground.jpg"/>
21　　　</Rectangle.Fill>
22　　</Rectangle>
23　　<TextBlock Name="writeHereMirror" Text="Write Here" FontSize="72" FontFamily="Comic Sans MS"
24
25Foreground="#80808080">
26　　　<TextBlock.OpacityMask>
27　　　　<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
28　　　　　<LinearGradientBrush.GradientStops>
29　　　　　　<GradientStop Offset="1.0" Color="#FF000000" />
30　　　　　　<GradientStop Offset="0.0" Color="#00000000" />
31　　　　　</LinearGradientBrush.GradientStops>
32　　　　</LinearGradientBrush>
33　　　</TextBlock.OpacityMask>
34　　</TextBlock>
35　</InkPresenter>

最终效果如下：

最后控制两个图案同步的是在javascript里面，这里就不详说了，参考附件里的代码，

其实在silverlight里还可以做出更多令人惊叹的效果，应该不会逊于Flash和Flex里面的效果的，

希望大家能够一起挖掘silverlight里面的无限潜能哦