Animating height of element in a DockPanel jumps from start to finish immediately

[Marv51]

Describe the bug

When animating the height of a Border with Dock="Top" element inside a DockPanel. The animation is not executed, and the height jumps from start to finish immediatly. This seems to be Height specific, as Opacity works for me without issue. No errors, exceptions or other are shown.

Element defined like this:

<controls:DockPanel>
      <Border Height="90" controls:DockPanel.Dock="Top" x:Name="theBorder" BorderBrush="#444444" BorderThickness="0 0 0 1">
      <!-- more things here -->
</controls:DockPanel>
<!-- xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls" -->

Animated like this inside a VisualState:

<Storyboard>
        <DoubleAnimation Storyboard.TargetName="theBorder" Storyboard.TargetProperty="Height" To="0" />
</Storyboard>

• [ ] Is this bug a regression in the toolkit? If so, what toolkit version did you last see it work:

Steps to Reproduce

See above

Expected behavior

Smooth animation from 80px height to 0px height.

Environment

NuGet Package(s): 

Package Version(s): 

Windows 10 Build Number:
- [ ] Fall Creators Update (16299)
- [ ] April 2018 Update (17134)
- [ ] October 2018 Update (17763)
- [ ] May 2019 Update (18362)
- [x] May 2020 Update (19041)
- [ ] Insider Build (build number: )

App min and target version:
- [ ] Fall Creators Update (16299)
- [ ] April 2018 Update (17134)
- [min] October 2018 Update (17763)
- [ ] May 2019 Update (18362)
- [target] May 2020 Update (19041)
- [ ] Insider Build (xxxxx)

Device form factor:
- [x] Desktop
- [ ] Xbox
- [ ] Surface Hub
- [ ] IoT

Visual Studio 
- [ ] 2017 (version: )
- [x] 2019 (version: 16.7) 
- [x] 2019 Preview (version: 16.8 Preview 2)

Additional context

This is the UWP version. "Microsoft.Toolkit.Uwp.UI.Controls" nuget package, version 6.1.1

[ghost]

Hello Marv51, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[Kyaa-dost]

@Marv51 That's an interesting find. Do you want to work on this issue and create a PR?

[Marv51]

@Kyaa-dost I'm really not that familiar with how animation works in this context. Seems to be difficult to fix because the panel needs to be re-"arranged" every frame?

[Kyaa-dost]

@Marv51 no worries, will see if any community member can jump in to investigate this further.

[michael-hawker]

@Marv51 have you tried slowing the time range down? I tried to recreate in the sample app to help us with reproducing, but I couldn't quite get it to trigger, not sure what I'm missing:

<Page
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:Microsoft.Toolkit.Uwp.SampleApp.SamplePages"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
      xmlns:Interactions="using:Microsoft.Xaml.Interactions.Core"
      xmlns:Media="using:Microsoft.Xaml.Interactions.Media"
      mc:Ignorable="d" >
  <Page.Resources>
    <Storyboard x:Key="MyAnimation">
      <DoubleAnimation Storyboard.TargetName="theBorder" Storyboard.TargetProperty="Height" To="0" Duration="0:0:2.2" />
    </Storyboard>
  </Page.Resources>

  <Grid>
    <TextBlock Margin="5" Text="In this demo you can't add a child after a Stretch child"></TextBlock>
    <Grid Padding="48">
      <controls:DockPanel x:Name="SampleDockPanel" 
                          Background="LightGray" 
                          LastChildFill="False" 
                          Margin="2" 
                          Padding="0,0,0,0">
        <Border Height="90" controls:DockPanel.Dock="Top" x:Name="theBorder" BorderBrush="#444444" BorderThickness="0 0 0 1"/>
        <StackPanel Height="100" controls:DockPanel.Dock="Top" Background="Purple"></StackPanel>
        <StackPanel Width="100" controls:DockPanel.Dock="Left" Background="Red"></StackPanel>
        <StackPanel Height="100" controls:DockPanel.Dock="Bottom" Background="Green"></StackPanel>
        <StackPanel Width="100" controls:DockPanel.Dock="Right" Background="Blue"></StackPanel>
      </controls:DockPanel>
        <Button x:Name="button"> Play
            <Interactivity:Interaction.Behaviors>
                <Interactions:EventTriggerBehavior EventName="Click">
                    <Media:ControlStoryboardAction Storyboard="{StaticResource MyAnimation}" ControlStoryboardOption="Play"/>
                </Interactions:EventTriggerBehavior>
            </Interactivity:Interaction.Behaviors>
        </Button>
    </Grid>
  </Grid>
</Page>

@JustinXinLiu any thoughts here? I don't think we intended these panels to support animations originally.

[Kyaa-dost]

@Marv51 did you have a chance to look into the above comment?

[Kyaa-dost]

@Marv51 please let us know if you are still seeing this and take a look at the comment above.

[Marv51]

I tried looking into this again, and since I am not familiar with the xamlbehaviours, i tried again with triggers but couldn't get it to animate. When filing the issue I was fairly certain that it wasn't user error. However I am a bit short on time right now so I can't really exclude that I did something wrong.

[Kyaa-dost]

@Marv51 Thanks for re-testing and we are still unable to repro this in the sample app.

@JustinXinLiu if possible can you provide some insight on this?

[Kyaa-dost]

@JustinXinLiu ⬆️