UWP : Transitions not being clipped?

Question

I have a problem in which I've got transitions such as EntranceThemeTransition on some controls which means they appear in a pleasant manner. However, these transitions seem to ignore the regular clip of the containing control, i.e. the ListView or ScrollViewer.

It means that for a split second my elements appear outside of the ListView as they are animating, but once the animation is over, the elements respect the clipping path and every works great.

Basically, I want the transition animations to respect the clip of the containing element, just as they do once the clip is over. It's not just ListView that has the problem, FlipView seems to also.

For a split second, I'll see the animation happen inside a FlipViewItem which isn't the current one! I don't see how that can't be a bug in FlipView.

Anyway, is there any way to get those transition animations to respect the clip? It's very ugly to see a split second of animation outside of the ListView etc.

Answer 1

In case of ListView you can't influence the behavior too much, because that is how the transition works. You can however tweak it using EntranceThemeTransition's FromHorizontalOffset and FromVerticalOffset properties.

In case of FlipView it is not a bug per se. FlipView is basically a ScrollViewer with special behavior (only one item visible at a time), but the items preload even then (especially the immediate previous and immediate next). That means when the page loads, the FlipView appears and its children get loaded and you might see a glimpse of the transitions outside the item currently displayed. To circumvent this you have several options:

• Transition only the first displayed item's children
• Add EntranceThemeTransition only to the FlipView itself
• Create a custom animation using Storyboard or implicit animations and start it manually when the flip view item changes