Implicit Animations do not run inside ItemsStackPanel control

[dan-meier]

I'm submitting a...

Bug report

Current behavior

Controls enabled with implicit animations (Microsoft.Toolkit.Uwp.UI.Animations) do not animate when placed within a BladeView/BladeItem control (Microsoft.Toolkit.Uwp.UI.Controls).

Expected behavior

Controls enabled with implicit animations should animate within a BladeView/BladeItem control in the same way they animate elsewhere outside the control.

Minimal reproduction of the problem with instructions

• Download the Github repository https://github.com/dan-meier/AnimationsInBladeView • Run the project app • Tap the “Animate” button to demonstrate that implicit animations DO work outside the BladeView • Tap the “Show Blade” button to open the blade • Tap the “Animate” button on the blade to demonstrate that animations do NOT work in the blade

Environment

Operating System

Target version: Windows 10, version 1803 (10.0; Build 17134) Minimum version: Windows 10 Fall Creators Update (10.0; Build 16299)

NuGet Packages

Microsoft.NETCore.UniversalWindowsPlatform v6.2.3 Microsoft.Toolkit.Uwp.UI.Animations v5.1.0 Microsoft.Toolkit.Uwp.UI.Controls v5.1.0

Device Form Factor

Desktop PC

Development Environment

Visual Studio 2017 v15.9.7

[skendrot]

I have reproduced the issue with just an ItemsControl with an ItemsStackPanel defined:

            <ItemsControl HorizontalAlignment="Stretch"
                          VerticalAlignment="Stretch">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <!-- Orientation does not matter -->
                        <ItemsStackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <custom:SimpleAnimation/>
            </ItemsControl>

I have updated the title as well

[michael-hawker]

I also made a pure XAML version that repros in the Sample App:

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
    mc:Ignorable="d" xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls" xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations">

    <Grid>
        <Grid.Resources>
          <converters:BoolToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>

            <ControlTemplate x:Key="MyControl" TargetType="ContentControl">
                <StackPanel
                    Spacing="50"
                    VerticalAlignment="Center">

                    <StackPanel
                        x:Name="ElementStack"
                        Orientation="Vertical"
                        Spacing="0"
                        Visibility="{Binding IsChecked, ElementName=AnimateButton, Converter={StaticResource BooleanToVisibilityConverter}}">

                        <animations:Implicit.ShowAnimations>
                            <animations:TranslationAnimation Duration="0:0:1" From="0,200,0" To="0"/>
                            <animations:OpacityAnimation Duration="0:0:1" From="0" To="1"/>
                        </animations:Implicit.ShowAnimations>

                        <animations:Implicit.HideAnimations>
                            <animations:TranslationAnimation Duration="0:0:1" From="0" To="0,200,0"/>
                            <animations:OpacityAnimation Duration="0:0:1" From="1" To="0"/>
                        </animations:Implicit.HideAnimations>

                        <Border
                            x:Name="Element"
                            Height="100"
                            Width="100"
                            Background="Red"
                            HorizontalAlignment="Center"/>

                        <TextBlock
                            Text="Implicit animation"
                            HorizontalAlignment="Center"/>

                    </StackPanel>

                    <ToggleButton
                        x:Name="AnimateButton"
                        Content="Animate"
                        HorizontalAlignment="Center">

                        <animations:Implicit.ShowAnimations>
                            <animations:OpacityAnimation Duration="0:0:2" From="0" To="1"/>
                        </animations:Implicit.ShowAnimations>
                    </ToggleButton>
                </StackPanel>
            </ControlTemplate>
        </Grid.Resources>

        <!--A stack with a button to show the BladeView AND a simple animation 
            to show that implicit animations work outside the BladeView.-->
        <StackPanel
            HorizontalAlignment="Center"
            Spacing="30"
            VerticalAlignment="Center">

            <ToggleButton x:Name="ShowBladeBtn"
                Content="Show Blade ->"/>

            <ContentControl Template="{StaticResource MyControl}"/>

        </StackPanel>

        <!--A BladeView control with a single blade containing a simple animation.
            The implicit animation does NOT work within the BladeView/BladeItem.-->
        <controls:BladeView
            x:Name="ImplicitAnimationsBladeView"
            BladeMode="Normal"
            Visibility="{Binding IsChecked, ElementName=ShowBladeBtn, Converter={StaticResource BooleanToVisibilityConverter}}"  
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch">

            <controls:BladeItem
                x:Name="ImplicitAnimationsBladeItem"
                Header="Configurations"
                IsOpen="{Binding IsChecked, ElementName=ShowBladeBtn, Mode=TwoWay}"
                VerticalAlignment="Stretch"
                Width="400">

                <ContentControl Template="{StaticResource MyControl}"/>

            </controls:BladeItem>

        </controls:BladeView>

    </Grid>
</Page>

[michael-hawker]

We may need to try and repro with just the composition APIs and not our helpers to see if this is a platform issue or a toolkit issue, as I see our collections on both.

[lucaasrojas]

@michael-hawker I created a new project to test the CompositionObject animations with a secondary window. In the main window, there are a rectangle that is animated and a button that opens the secondary window with the same animation. Both animations worked fine, the issue might be linked to the toolkit itself. XAML Code:

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition/>
        </Grid.RowDefinitions>
        <ItemsStackPanel Grid.Row="0" Height="500" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" >
            <Canvas x:Name="Container" Background="Aqua" Height="500">
                <Rectangle x:Name="redRectangle" Fill="Red" Stroke="Black" Width="200" Height="200"></Rectangle>
            </Canvas>
        </ItemsStackPanel>
        <Button Click="Button_Click" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Width="200"
                    Height="200" Margin="0,0,0,0">Open</Button>
</Grid>

I needed to add a Canvas to be able to get the rectangle as a Visual object.

File: AnimationToolkitTest.zip

[dan-meier]

Wondering if this bug will get fixed in time for the 7.0 release. Can someone update?

[michael-hawker]

Hi @dan-meier, we've had the 'help wanted' tag on this for a while and no one has picked it up from the community. It's still unclear from lucaasrojas' original minimal test w/o the Toolkit if there's an underlying platform issue as that was just testing general animation vs. the implicit show/hide animations.

We still have it in the bug bucket for 7.0, so we may get to it, but it certainly easier if we understand the root cause of if this is something in the platform or something with how we call those APIs within the Toolkit.

Do you think you could adjust the AnimationToolkitTest to NOT use the toolkit but use the show/hide animations to see if it still repros? If the show/hide works there with the base API, then it's something we can prioritize better investigating in the Toolkit. If it also doesn't work there, then we can try and pull in the right folks from the composition team to help understand what's going on better with the minimal repro.

Thanks!

[dan-meier]

Hi, @michael-hawker. I've attached two "trivial" projects. Both contain a simple user control with a Rectangle and a Button. Tapping the button animates the rectangle (translation and opacity). The user control is placed on the MainPage, as well as with a BladeView control.

The "AnimationsInBladeViewNative" project uses native UWP animations. The animations work fine in both the MainPage instance of the user control as well as the BladeView instance.

The "AnimationsInBladeViewToolkit" project uses Toolkit implicit animations. The animations work fine in the MainPage instance of the user control, but they do NOT work within the BladeView instance.

In the "native" version, I control both translation and opacity within the Storyboard. However, I've also tested with FadeInThemeAnimation and FadeOutThemeAnimation and the results are the same -- these work just fine in both the MainPage instance of the user control as well as the BladeView instance.

Hope this helps. Do let me know if you have questions. AnimationsInBladeViewNative.zip AnimationsInBladeViewToolkit.zip

[michael-hawker]

Thanks @dan-meier for taking the time to split this out and test out the base animations. This should help anyone who wants to pick this up.

When we get to looking at bugs after the holidays too, we'll see where this stacks against our other open issues for us to pick-up as well. Animations are pretty important, so this'll probably end-up pretty high on our list to make sure we at least take a closer look at.

Thanks again!

[michael-hawker]

@dpaulino @Sergio0694 think this is related at all to that other implicit animation issue you saw?

[jess-rod]

This bug was reported in February 2019. Any news? Thanks.

[michael-hawker]

@Sergio0694 @dpaulino wasn't there a similar bug to this you had investigated around transitions or something? Pretty sure that was a composition level bug, right?

[Arlodotexe]

@dan-meier Thanks for providing that setup for us. The Toolkit uses ElementCompositionPreview under the hood, and the Native example you provided uses Storyboards, so we'll need to try the native example again using only ElementCompositionPreview and no toolkit code.

I'll set this up and report back when I have something 🙂

[Arlodotexe]

I've modified the Native sample to use Composition animations, no references to the toolkit.

AnimationsInBladeViewNative_Composition.zip

@michael-hawker Looks like we've uncovered a platform bug, will need to escalate to the relevant team.

[michael-hawker]

Thanks @Arlodotexe for digging in! 🦙❤

If we have a minimal repro and clear-enough understanding of the problem, it's probably just easiest to open an issue on the WinUI repo (if there isn't one already). We can link it back to this one and then work with them to find the right folks to see if this is known, if there's a work-around, or what we can do moving forward. I'll mark this as external for now.

[Arlodotexe]

I've slimmed down the repro to just Composition Animations and ItemsControl/ItemsPanelTemplate and filed the issue with the WinUI team.

https://github.com/microsoft/microsoft-ui-xaml/issues/6483