microsoft / microsoft/microsoft-ui-xaml

RepositionThemeTransition mess up Composition ImplicitShowAnimation and ImplicitHideAnimation

Open
#11,034 0 comments 2 reactions 0 assignees View on GitHub
area-Animations bug team-Core
Dominant language
C++
Stars
8.4k
Forks
942
Avg merge
2d 7h
Merged PRs (30d)
105

Description

### Describe the bug

I found that if you use `RepositionThemeTransition` as `StackPanel.ChildTransitions`, it messes up my Composition ImplicitShowAnimatin and ImplicitHideAnimation. The composition animation will get clipped off mid-way playing. I haven't tried out other xaml theme transitions tho, they might cause the same issue.

### Why is this important?

This is very obtrusive bug. To get around this, I have to call `StartAnimation` on individual controls I want to animate, which is inconvenient (requirng an event handler) and hurting performance.

### Steps to reproduce the bug

1. Use this xaml. I want to animate the 3 buttons in the expander header
```xml









Btn1
Btn2
Btn3




```
2. Use this code
```cpp
MainWindow::MainWindow()
{
InitializeComponent();

auto compositor = winrt::Microsoft::UI::Xaml::Media::CompositionTarget::GetCompositorForCurrentThread();

auto hideAnimation = compositor.CreateScalarKeyFrameAnimation();
hideAnimation.InsertKeyFrame(0, 0);
hideAnimation.InsertExpressionKeyFrame(1.f, L"this.Target.Size.Y");
hideAnimation.DelayBehavior(winrt::Microsoft::UI::Composition::AnimationDelayBehavior::SetInitialValueBeforeDelay);
hideAnimation.Target(L"Translation.Y");
hideAnimation.Duration(std::chrono::milliseconds{ 4000 });

auto showAnimation = compositor.CreateScalarKeyFrameAnimation();
showAnimation.InsertExpressionKeyFrame(0.f, L"this.Target.Size.Y");
showAnimation.InsertKeyFrame(1.f, 0);
showAnimation.DelayBehavior(winrt::Microsoft::UI::Composition::AnimationDelayBehavior::SetInitialValueBeforeDelay);
showAnimation.Target(L"Translation.Y");
showAnimation.Duration(std::chrono::milliseconds{ 4000 });

auto addAnimations = [&](winrt::Microsoft::UI::Xaml::UIElement const& element)
{
winrt::Microsoft::UI::Xaml::Hosting::ElementCompositionPreview::SetIsTranslationEnabled(element, true);
winrt::Microsoft::UI::Xaml::Hosting::ElementCompositionPreview::SetImplicitShowAnimation(element, showAnimation);
winrt::Microsoft::UI::Xaml::Hosting::ElementCompositionPreview::SetImplicitHideAnimation(element, hideAnimation);
};

addAnimations(Btn1());
addAnimations(Btn2());
addAnimations(Btn3());
}
```

### Actual behavior

![Image](https://github.com/user-attachments/assets/e71e30dd-29f2-4b5c-81ae-cc2ae697ff4e)

### Expected behavior

![Image](https://github.com/user-attachments/assets/42ec2ac5-386e-4c7d-bcbb-f053344a1927)

### Screenshots

_No response_

### NuGet package version

WinUI 3 - Windows App SDK 1.8.5: 1.8.260209005

### Windows version

Windows 10 (1809): Build 17763

### Additional context

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue with the provided StackPanel XAML and C++ implicit show/hide animation setup, focusing on RepositionThemeTransition and the clipping during visibility changes. Done means the composition animations complete without being clipped when the transition is used.

Written by the indexing model from the issue text.

Assessment

Tech stack
cpp
Domain
desktop
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.