Merge pull request #121 from irihitech/Coolkeke/main

feat: fix active animation issue.

demo/Ursa.Demo/Pages/SkeletonDemo.axaml

@@ -25,7 +25,7 @@
                 VerticalAlignment="Center"
                 CornerRadius="2"
                 IsActive="{Binding #active.IsChecked}"
-                Loading="{Binding #loading.IsChecked}">
+                IsLoading="{Binding #loading.IsChecked}">
                 <Image RenderOptions.BitmapInterpolationMode="HighQuality" Source="../Assets/Ursa.ico" />
             </u:Skeleton>
             <UniformGrid
@@ -38,23 +38,23 @@
                     VerticalAlignment="Top"
                     CornerRadius="2"
                     IsActive="{Binding #active.IsChecked}"
-                    Loading="{Binding #loading.IsChecked}">
+                    IsLoading="{Binding #loading.IsChecked}">
-                    <TextBlock Margin="0,2" Text="是先有鸡还是先有蛋" />
+                    <SelectableTextBlock Margin="0,2" Text="是先有鸡还是先有蛋" />
                 </u:Skeleton>
                 <u:Skeleton
                     Margin="0,0,100,0"
                     VerticalAlignment="Center"
                     CornerRadius="2"
                     IsActive="{Binding #active.IsChecked}"
-                    Loading="{Binding #loading.IsChecked}">
+                    IsLoading="{Binding #loading.IsChecked}">
-                    <TextBlock Margin="0,2" Text="什么是工匠精神" />
+                    <SelectableTextBlock Margin="0,2" Text="什么是工匠精神" />
                 </u:Skeleton>
                 <u:Skeleton
                     VerticalAlignment="Bottom"
                     CornerRadius="2"
                     IsActive="{Binding #active.IsChecked}"
-                    Loading="{Binding #loading.IsChecked}">
+                    IsLoading="{Binding #loading.IsChecked}">
-                    <TextBlock Margin="0,2" Text="看山不是山，看水不是水，看山还是山，看水还是水" />
+                    <SelectableTextBlock Margin="0,2" Text="看山不是山，看水不是水，看山还是山，看水还是水" />
                 </u:Skeleton>
             </UniformGrid>
         </Grid>

demo/Ursa.Demo/ViewModels/MainViewViewModel.cs

@@ -51,7 +51,6 @@ public class MainViewViewModel : ViewModelBase
             MenuKeys.MenuKeySkeleton => new SkeletonDemoViewModel(),
             MenuKeys.MenuKeyTagInput => new TagInputDemoViewModel(),
             MenuKeys.MenuKeyTimeline => new TimelineDemoViewModel(),
-            MenuKeys.MenuKeySkeleton => new SkeletonDemoViewModel(),
             MenuKeys.MenuKeyTwoTonePathIcon => new TwoTonePathIconDemoViewModel(),
             MenuKeys.MenuKeyThemeToggler => new ThemeTogglerDemoViewModel(),
             MenuKeys.MenuKeyToolBar => new ToolBarDemoViewModel(),

demo/Ursa.Demo/ViewModels/MenuViewModel.cs

@@ -35,7 +35,7 @@ public class MenuViewModel: ViewModelBase
             new() { MenuHeader = "Pagination", Key = MenuKeys.MenuKeyPagination },
             new() { MenuHeader = "RangeSlider", Key = MenuKeys.MenuKeyRangeSlider },
             new() { MenuHeader = "Selection List", Key = MenuKeys.MenuKeySelectionList, Status = "New" },
-            new() { MenuHeader = "Skeleton", Key = MenuKeys.MenuKeySkeleton },
+            new() { MenuHeader = "Skeleton", Key = MenuKeys.MenuKeySkeleton, Status = "New" },
             new() { MenuHeader = "TagInput", Key = MenuKeys.MenuKeyTagInput },
             new() { MenuHeader = "Theme Toggler", Key = MenuKeys.MenuKeyThemeToggler, Status = "New" },
             new() { MenuHeader = "Timeline", Key = MenuKeys.MenuKeyTimeline, Status = "WIP" },

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

@@ -25,33 +25,17 @@
                             Content="{TemplateBinding Content}"
                             ContentTemplate="{TemplateBinding ContentTemplate}" />
                         <Border
-                            x:Name="PART_Border"
+                            x:Name="PART_LoadingBorder"
                             Classes.Active="{Binding Path= IsActive, RelativeSource={RelativeSource TemplatedParent}}"
-                            IsHitTestVisible="{TemplateBinding Loading}"
+                            IsHitTestVisible="{TemplateBinding IsLoading}"
-                            IsVisible="{TemplateBinding Loading}"
+                            Background="{DynamicResource SkeletonDefaultBackground}"
+                            IsVisible="{TemplateBinding IsLoading}">
+                        </Border>
+                        <Border
+                            x:Name="PART_ActiveBorder"
+                            IsHitTestVisible="{TemplateBinding IsLoading}"
+                            IsVisible="{TemplateBinding IsLoading}"
                             >
-                            <Border.Styles>
-                                <Style Selector="Border">
-                                    <Setter Property="Background" Value="{DynamicResource SkeletonDefaultBackground}"></Setter>
-                                </Style>
-                                <Style Selector="Border.Active">
-                                    <Style.Animations>
-                                        <Animation
-                                            FillMode="None"
-                                            IterationCount="Infinite"
-                                            Easing="CubicEaseInOut"
-                                            PlaybackDirection="Alternate"
-                                            Duration="0:0:1.4">
-                                            <KeyFrame Cue="0%">
-                                                <Setter Property="Border.Background" Value="{DynamicResource SkeletonStartAnimationBackground}" />
-                                            </KeyFrame>
-                                            <KeyFrame Cue="100%">
-                                                <Setter Property="Border.Background" Value="{DynamicResource SkeletonEndAnimationBackground}" />
-                                            </KeyFrame>
-                                        </Animation>
-                                    </Style.Animations>
-                                </Style>
-                            </Border.Styles>
                         </Border>
                     </Panel>
                 </Border>

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

@@ -0,0 +1,28 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:u="https://irihi.tech/ursa">
+    <Design.PreviewWith>
+        <Border Padding="20">
+            <!-- Add Controls for Previewer Here -->
+        </Border>
+    </Design.PreviewWith>
+
+    <!-- Add Styles Here -->
+    <Style Selector="u|Skeleton[IsActive=True][IsLoading=True] /template/ Border#PART_ActiveBorder">
+        <Style.Animations>
+            <Animation
+                FillMode="None"
+                IterationCount="Infinite"
+                Easing="CubicEaseInOut"
+                PlaybackDirection="Alternate"
+                Duration="0:0:1.4">
+                <KeyFrame Cue="0%">
+                    <Setter Property="Border.Background" Value="{DynamicResource SkeletonStartAnimationBackground}" />
+                </KeyFrame>
+                <KeyFrame Cue="100%">
+                    <Setter Property="Border.Background" Value="{DynamicResource SkeletonEndAnimationBackground}" />
+                </KeyFrame>
+            </Animation>
+        </Style.Animations>
+    </Style>
+</Styles>

src/Ursa.Themes.Semi/Styles/_index.axaml

@@ -5,6 +5,7 @@
         </Border>
     </Design.PreviewWith>
     <StyleInclude Source="ButtonGroup.axaml" />
+    <StyleInclude Source="Skeleton.axaml" />
     <StyleInclude Source="ToolBar.axaml"/>
     <!--  Add Styles Here  -->
 </Styles>

src/Ursa/Controls/Skeleton.cs

@@ -17,13 +17,13 @@ namespace Ursa.Controls
             set { SetValue(IsActiveProperty, value); }
         }
 
-        public static readonly StyledProperty<bool> LoadingProperty = 
+        public static readonly StyledProperty<bool> IsLoadingProperty = 
-            AvaloniaProperty.Register<Skeleton, bool>(nameof(Loading));
+            AvaloniaProperty.Register<Skeleton, bool>(nameof(IsLoading));
 
-        public bool Loading
+        public bool IsLoading
         {
-            get => GetValue(LoadingProperty);
+            get => GetValue(IsLoadingProperty);
-            set => SetValue(LoadingProperty, value);
+            set => SetValue(IsLoadingProperty, value);
         }
     }
 }