Resize Animation Problems in Every UWP UI System Since Beginning of Windows 10

[ghost]

Describe the bug So, before I realized that this was a bigger problem, I seen this problem in Windows Terminal, which is why I reported the issue on the Windows Terminal repo originally, here: https://github.com/microsoft/terminal/issues/10633

I have since looked into many of the Windows 10 and 11 applications and noticed that this has been a problem in both some of the oldest apps that still use an older UI as well as some of the newer apps that use newer versions of the UI (including Windows Terminal). Basically, resize animations aren't working properly.

Steps to reproduce the bug In literally any Windows 10 or 11 app that uses UWP and that has an animated collapsible sidebar, just collapse and expand it and you will see this exact bug. In every single app.

Ok, so the problem here is that when you click the hamburger menu to collapse or expand the side bar, four things happen: 1.) The sidebar's width smoothly animates. 2.) The x position of the page smoothly animates along with the sidebar width 3.) Right at the start of the animation, the width of the page instantly jumps to the size it will be at the end of the animation. This means everything that is right aligned or spans the width of the page also jumps. 4.) Because the x position is animating smoothly, the right aligned stuff jumps oddly. This is due to the fact that the width instantly shrinks (or expands) to the size it will be at the end of the animation before the end of the animation, while the x position is still moving toward where it needs to be.

Expected behavior Do the animations properly:

Animate the width of the page at the same time as the sidebar by interpolating between the initial width and the new width.

Screenshots Windows Terminal (1.9.1942.0): https://user-images.githubusercontent.com/4098042/127189740-e8fb78ae-1bc9-4d9d-8318-bad34e4f310b.mp4

Mail App - Recently Updated to latest version from App Store: https://user-images.githubusercontent.com/4098042/127184288-758c88a9-5d15-485c-8a00-d17d8a7e3890.mp4

Get Help App - The content resize doesn't happen at the same time as the resize for the sidebar, which produces a flickering, as seen below: https://user-images.githubusercontent.com/4098042/127184771-2a9e7b33-ce63-4f09-8443-3416f4924362.mp4

Feedback Hub: https://user-images.githubusercontent.com/4098042/127185190-8d3f6c02-9e2d-479b-b7de-71bedf3b0aeb.mp4

Windows Security: - This one you can actually see the lighter background color of the content contrasting slightly with the darker background where it hasn't resized to. And of course, the scrollbar behaving weirdly is a dead giveaway too. https://user-images.githubusercontent.com/4098042/127185527-6230de0a-0286-4de8-a005-ff8bf863221d.mp4

Weather App: - This one is very apparent because of the greater contrast between the two blues. Obviously instead of animating the width of the content, it's just resizing to what the width is supposed to be after the animation, but right when the animation starts. You need to be animating the width of the content along with the sidebar animation. https://user-images.githubusercontent.com/4098042/127185933-e9c45be3-f931-431b-b3a5-143e7f8846a0.mp4

Xbox Insider App: - You can see here that when I expand the size of the window, the sidebar expands, but the content doesn't properly animate it's resize, resulting in the scrollbar jumping to the left and then animating to the right as the x position of the content animates. https://user-images.githubusercontent.com/4098042/127187567-66334548-0d6d-4086-87aa-b4de0a871b37.mp4

XAML Controls Gallery: https://user-images.githubusercontent.com/4098042/127189185-b29481ae-3f19-4464-b21a-ed1c6da53f83.mp4

Here's a non-Microsoft app showing the exact same problem - this is "My Calendar" from the app store, by "kineapps": https://user-images.githubusercontent.com/4098042/127188096-d9f1ae92-dc31-46b8-ae3d-c87e09eb75ed.mp4

I posted another issue previously that's very much related to this: https://github.com/microsoft/microsoft-ui-xaml/issues/5446

[ghost]

Don't ask me why these videos don't play correctly in Firefox, because I have no clue. But they work in MS Edge.

Anyways, now let me show you what a proper collapse and expand animation should look like with a program I wrote in about a couple weeks. Notice how both the sidebar and the content smoothly animate their width and positions. And this isn't even that well done, honestly.

https://user-images.githubusercontent.com/4098042/127190517-54dcc35c-329f-4eff-8915-36fa95f75d4e.mp4

[StephenLPeters]

@stmoy FYI.

I agree this could and should be better. The implicit animation system is very complicated and not exposed to WinUI2. A fix for this will need to come in Winui3 unfortunately.

[JohnnyWestlake]

The problem is the width animation, which is not advised given that it's a layout animation and would run all on the UI Thread. Animating the reposition is simple enough and could be done even with a ThemeTransition inside the control template.

Possibly the system could add a special size ThemeTransition that works like say maximising windows on Windows 11 currently does (which in turn is similar to how ConnectedAniamtion handles blending between different sized elements)

[jamespack]

This seems to be a larger problem than just Xaml and has been for some time. Is this being worked on internally? I hope so.

https://stackoverflow.com/questions/53000291/how-to-smooth-ugly-jitter-flicker-jumping-when-resizing-windows-especially-drag

[ghost]

@jamespack Resizing windows has definitely been a problem for a long time, and I think I made a separate issue on that, iirc. However, this issue is different. It doesn't concern Window resizes alone. It concerns a resizing of content inside of the window (without the window being resized, e.g. collapsing a sidebar animates the width of the main content), which is not a problem in many programs that do not rely on WinUI or UWP, including video games and immediate mode UIs.

And many of these (non-UWP and non-WinUI) programs can animate content width resizes just fine even on one thread, especially if you recalculate content positions and widths within a frame.

[jamespack]

Yea I get that this is slightly different. Just saying that jagged resizing seems to have a been a problem for some time.

[ranjeshj]

Marking this as a feature proposal. This is not easily achievable due to the reason JonnyWestlake mentions above.