Windows Phone应用开发强化训练：滤罩层可以这样做
时间：2016-05-10 16:57:12
手机看文章
扫描二维码
随时随地手机看文章
[导读]我先不说什么，给大家看一个截图。 呵呵，这是一个灰常低水准的滤罩效果，如果你觉得有意思，我贴出XAML来。[html] view plain copy print? <Grid x:Name="LayoutRoot"
我先不说什么，给大家看一个截图。
呵呵，这是一个灰常低水准的滤罩效果，如果你觉得有意思，我贴出XAML来。
- <Grid x:Name="LayoutRoot" Background="Transparent">
- <Image Source="/lan.jpg" Stretch="Uniform" Canvas.ZIndex="0"/>
- <Rectangle Canvas.ZIndex="1" Fill="Black" Opacity="0.7"/>
- <Image x:Name="myImg" Stretch="Uniform" Source="/lan.jpg" Canvas.ZIndex="2">
- <Image.Clip>
- <GeometryGroup>
- <EllipseGeometry Center="100,129" RadiusX="80" RadiusY="80"/>
- <EllipseGeometry Center="280,380" RadiusX="60" RadiusY="60"/>
- <EllipseGeometry Center="410,520" RadiusX="65" RadiusY="65"/>
- <EllipseGeometry Center="325,36" RadiusX="60" RadiusY="60"/>
- <EllipseGeometry Center="125,611" RadiusX="50" RadiusY="50"/>
- <EllipseGeometry Center="62,395" RadiusX="75" RadiusY="75"/>
- </GeometryGroup>
- </Image.Clip>
- </Image>
- </Grid>
上面的码子很简单了，其实，核心就是充分利用了UIElement的Clip，是的，你把它用好了，会弄出不少好玩的东东来的。
说说大致的原理。
其实我是用了两个Image，最下面一层的图片不进行Clip而上再盖一个Rectangle，这个矩把透明度稍稍调一下，这样看起来，下面的图片会变暗。然后在最上层再放一个Image控件，这个控件就采用了Clip，于是，几个元素重叠起来就看到了滤罩效果。
如果你把下面的Image和矩形隐藏了，你就知道其中的玄机了。
下载文档
