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

    Type

    Projects

    Status

    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions