feat:Redesign the usage pattern of WHAnimationHelper once more to deliver a superior axaml editing and consumption experience.

demo/Ursa.Demo/Pages/NavMenuDemo.axaml

@@ -8,6 +8,7 @@
     xmlns:u="https://irihi.tech/ursa"
     xmlns:vm="using:Ursa.Demo.ViewModels"
     xmlns:iri="https://irihi.tech/shared"
+    xmlns:views="using:Ursa.Demo.Pages"
     d:DesignHeight="450"
     d:DesignWidth="800"
     x:CompileBindings="True"
@@ -39,7 +40,10 @@
                 IsHorizontalCollapsed="{Binding #collapse.IsChecked, Mode=OneWay}"
                 ItemsSource="{Binding MenuItems}"
                 SelectedItem="{Binding SelectedMenuItem}"
-                SubMenuBinding="{Binding Children}">
+                SubMenuBinding="{Binding Children}"
+                u:WHAnimationHelper.TriggerAvaloniaProperty="{x:Static u:NavMenu.IsHorizontalCollapsedProperty}"
+                u:WHAnimationHelper.CreateAnimation="{x:Static views:NavMenuDemo.NavMenuAnimation}"
+                u:WHAnimationHelper.EnableWHAnimation="True">
                 <u:NavMenu.Styles>
                     <Style x:DataType="vm:MenuItem" Selector="u|NavMenuItem">
                         <Setter Property="IsSeparator" Value="{Binding IsSeparator}" />

demo/Ursa.Demo/Pages/NavMenuDemo.axaml.cs

@@ -1,5 +1,11 @@
-using Avalonia.Controls;
+using System;
+using Avalonia;
+using Avalonia.Animation;
+using Avalonia.Animation.Easings;
+using Avalonia.Controls;
 using Avalonia.Interactivity;
+using Avalonia.Layout;
+using Avalonia.Styling;
 using Ursa.Controls;
 using Ursa.Helpers;
 
@@ -7,17 +13,42 @@ namespace Ursa.Demo.Pages;
 
 public partial class NavMenuDemo : UserControl
 {
-    private readonly NavMenuAnimationHelper _animationHelper;
-
     public NavMenuDemo()
     {
         InitializeComponent();
-        _animationHelper = new NavMenuAnimationHelper(menu);
     }
 
-    protected override void OnLoaded(RoutedEventArgs e)
-    {
-        base.OnLoaded(e);
-        _animationHelper.Start();
-    }
+    public static WHAnimationHelperCreateAnimationDelegate NavMenuAnimation { get; } =
+        (_, oldDesiredSize, newDesiredSize) =>
+        {
+            if (oldDesiredSize.Width > newDesiredSize.Width)
+                newDesiredSize = newDesiredSize.WithWidth(newDesiredSize.Width + 20);
+            return new Animation
+            {
+                Duration = TimeSpan.FromMilliseconds(300),
+                Easing = new CubicEaseInOut(),
+                FillMode = FillMode.None,
+                Children =
+                {
+                    new KeyFrame
+                    {
+                        Cue = new Cue(0.0),
+                        Setters =
+                        {
+                            new Setter(WidthProperty, oldDesiredSize.Width),
+                            new Setter(HeightProperty, oldDesiredSize.Height)
+                        }
+                    },
+                    new KeyFrame
+                    {
+                        Cue = new Cue(1.0),
+                        Setters =
+                        {
+                            new Setter(WidthProperty, newDesiredSize.Width),
+                            new Setter(HeightProperty, newDesiredSize.Height)
+                        }
+                    }
+                }
+            };
+        };
 }