AvaloniaUI / Avalonia

Develop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The most popular .NET UI client technology
https://avaloniaui.net
MIT License
25.41k stars 2.2k forks source link

Animation doesn't stop when its style is removed after the control is detached from the visual tree #15793

Open MrJul opened 4 months ago

MrJul commented 4 months ago

Describe the bug

If a style is removed from a control when it's already detached from the visual tree, the animations associated with the style continue to run instead of stopping.

To Reproduce

With the following code, click the Detach Then Remove Class button. Observe that the animation continues instead of stopping.

It works correctly if Remove Class Then Detach is clicked instead. (Note that once the animation is in the wrong state from the first click, it won't stop even with that second button.)

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
        x:Class="Sandbox.MainWindow">

  <Window.Styles>
    <Style Selector="Border.anim">
      <Style.Animations>
        <Animation Duration="0:0:1" IterationCount="INFINITE" PlaybackDirection="Alternate">
          <KeyFrame Cue="0%">
            <Setter Property="Background" Value="Gold"/>
          </KeyFrame>
          <KeyFrame Cue="100%">
            <Setter Property="Background" Value="OrangeRed"/>
          </KeyFrame>
        </Animation>
      </Style.Animations>
    </Style>
  </Window.Styles>

  <StackPanel x:Name="Panel" Spacing="20">

    <Border x:Name="Border1"
            Width="100"
            Height="100"
            Background="DodgerBlue"
            Classes="anim" />

    <Border x:Name="Border2"
            Width="100"
            Height="100"
            Background="{Binding #Border1.Background}" />

    <Button Content="Detach Then Remove Class"
            Click="DetachThenRemoveClass" />

    <Button Content="Remove Class Then Detach"
            Click="RemoveClassThenDetach" />

    <Button Content="Attach"
            Click="Attach" />

  </StackPanel>

</Window>
using Avalonia.Controls;
using Avalonia.Interactivity;

namespace Sandbox;

public partial class MainWindow : Window
{
    public MainWindow() 
        => InitializeComponent();

    private void RemoveClassThenDetach(object sender, RoutedEventArgs e)
    {
        Border1.Classes.Remove("anim");
        Panel.Children.Remove(Border1);
    }

    private void DetachThenRemoveClass(object sender, RoutedEventArgs e)
    {
        Panel.Children.Remove(Border1);
        Border1.Classes.Remove("anim");
    }

    private void Attach(object sender, RoutedEventArgs e)
    {
        if (!Panel.Children.Contains(Border1))
        {
            Panel.Children.Insert(0, Border1);
            Border1.Classes.Add("anim");
        }
    }
}

Expected behavior

The animation stops when the associated style is removed.

Avalonia version

11.0.10, 11.1.0-beta2, master b30894cb5c1e2403b70e72853ffbd0176ad7c6dd

OS

No response

Additional context

This is a bit different than the usual "animations keep running when the control is invisible". Here, the style is removed, so there's really no reason for the animations to continue.

rabbitism commented 4 months ago

I can confirm this.