feat:Add several predefined SizeAnimations.

demo/Ursa.Demo/Pages/NavMenuDemo.axaml

@@ -41,9 +41,7 @@
                 ItemsSource="{Binding MenuItems}"
                 SelectedItem="{Binding SelectedMenuItem}"
                 SubMenuBinding="{Binding Children}"
-                u:SizeAnimationHelper.TriggerAvaloniaProperty="{x:Static u:NavMenu.IsHorizontalCollapsedProperty}"
+                Classes="enable_animation">
-                u:SizeAnimationHelper.CreateAnimation="{x:Static views:NavMenuDemo.NavMenuAnimation}"
-                u:SizeAnimationHelper.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

@@ -17,38 +17,4 @@ public partial class NavMenuDemo : UserControl
     {
         InitializeComponent();
     }
-
-    public static SizeAnimationHelperAnimationGeneratorDelegate 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)
-                        }
-                    }
-                }
-            };
-        };
 }

src/Ursa.Themes.Semi/Controls/NavMenu.axaml

@@ -12,27 +12,27 @@
             <ControlTemplate TargetType="u:NavMenu">
                 <Grid RowDefinitions="Auto, *, Auto">
                     <ContentPresenter Content="{TemplateBinding Header}" />
-					<ScrollViewer
+                    <ScrollViewer
-						Grid.Row="1"
+                        Grid.Row="1"
-						HorizontalAlignment="Stretch"
+                        HorizontalAlignment="Stretch"
-						HorizontalScrollBarVisibility="Disabled"
+                        HorizontalScrollBarVisibility="Disabled"
-						AllowAutoHide="True"
+                        AllowAutoHide="True"
-						VerticalScrollBarVisibility="Auto">
+                        VerticalScrollBarVisibility="Auto">
-						<ScrollViewer.Styles>
+                        <ScrollViewer.Styles>
-							<Style Selector="ScrollViewer /template/ ScrollBar">
+                            <Style Selector="ScrollViewer /template/ ScrollBar">
-								<Setter Property="Opacity" Value="0" />
+                                <Setter Property="Opacity" Value="0" />
-							</Style>
+                            </Style>
-							<Style Selector="ScrollViewer:pointerover">
+                            <Style Selector="ScrollViewer:pointerover">
-								<Style Selector="^ /template/ ScrollBar#PART_HorizontalScrollBar">
+                                <Style Selector="^ /template/ ScrollBar#PART_HorizontalScrollBar">
-									<Setter Property="Opacity" Value="1" />
+                                    <Setter Property="Opacity" Value="1" />
-								</Style>
+                                </Style>
-								<Style Selector="^ /template/ ScrollBar#PART_VerticalScrollBar">
+                                <Style Selector="^ /template/ ScrollBar#PART_VerticalScrollBar">
-									<Setter Property="Opacity" Value="1" />
+                                    <Setter Property="Opacity" Value="1" />
-								</Style>
+                                </Style>
-							</Style>
+                            </Style>
-						</ScrollViewer.Styles>
+                        </ScrollViewer.Styles>
-						<ItemsPresenter Name="PART_ItemsPresenter" ItemsPanel="{TemplateBinding ItemsPanel}" />
+                        <ItemsPresenter Name="PART_ItemsPresenter" ItemsPanel="{TemplateBinding ItemsPanel}" />
-					</ScrollViewer>
+                    </ScrollViewer>
                     <ContentPresenter Grid.Row="2" Content="{TemplateBinding Footer}" />
                 </Grid>
             </ControlTemplate>
@@ -44,6 +44,15 @@
             <Setter Property="Width" Value="{Binding $self.CollapseWidth}" />
             <Setter Property="Grid.IsSharedSizeScope" Value="False" />
         </Style>
+        <Style Selector="^.enable_animation">
+            <Setter Property="u:SizeAnimationHelper.TriggerAvaloniaProperty"
+                    Value="{x:Static u:NavMenu.IsHorizontalCollapsedProperty}">
+            </Setter>
+            <Setter Property="u:SizeAnimationHelper.CreateAnimation"
+                    Value="{DynamicResource NavMenuWidthAnimationGenerator}">
+            </Setter>
+            <Setter Property="u:SizeAnimationHelper.EnableWHAnimation" Value="True"></Setter>
+        </Style>
     </ControlTheme>
 
     <ControlTemplate x:Key="DefaultNavMenuItemTemplate" TargetType="u:NavMenuItem">
@@ -134,13 +143,15 @@
                         <Transitions>
                             <DoubleTransition Easing="QuadraticEaseIn" Property="Height" Duration="0.25" />
                             <DoubleTransition Easing="QuadraticEaseOut" Property="Opacity" Duration="0.25" />
-                            <TransformOperationsTransition Easing="QuadraticEaseInOut" Property="RenderTransform" Duration="0.25" />
+                            <TransformOperationsTransition Easing="QuadraticEaseInOut" Property="RenderTransform"
+                                                           Duration="0.25" />
                         </Transitions>
                     </ItemsPresenter.Transitions>
                 </ItemsPresenter>
                 <LayoutTransformControl.Transitions>
                     <Transitions>
-                        <TransformOperationsTransition Easing="QuadraticEaseInOut" Property="LayoutTransform" Duration="0.15" Delay="0.1" />
+                        <TransformOperationsTransition Easing="QuadraticEaseInOut" Property="LayoutTransform"
+                                                       Duration="0.15" Delay="0.1" />
                     </Transitions>
                 </LayoutTransformControl.Transitions>
             </LayoutTransformControl>
@@ -183,12 +194,12 @@
         <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter:pointerover">
             <Setter Property="Foreground" Value="{DynamicResource ListBoxItemPointeroverForeground}" />
         </Style>
-		<Style Selector="^:focus /template/ Border#PART_Border">
+        <Style Selector="^:focus /template/ Border#PART_Border">
-			<Setter Property="Background" Value="{DynamicResource ListBoxItemPointeroverBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ListBoxItemPointeroverBackground}" />
-		</Style>
+        </Style>
-		<Style Selector="^:focus /template/ ContentPresenter#PART_HeaderPresenter">
+        <Style Selector="^:focus /template/ ContentPresenter#PART_HeaderPresenter">
-			<Setter Property="Foreground" Value="{DynamicResource ListBoxItemPointeroverForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ListBoxItemPointeroverForeground}" />
-		</Style>
+        </Style>
         <Style Selector="^:horizontal-collapsed:first-level">
             <Setter Property="HorizontalAlignment" Value="Stretch" />
             <Style Selector="^ /template/ Border#PART_Border">

src/Ursa.Themes.Semi/Index.axaml.cs

@@ -26,6 +26,8 @@ public class SemiTheme : Styles
     public SemiTheme(IServiceProvider? provider = null)
     {
         AvaloniaXamlLoader.Load(provider, this);
+        Resources.MergedDictionaries.Add(new SizeAnimations.DefaultSizeAnimations());
+        Resources.MergedDictionaries.Add(new SizeAnimations.NavMenuSizeAnimations());
     }
 
     public static ThemeVariant Aquatic => new(nameof(Aquatic), ThemeVariant.Dark);

src/Ursa.Themes.Semi/SizeAnimations/DefaultSizeAnimations.cs

@@ -0,0 +1,105 @@
+using Avalonia.Animation;
+using Avalonia.Animation.Easings;
+using Avalonia.Controls;
+using Avalonia.Layout;
+using Avalonia.Styling;
+using Ursa.Helpers;
+
+namespace Ursa.Themes.Semi.SizeAnimations;
+
+public partial class DefaultSizeAnimations : ResourceDictionary
+{
+    public const string WidthAnimationGeneratorKey = "WidthAnimationGenerator";
+    public const string HeightAnimationGeneratorKey = "HeightAnimationGenerator";
+    public const string WidthHeightAnimationGeneratorKey = "WidthHeightAnimationGenerator";
+
+    public DefaultSizeAnimations()
+    {
+        Add(WidthAnimationGeneratorKey, WidthAnimationGenerator);
+        Add(HeightAnimationGeneratorKey, HeightAnimationGenerator);
+        Add(WidthHeightAnimationGeneratorKey, WidthHeightAnimationGenerator);
+    }
+
+    private readonly SizeAnimationHelperAnimationGeneratorDelegate WidthAnimationGenerator =
+        (_, oldDesiredSize, newDesiredSize) => new Animation
+        {
+            Duration = TimeSpan.FromMilliseconds(300),
+            Easing = new CubicEaseInOut(),
+            FillMode = FillMode.None,
+            Children =
+            {
+                new KeyFrame
+                {
+                    Cue = new Cue(0.0),
+                    Setters =
+                    {
+                        new Setter(Layoutable.WidthProperty, oldDesiredSize.Width)
+                    }
+                },
+                new KeyFrame
+                {
+                    Cue = new Cue(1.0),
+                    Setters =
+                    {
+                        new Setter(Layoutable.WidthProperty, newDesiredSize.Width)
+                    }
+                }
+            }
+        };
+
+    private readonly SizeAnimationHelperAnimationGeneratorDelegate HeightAnimationGenerator =
+        (_, oldDesiredSize, newDesiredSize) => new Animation
+        {
+            Duration = TimeSpan.FromMilliseconds(300),
+            Easing = new CubicEaseInOut(),
+            FillMode = FillMode.None,
+            Children =
+            {
+                new KeyFrame
+                {
+                    Cue = new Cue(0.0),
+                    Setters =
+                    {
+                        new Setter(Layoutable.HeightProperty, oldDesiredSize.Height)
+                    }
+                },
+                new KeyFrame
+                {
+                    Cue = new Cue(1.0),
+                    Setters =
+                    {
+                        new Setter(Layoutable.HeightProperty, newDesiredSize.Height)
+                    }
+                }
+            }
+        };
+
+    private readonly SizeAnimationHelperAnimationGeneratorDelegate WidthHeightAnimationGenerator =
+        (_, oldDesiredSize, newDesiredSize) => new Animation
+        {
+            Duration = TimeSpan.FromMilliseconds(300),
+            Easing = new CubicEaseInOut(),
+            FillMode = FillMode.None,
+            Children =
+            {
+                new KeyFrame
+                {
+                    Cue = new Cue(0.0),
+                    Setters =
+                    {
+                        new Setter(Layoutable.WidthProperty, oldDesiredSize.Width),
+                        new Setter(Layoutable.HeightProperty, oldDesiredSize.Height)
+                    }
+                },
+                new KeyFrame
+                {
+                    Cue = new Cue(1.0),
+                    Setters =
+                    {
+                        new Setter(Layoutable.WidthProperty, newDesiredSize.Width),
+                        new Setter(Layoutable.HeightProperty, newDesiredSize.Height)
+                    }
+                }
+            }
+        };
+}

src/Ursa.Themes.Semi/SizeAnimations/NavMenuSizeAnimations.cs

@@ -0,0 +1,52 @@
+using Avalonia.Animation;
+using Avalonia.Animation.Easings;
+using Avalonia.Controls;
+using Avalonia.Layout;
+using Avalonia.Styling;
+using Ursa.Helpers;
+
+namespace Ursa.Themes.Semi.SizeAnimations;
+
+public class NavMenuSizeAnimations : ResourceDictionary
+{
+    public const string NavMenuWidthAnimationGeneratorKey = "NavMenuWidthAnimationGenerator";
+
+    public NavMenuSizeAnimations()
+    {
+        Add(NavMenuWidthAnimationGeneratorKey, NavMenuWidthAnimationGenerator);
+    }
+
+    private readonly SizeAnimationHelperAnimationGeneratorDelegate NavMenuWidthAnimationGenerator =
+        (_, 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(Layoutable.WidthProperty, oldDesiredSize.Width),
+                            new Setter(Layoutable.HeightProperty, oldDesiredSize.Height)
+                        }
+                    },
+                    new KeyFrame
+                    {
+                        Cue = new Cue(1.0),
+                        Setters =
+                        {
+                            new Setter(Layoutable.WidthProperty, newDesiredSize.Width),
+                            new Setter(Layoutable.HeightProperty, newDesiredSize.Height)
+                        }
+                    }
+                }
+            };
+        };
+}