Add WinUI Expander Animation

[amwx]

Currently, the Expander control uses the Avalonia provided CrossFade ContentTransition when expanding/collapsing. This does not match the animation in WinUI (and IMO doesn't look good anyway). SettingsExpander has also had its animations disabled in part because of this. The way Avalonia implemented animations on Expander is very rigid and previously implementing the WinUI expander animation was either extremely difficult or not possible using the existing IPageTransition interface. I don't feel like getting into the details as to why.

To overcome this limitation and enable the animation, I am building it on as an AttachedProperty. As if we were using the normal IPageTransition, the animation is still defined in code and isn't editable, but it was built off of the WinUI xaml animation. I have also implemented it for all ExpandDirections, even though WinUI only does Down/Up.

Enabling the Animation

By default, on a regular Expander, the animation is opt-in since this is a stock Avalonia control and I don't know what ways its being used. There are a few ways to enable it:

1. Set the control theme that enables the animation

<Expander Theme="{StaticResource ExpanderWinUIAnimationStyle}" />

3. You can also set the attached property yourself (useful if you customize the Expander template):

<Expander ui:ExpanderExt.ExpanderAnimationType="FluentV2" />

If you set the attached property, the value is case-insensitive however it must be equivalent to FluentV2

NOTE: if you customize the expander template and want to use this, make sure you look at the updated ControlTheme as there is a required Border that must be provided that is not part of the original template. It's ClipToBounds property must also be set to True to ensure correct behavior.

4. If you want this to apply to all expanders, you can use a simple Style defined in App.Styles or any parent container:

<Style Selector="Expander">
    <Setter Property="Theme" Value="{StaticResource ExpanderWinUIAnimationStyle}" />
</Style>

SettingsExpander

SettingsExpander will have this animation on by default, and is opt-out. This has previously been requested and is not a stock Avalonia control, so I feel it is ok to make this opt-out. If you would like to opt-out, you'll set the control theme SettingsExpanderNoAnimationStyle on any SettingsExpander you don't want the animation. The Style trick from above should apply if you want to disable for all.