DropshadowPanel does not fade with button fade page navigation

[jefhai]

In newer builds of Windows 10 running UWP apps, navigating between pages automatically applies "animations." In this case I have a Button with Button.Content

<Button x:Name="MainButton">
    <Button.Content>
        <Grid>
            <controls:DropShadowPanel BlurRadius="22.0" ShadowOpacity="0.75" OffsetX="2.0" OffsetY="5.0" Color="Black" 
                                              HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
                <Grid>
                    <Image Source="/Assets/MyImage.png" />
                </Grid>
            </controls:DropShadowPanel>
        </Grid>
    </Button.Content>
</Button>

When the Page navigates back it applies an opacity animation on the button. This opacity animation affects the image in the button but not the drop shadow. So it looks weird, a dark square dropshadow and a semi transparent image on top.

Does anything have good ideas on how to correct this? Disable the opacity animation on the button during page navigation? Make the dropshadow opacity animate?

I'm using UWP Community Tool Kit v2.2.0.

[lucaasrojas]

Can you add a video or a GIF image showing the problem?

[JustinXinLiu]

Can you create a repo?

[JohnnyWestlake]

You're probably observing an effect of the fact Opacity is applied down the visual tree on each element seperately and not applied flatly at the layer at which you set it.

If you don't want to see the shadow as the button is fading out, you can set CacheMode="BitmapCache" on the Button - as long as you're not animating anything inside the button.

[jefhai]

@JohnnyWestlake unfortunately setting the bitmap cache mode didn't work...

[nmetulev]

@jefhai, could you provide a repro for this, using the latest version of the toolkit?

[nmetulev]

@JustinXinLiu , could this issue be related to this?

[JustinXinLiu]

I don't think they are related. @jefhai Can I get a repo? It would help me understand what the issue is.

[jefhai]

Working on one this morning.

Sent from my iPhone

On Oct 5, 2018, at 2:14 AM, Justin Liu notifications@github.com wrote:

I don't think they are related. @jefhai Can I get a repo? It would help me understand what the issue is.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[JustinXinLiu]

@jefhai How are you going with the repo?

[jefhai]

Sorry I was distracted by some other work... so no repo yet. But this is easy enough to reproduce yourself. I think this issue is related to opacity animations on the DropShadowPanel. Both the content of the DropShadowPanel and the DropShadow composition object animate their opacity at the same time. Halfway through this animation (0.5 opacity) the DropShadowPanel content is partially transparent and the DropShadow composition object is partially transparent. This results in the following picture bellow (a simple white grid inside a DropShadowPanel):

https://imgur.com/a/o6wyUTR

I think I can animate the grid inside the DropShadowPanel as well as the DropShadow composition object separately... Using AnimationSet or my own combination of StoryBoard animation and Composition Animation. But this will not work for the built in UWP page navigation animations that get applied to certain UIElements. I will either have to disable these page navigation animations in the style somehow or override them and invoke my own solution.

It would be nice if the DropShadow composition objects opacity would have a built in delay to start animating the opacity after the internal content has finished animating it's opacity.

Ideally if the opacity is being animation on a DropShadowPanel it automagically creates a cached image of itself so you don't get the result seen in the image above.

In contrast to the above... on iOS opacity animations are invoked on the sum of the visual tree elements, no on each element by themselves as with UWP. iOS must combine the visual appearance of all the child elements (a screen shot if you will) and then animate them as a whole. I think iOS handles opacity animations more correctly.

I wonder why UWP chose to animation the opacities separately (probably easier to do technically)..

So then how do you enforce the opacity to animation on the sum of the child elements in UWP and not the individual elements? Is this even possible?

[windowstoolkitbot]

This issue seems inactive. Do you need help to complete this issue?

[windowstoolkitbot]

This issue seems inactive. Do you need help to complete this issue?

[jefhai]

Yes I still need help with this issue.

[JohnnyWestlake]

So then how do you enforce the opacity to animation on the sum of the child elements in UWP and not the individual elements? Is this even possible?

In answer to this final part, the answer is almost always usually setting CacheMode=BitmapCache on the top level element (though this effects render performance of children if they update or animate separately).

Unfortunately it doesn't seem this applies to Composition children on XAML, as composition effects kind of exist outside of the XAML space, so I'm not aware of any sensible way to getting the to interact as you want.

[windowstoolkitbot]

This issue seems inactive. It will automatically be closed in 14 days if there is no activity.

[windowstoolkitbot]

This issue seems inactive. It will automatically be closed in 7 days if there is no activity.

[Kyaa-dost]

@jefhai are you still having trouble with this or can we close this issue?

[Kyaa-dost]

Closing this issue for now as it might be limited to a specific scenario and the insight was provided by the above members.