Skip to content

RepositionThemeTransition mess up Composition ImplicitShowAnimation and ImplicitHideAnimation #11034

@HO-COOH

Description

@HO-COOH

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
    <StackPanel HorizontalAlignment="Stretch">
        <StackPanel.ChildrenTransitions>
            <RepositionThemeTransition />
        </StackPanel.ChildrenTransitions>
        <Expander
            x:Name="Expander"
            HorizontalAlignment="Stretch"
            HorizontalContentAlignment="Stretch">
            <Expander.Header>
                <StackPanel Orientation="Horizontal">
                    <TextBlock VerticalAlignment="Center" Text="Some text" />
                    <StackPanel
                        x:Name="TestPanel"
                        Orientation="Horizontal"
                        Spacing="8"
                        Visibility="{x:Bind Expander.IsExpanded, Mode=OneWay}">
                        <Button x:Name="Btn1">Btn1</Button>
                        <Button x:Name="Btn2">Btn2</Button>
                        <Button x:Name="Btn3">Btn3</Button>
                    </StackPanel>
                </StackPanel>

            </Expander.Header>
        </Expander>
    </StackPanel>
  1. Use this code
    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

Expected behavior

Image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingneeds-triageIssue needs to be triaged by the area owners

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions