Windows Phone应用开发强化训练:滤罩层可以这样做
我先不说什么,给大家看一个截图。
本文引用地址: //m.amcfsurvey.com/article/201609/303398.htm呵呵,这是一个灰常低水准的滤罩效果,如果你觉得有意思,我贴出XAML来。
- Gridx:Name=LayoutRootBackground=Transparent>
- ImageSource=/lan.jpgStretch=UniformCanvas.ZIndex=0/>
- RectangleCanvas.ZIndex=1Fill=BlackOpacity=0.7/>
- Imagex:Name=myImgStretch=UniformSource=/lan.jpgCanvas.ZIndex=2>
- Image.Clip>
- GeometryGroup>
- EllipseGeometryCenter=100,129RadiusX=80RadiusY=80/>
- EllipseGeometryCenter=280,380RadiusX=60RadiusY=60/>
- EllipseGeometryCenter=410,520RadiusX=65RadiusY=65/>
- EllipseGeometryCenter=325,36RadiusX=60RadiusY=60/>
- EllipseGeometryCenter=125,611RadiusX=50RadiusY=50/>
- EllipseGeometryCenter=62,395RadiusX=75RadiusY=75/>
- /GeometryGroup>
- /Image.Clip>
- /Image>
- /Grid>
上面的码子很简单了,其实,核心就是充分利用了UIElement的Clip,是的,你把它用好了,会弄出不少好玩的东东来的。
说说大致的原理。
其实我是用了两个Image,最下面一层的图片不进行Clip而上再盖一个Rectangle,这个矩把透明度稍稍调一下,这样看起来,下面的图片会变暗。然后在最上层再放一个Image控件,这个控件就采用了Clip,于是,几个元素重叠起来就看到了滤罩效果。
如果你把下面的Image和矩形隐藏了,你就知道其中的玄机了。
评论