From a5505139254fa3a94d2575f2f13ae63225a710a1 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Wed, 27 Dec 2023 17:38:42 +0800
Subject: [PATCH] feat: add loading.

---
 demo/Ursa.Demo/Pages/SkeletonDemo.axaml       | 24 +++++++++++--------
 src/Ursa.Themes.Semi/Controls/Skeleton.axaml  | 15 ++++++++----
 .../Themes/Dark/Skeleton.axaml                |  1 +
 .../Themes/Light/Skeleton.axaml               |  1 +
 src/Ursa/Controls/Skeleton.cs                 | 13 ++++++++--
 5 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/demo/Ursa.Demo/Pages/SkeletonDemo.axaml b/demo/Ursa.Demo/Pages/SkeletonDemo.axaml
index 25f8b79..13198c0 100644
--- a/demo/Ursa.Demo/Pages/SkeletonDemo.axaml
+++ b/demo/Ursa.Demo/Pages/SkeletonDemo.axaml
@@ -13,18 +13,19 @@
         <vm:SkeletonDemoViewModel />
     </Design.DataContext>
     <StackPanel>
-        <ToggleSwitch Name="s" />
-        <Grid MinWidth="400" HorizontalAlignment="Left">
-            <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="auto" />
-                <ColumnDefinition />
-            </Grid.ColumnDefinitions>
+        <ToggleSwitch Name="loading" Content="Loading" />
+        <ToggleSwitch Name="active" Content="Active" />
+        <Grid
+            MinWidth="400"
+            HorizontalAlignment="Left"
+            ColumnDefinitions="auto,*">
             <u:Skeleton
                 Width="100"
                 Height="100"
                 VerticalAlignment="Center"
                 CornerRadius="2"
-                IsActive="{Binding #s.IsChecked}">
+                IsActive="{Binding #active.IsChecked}"
+                Loading="{Binding #loading.IsChecked}">
                 <Image RenderOptions.BitmapInterpolationMode="HighQuality" Source="../Assets/Ursa.ico" />
             </u:Skeleton>
             <UniformGrid
@@ -36,20 +37,23 @@
                     Margin="0,0,200,0"
                     VerticalAlignment="Top"
                     CornerRadius="2"
-                    IsActive="{Binding #s.IsChecked}">
+                    IsActive="{Binding #active.IsChecked}"
+                    Loading="{Binding #loading.IsChecked}">
                     <TextBlock Margin="0,2" Text="是先有鸡还是先有蛋" />
                 </u:Skeleton>
                 <u:Skeleton
                     Margin="0,0,100,0"
                     VerticalAlignment="Center"
                     CornerRadius="2"
-                    IsActive="{Binding #s.IsChecked}">
+                    IsActive="{Binding #active.IsChecked}"
+                    Loading="{Binding #loading.IsChecked}">
                     <TextBlock Margin="0,2" Text="什么是工匠精神" />
                 </u:Skeleton>
                 <u:Skeleton
                     VerticalAlignment="Bottom"
                     CornerRadius="2"
-                    IsActive="{Binding #s.IsChecked}">
+                    IsActive="{Binding #active.IsChecked}"
+                    Loading="{Binding #loading.IsChecked}">
                     <TextBlock Margin="0,2" Text="看山不是山，看水不是水，看山还是山，看水还是水" />
                 </u:Skeleton>
             </UniformGrid>
diff --git a/src/Ursa.Themes.Semi/Controls/Skeleton.axaml b/src/Ursa.Themes.Semi/Controls/Skeleton.axaml
index 2f78068..c7fe93b 100644
--- a/src/Ursa.Themes.Semi/Controls/Skeleton.axaml
+++ b/src/Ursa.Themes.Semi/Controls/Skeleton.axaml
@@ -26,22 +26,27 @@
                             ContentTemplate="{TemplateBinding ContentTemplate}" />
                         <Border
                             x:Name="PART_Border"
-                            IsHitTestVisible="{TemplateBinding IsActive}"
-                            IsVisible="{TemplateBinding IsActive}">
+                            Classes.Active="{Binding Path= IsActive, RelativeSource={RelativeSource TemplatedParent}}"
+                            IsHitTestVisible="{TemplateBinding Loading}"
+                            IsVisible="{TemplateBinding Loading}"
+                            >
                             <Border.Styles>
                                 <Style Selector="Border">
+                                    <Setter Property="Background" Value="{DynamicResource SkeletonDefaultBackground}"></Setter>
+                                </Style>
+                                <Style Selector="Border.Active">
                                     <Style.Animations>
                                         <Animation
-                                            FillMode="Both"
+                                            FillMode="None"
                                             IterationCount="Infinite"
                                             Easing="CubicEaseInOut"
                                             PlaybackDirection="Alternate"
                                             Duration="0:0:1.4">
                                             <KeyFrame Cue="0%">
-                                                <Setter Property="Background" Value="{DynamicResource SkeletonStartAnimationBackground}" />
+                                                <Setter Property="Border.Background" Value="{DynamicResource SkeletonStartAnimationBackground}" />
                                             </KeyFrame>
                                             <KeyFrame Cue="100%">
-                                                <Setter Property="Background" Value="{DynamicResource SkeletonEndAnimationBackground}" />
+                                                <Setter Property="Border.Background" Value="{DynamicResource SkeletonEndAnimationBackground}" />
                                             </KeyFrame>
                                         </Animation>
                                     </Style.Animations>
diff --git a/src/Ursa.Themes.Semi/Themes/Dark/Skeleton.axaml b/src/Ursa.Themes.Semi/Themes/Dark/Skeleton.axaml
index 24f98fc..96578f7 100644
--- a/src/Ursa.Themes.Semi/Themes/Dark/Skeleton.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Dark/Skeleton.axaml
@@ -9,5 +9,6 @@
         <GradientStop Offset="1" Color="#FF2E3238" />
         <GradientStop Offset="1" Color="#FF1C1F23" />
     </LinearGradientBrush>
+    <SolidColorBrush x:Key="SkeletonDefaultBackground" Color="#FF1C1F23"></SolidColorBrush>
     <!--  Add Resources Here  -->
 </ResourceDictionary>
diff --git a/src/Ursa.Themes.Semi/Themes/Light/Skeleton.axaml b/src/Ursa.Themes.Semi/Themes/Light/Skeleton.axaml
index d51f632..7696f5a 100644
--- a/src/Ursa.Themes.Semi/Themes/Light/Skeleton.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Light/Skeleton.axaml
@@ -9,5 +9,6 @@
         <GradientStop Offset="1" Color="#FFE6E8EA" />
         <GradientStop Offset="1" Color="#FFF9F9F9" />
     </LinearGradientBrush>
+    <SolidColorBrush x:Key="SkeletonDefaultBackground" Color="#FFF9F9F9"></SolidColorBrush>
     <!--  Add Resources Here  -->
 </ResourceDictionary>
diff --git a/src/Ursa/Controls/Skeleton.cs b/src/Ursa/Controls/Skeleton.cs
index 6c7c64d..6d9197f 100644
--- a/src/Ursa/Controls/Skeleton.cs
+++ b/src/Ursa/Controls/Skeleton.cs
@@ -8,13 +8,22 @@ namespace Ursa.Controls
 {
     public class Skeleton : ContentControl
     { 
-
+        
         public static readonly StyledProperty<bool> IsActiveProperty =
             AvaloniaProperty.Register<Skeleton, bool>(nameof(IsActive)); 
         public bool IsActive
         {
             get { return GetValue(IsActiveProperty); }
             set { SetValue(IsActiveProperty, value); }
-        } 
+        }
+
+        public static readonly StyledProperty<bool> LoadingProperty = 
+            AvaloniaProperty.Register<Skeleton, bool>(nameof(Loading));
+
+        public bool Loading
+        {
+            get => GetValue(LoadingProperty);
+            set => SetValue(LoadingProperty, value);
+        }
     }
 }