microsoft / microsoft/microsoft-ui-xaml
Animation of SplitView content reveals whatever is behind the SplitView
- Dominant language
- C++
- Stars
- 8.4k
- Forks
- 942
- Avg merge
- 2d 7h
- Merged PRs (30d)
- 105
Description
### Describe the bug
Bug: in the animation of the left pane, starting from an open inline state and transitioning to a collapsed state or a compact state, the background (behind the splitview) shows through during the animation.
### Why is this important?
This causes an unpleasant flashing effect during the animation.
### Steps to reproduce the bug
Steps to repro: watch the video provided by the O.P. in #3108 and notice that while the left pane is being shown, on the right there is a black rectangle that appears and then is covered by the contents animating to the right. This still occurs as of 06/2026.
### Actual behavior
The background (behind the splitview) shows through during the animation, causing an unpleasant flashing effect. In the video this is a black rectangle, but other experiments show that it could be anything -- a tiled panel, for example.
### Expected behavior
Ideally, the control should have an additional element that is made visible at time zero in the animation and that provides the missing piece of background.
### Screenshots
See #3108. The problem is visible there, separately from what the O.P. pointed out.
### NuGet package version
The latest as of June 2026
### Windows version
_No response_
### Additional context
Cause: The black rectangle is not actually part of the SplitView, it is the element behind the SplitView that is being revealed when the SplitView content is shifted to the left at the beginning of the content animation. This is caused by the way the animation is designed. In the <VisualTransition From="ClosedCompactLeft" To="OpenInlineLeft"> for example, there is a DoubleAnimationUsingKeyFrames with Storyboard.TargetName="ContentTransform" Storyboard.TargetProperty="TranslateX". What this does is it jumps the content to the left at time zero, then animates it sliding to the right into its final position. The problem is that when it jumps to the left, anything that happens to be behind the SplitView shows through until the content slides back into place over it. This causes the undesirable flashing effect.
My interim solution was to just delete the animation of the content. It's not perfect, the results are not as smooth as desired, but it is better than having the background show through. I tried animating the ColumnDefinition1.Width, but that caused an exception.
Contributor guide
Research direction
Start with the SplitView VisualTransition from ClosedCompactLeft to OpenInlineLeft and inspect the ContentTransform TranslateX animation described in the issue. Compare it with the ColumnDefinition1.Width experiment and reproduce the transition from an open inline state. Done means the animation no longer reveals the element behind the SplitView or produces a flashing rectangle while retaining an acceptable transition.
Written by the indexing model from the issue text.
Assessment
- Domain
- design, desktop
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100