CommunityToolkit / WindowsCommunityToolkit

The Windows Community Toolkit is a collection of helpers, extensions, and custom controls. It simplifies and demonstrates common developer tasks building .NET apps with UWP and the Windows App SDK / WinUI 3 for Windows 10 and Windows 11. The toolkit is part of the .NET Foundation.
https://docs.microsoft.com/windows/communitytoolkit/
Other
5.89k stars 1.37k forks source link

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

Open Marv51 opened 4 years ago

Marv51 commented 4 years ago

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>

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 commented 4 years ago

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 commented 4 years ago

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

Marv51 commented 4 years ago

@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 commented 4 years ago

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

michael-hawker commented 4 years ago

@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 commented 3 years ago

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

Kyaa-dost commented 3 years ago

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

Marv51 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

@JustinXinLiu ⬆️