Theme Transitions

[DarthMazut]

Hello,
I recently was working with WinUI3. I noticted that there is something called Theme Transitions. Basically it works like this:

<StackPanel x:Name="EntranceStackPanel" Orientation="Horizontal">
    <StackPanel.ChildrenTransitions>
        <TransitionCollection>
            <EntranceThemeTransition IsStaggeringEnabled="True" />
        </TransitionCollection>
    </StackPanel.ChildrenTransitions>
    ... children ...
</StackPanel>

This is example straight from WinUI 3 Gallery. So as you can see it's enough to just add EnteranceThemeTransition into ChildrenTranstitions and voila! We're having this beautiful, smooth animations whenever items are added, removed etc...

I started wondering whether there is something similar in Avalonia, but unfortunatelly I did not find anything close. Sure, we have Transition for quite a lot of types, but to actually animate item, you'd need e.g. put in on Canvas and animate its position like e.g. ToggleSwitch is doing. So for me it was quite a lot of work anyway. My expectation is to place item normally, e.g. within grid or stackpanel and just declare that whether this item's child changes its position it should be smooth.

So to avoid placing item on the Canvas, I came up with this idea to make something similar like WinUI 3 theme transitions.
So my overnight work looks like this:

On the left side, there is an ItemsControl - it's bound to VM's ObservableCollection<string>. On the right side there is a grid with two rows and two columns, the item that moves receives changes to only Grid.Row and Grid.Column properties.

In order to achieve that I created Attached property which defines TransformOperationsTransition and subscribes to host Bounds changed event. Basically the core logic looks like this:

Whenever host element changes it's position (BoundsProperty has changed) we doing the following:

• Immediatelly TranslateTransform element to original position
• Add transition defined in attached property to actual element Transitions collection
• Translate it to it's target position (the one taken after BoundsChange) but this time with TranslateTransition so that move looks smooth.
  plus some other neccesary stuff. The whole solution is here: https://github.com/DarthMazut/MoveTransition/tree/main

The cool part is that, whenever client wants to animate any item that changes its position is enough to:

<Border>
    <local:MoveTransitions.Transition>
        <local:MoveTransition Duration="0:0:1" Easing="QuinticEaseOut"/>
    </local:MoveTransitions.Transition>
</Border>

That's it!

Now, I'm obviously not saying the current state of this solution is perfect (it has some problems), as this is just an idea accomplished overnight. But to me looks quite well consider how small XAML is needed.

Now my questions are:

1. Am I correct that Avalonia does not support something like this out of the box?
2. Are there any plans to provide something like this in the future?
3. Whether this is actually good way of achieving this kind of behaviour? Or it seems like completly dead-end?
4. Does it looks like potential quite a big performance issue? I didn't notice anything but my app was samll one, just to test it quickly.
5. Did I completly missed any existing packages that already are doing this kind of behaviour? 😁

Thank you for reading this post. It took me couple of hours to provide this small implementation but to me it looks quite good, so I decided to share it with you. Hoping for some feedback here, thanks :)

[thevortexcloud]

Avalonia does have animations that can play when a control is created, however as a result it can behave kind of weird when using it with a virtualised panel. As the control will be created and destroyed as needed.