feat: add loading.

demo/Ursa.Demo/Pages/SkeletonDemo.axaml

@@ -13,18 +13,19 @@
         <vm:SkeletonDemoViewModel />
     </Design.DataContext>
     <StackPanel>
-        <ToggleSwitch Name="s" />
+        <ToggleSwitch Name="loading" Content="Loading" />
-        <Grid MinWidth="400" HorizontalAlignment="Left">
+        <ToggleSwitch Name="active" Content="Active" />
-            <Grid.ColumnDefinitions>
+        <Grid
-                <ColumnDefinition Width="auto" />
+            MinWidth="400"
-                <ColumnDefinition />
+            HorizontalAlignment="Left"
-            </Grid.ColumnDefinitions>
+            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>

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

@@ -26,22 +26,27 @@
                             ContentTemplate="{TemplateBinding ContentTemplate}" />
                         <Border
                             x:Name="PART_Border"
-                            IsHitTestVisible="{TemplateBinding IsActive}"
+                            Classes.Active="{Binding Path= IsActive, RelativeSource={RelativeSource TemplatedParent}}"
-                            IsVisible="{TemplateBinding IsActive}">
+                            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>

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>

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>

src/Ursa/Controls/Skeleton.cs

@@ -16,5 +16,14 @@ namespace Ursa.Controls
             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);
+        }
     }
 }