microsoft / microsoft/microsoft-ui-xaml

Animation of SplitView content reveals whatever is behind the SplitView

Open
#11,145 0 comments 1 reaction 0 assignees View on GitHub
area-SplitView bug
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.