Windows Phone application development intensive training: the filter mask layer can do this

Let me tell you nothing.

 

Haha, this is a very low-level filter mask effect. If you find it interesting, I will post the 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>

The above code is very simple. In fact, the core is to make full use of the clip of the uielement. Yes, if you use it well, you will get a lot of interesting things.

 

Let's talk about the general principle.

In fact, I used two images, and the bottom layer of the image is not clip, and then a rectangle is built. This moment slightly adjusts the transparency, so that the image below will become darker. Then, place an image control at the top, which uses clip. As a result, the filtering effect is displayed when several elements overlap.

If you hide the following image and rectangle, you will know the mystery.