Using ShaderBackground with AllLandingPage Header image

[MPITech]

Hello!

When I first saw the ShaderBackground component, especially the snow and rain effects, I immediately said to myself "wow, I hope I can apply these effects over my header image in the AllLandingPage control" for my application's home screen as an optional feature for my app. I wanted to build something that checked the local weather for my user and applied different effects over the landing page image (that fades out at the bottom) depending on the current weather conditions. Like, if it is raining out, show the rain drops over the cover image.

However, when trying to apply the ShaderBackground component in the same Grid row as the AllLandingPage, the ShaderBackground just covers the image.

Is there any way you can think of where we can apply these animations over our LandingPage header images?

(Feel free to steal my idea and build the whole weather-checking thing, too haha!) 😄

Thanks!

[ghost1372]

Nice Idea😁
I had a similar idea some time ago, but I just don't have the time for it.😂 I’m really busy. Especially since a few days ago the PS5 got jailbroken, and that has kept me quite occupied.

The AllLandingPage Header Image only accepts images, so you can't place a shader there directly. However, you can put both controls inside a Grid and place the shader behind it.

    <Grid>
        <dev:ShaderBackground>
            <dev:RaindropRenderer/>
        </dev:ShaderBackground>
        <dev:AllLandingPage HeaderImage="ms-appx:///Assets/CoverDark.png"/>
    </Grid>

Also, the shader uses the CanvasAnimatedControl, and we've exposed the Draw, Update, and CreateResources events. This means you can subscribe to these events and render your own custom content on top of it as well.

[MPITech]

Oh nice, ok thanks! Have fun with the PS5 tweaking 😄