AvaloniaUI / Avalonia

Develop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The most popular .NET UI client technology

Home Page:https://avaloniaui.net

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

MrJul opened this issue · comments

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 b30894c

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.

I can confirm this.