Windows Phone應(yīng)用開發(fā)強(qiáng)化訓(xùn)練：濾罩層可以這樣做
[導(dǎo)讀]我先不說什么，給大家看一個截圖。 呵呵，這是一個灰常低水準(zhǔn)的濾罩效果，如果你覺得有意思，我貼出XAML來。[html] view plain copy print? <Grid x:Name="LayoutRoot"
我先不說什么，給大家看一個截圖。
呵呵，這是一個灰常低水準(zhǔn)的濾罩效果，如果你覺得有意思，我貼出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>
上面的碼子很簡單了，其實(shí)，核心就是充分利用了UIElement的Clip，是的，你把它用好了，會弄出不少好玩的東東來的。
說說大致的原理。
其實(shí)我是用了兩個Image，最下面一層的圖片不進(jìn)行Clip而上再蓋一個Rectangle，這個矩把透明度稍稍調(diào)一下，這樣看起來，下面的圖片會變暗。然后在最上層再放一個Image控件，這個控件就采用了Clip，于是，幾個元素重疊起來就看到了濾罩效果。
如果你把下面的Image和矩形隱藏了，你就知道其中的玄機(jī)了。
下載文檔
