Windows Phone應用開發強化訓練：濾罩層可以這樣做

我先不說什麼，給大家看一個。

 

呵呵，這是一個灰常低水準的濾罩效果，如果你覺得有意思，我貼出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和矩形隱藏了，你就知道其中的玄機了。