Windows Phone应用开发强化训练：滤罩层可以这样做

我先不说什么，给大家看一个截图。

呵呵，这是一个灰常低水准的滤罩效果，如果你觉得有意思，我贴出XAML来。

[html] view plain copy print?

1. Gridx:Name=LayoutRootBackground=Transparent>
2. ImageSource=/lan.jpgStretch=UniformCanvas.ZIndex=0/>
3. RectangleCanvas.ZIndex=1Fill=BlackOpacity=0.7/>
4. Imagex:Name=myImgStretch=UniformSource=/lan.jpgCanvas.ZIndex=2>
5. Image.Clip>
6. GeometryGroup>
7. EllipseGeometryCenter=100,129RadiusX=80RadiusY=80/>
8. EllipseGeometryCenter=280,380RadiusX=60RadiusY=60/>
9. EllipseGeometryCenter=410,520RadiusX=65RadiusY=65/>
10. EllipseGeometryCenter=325,36RadiusX=60RadiusY=60/>
11. EllipseGeometryCenter=125,611RadiusX=50RadiusY=50/>
12. EllipseGeometryCenter=62,395RadiusX=75RadiusY=75/>
13. /GeometryGroup>
14. /Image.Clip>
15. /Image>
16. /Grid>

上面的码子很简单了，其实，核心就是充分利用了UIElement的Clip，是的，你把它用好了，会弄出不少好玩的东东来的。

说说大致的原理。

其实我是用了两个Image，最下面一层的图片不进行Clip而上再盖一个Rectangle，这个矩把透明度稍稍调一下，这样看起来，下面的图片会变暗。然后在最上层再放一个Image控件，这个控件就采用了Clip，于是，几个元素重叠起来就看到了滤罩效果。

如果你把下面的Image和矩形隐藏了，你就知道其中的玄机了。