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

移动开发
Windows Phone是微软发布的一款手机操作系统,它将微软旗下的Xbox Live游戏、Xbox Music音乐与独特的视频体验整合至手机中。

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

 

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

  1. <Grid x:Name="LayoutRoot" Background="Transparent">   
  2.     <Image Source="/lan.jpg" Stretch="Uniform" Canvas.ZIndex="0"/>   
  3.     <Rectangle Canvas.ZIndex="1" Fill="Black" Opacity="0.7"/>   
  4.     <Image x:Name="myImg" Stretch="Uniform" Source="/lan.jpg" Canvas.ZIndex="2">   
  5.         <Image.Clip>   
  6.             <GeometryGroup>   
  7.                 <EllipseGeometry Center="100,129" RadiusX="80" RadiusY="80"/>   
  8.                 <EllipseGeometry Center="280,380" RadiusX="60" RadiusY="60"/>   
  9.                 <EllipseGeometry Center="410,520" RadiusX="65" RadiusY="65"/>   
  10.                 <EllipseGeometry Center="325,36" RadiusX="60" RadiusY="60"/>   
  11.                 <EllipseGeometry Center="125,611" RadiusX="50" RadiusY="50"/>   
  12.                 <EllipseGeometry Center="62,395" RadiusX="75" RadiusY="75"/>   
  13.             </GeometryGroup>   
  14.         </Image.Clip>   
  15.     </Image>   
  16. </Grid>   

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

说说大致的原理。

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

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

责任编辑:闫佳明 来源: ddvip
相关推荐

2011-06-08 09:43:15

Windows Pho

2011-12-06 10:45:16

云计算应用Windows Pho

2013-07-30 12:37:56

Windows PhoWindows Pho

2010-04-21 17:07:54

Windows Pho

2010-11-03 15:10:04

SilverlightSilverlightWindows Pho

2011-03-21 09:05:40

IronRubyWindows Pho

2011-12-03 20:03:26

iPhone

2010-10-28 09:09:26

Windows Pho

2011-06-07 12:42:15

Windows Pho

2013-04-17 14:00:06

Windows PhoWindows Pho

2013-04-19 16:34:56

Windows PhoWindows Pho

2013-04-16 17:02:50

Windows Pho概论

2013-07-30 11:18:37

Windows PhoWindows Pho

2010-08-10 11:11:31

2011-10-20 13:29:02

Windows Pho应用商店

2010-12-01 09:01:31

独立存储Windows Pho

2010-10-29 14:08:01

.NETWindows PhoiPhone

2021-06-16 09:10:29

APP开发AndroidiOS

2012-01-18 09:22:59

Windows Pho设计过程

2012-08-17 09:15:16

Windows Pho
点赞
收藏

51CTO技术栈公众号