chuan/Ursa.Avalonia
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #121 from irihitech/Coolkeke/main

Browse Source 
feat: fix active animation issue.
This commit is contained in:
Dong Bin
2024-02-26 01:34:21 +08:00
committed by GitHub
parent 7d8c62d3e0 4e793691d2
commit 6fe134ba49
7 changed files with 51 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
demo/Ursa.Demo/Pages/SkeletonDemo.axaml
View File

@@ -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}">
<TextBlock Margin="0,2" Text="是先有鸡还是先有蛋" />
IsLoading="{Binding #loading.IsChecked}">
<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}">
<TextBlock Margin="0,2" Text="什么是工匠精神" />
IsLoading="{Binding #loading.IsChecked}">
<SelectableTextBlock Margin="0,2" Text="什么是工匠精神" />
</u:Skeleton>
<u:Skeleton
VerticalAlignment="Bottom"
CornerRadius="2"
IsActive="{Binding #active.IsChecked}"
Loading="{Binding #loading.IsChecked}">
<TextBlock Margin="0,2" Text="看山不是山，看水不是水，看山还是山，看水还是水" />
IsLoading="{Binding #loading.IsChecked}">
<SelectableTextBlock Margin="0,2" Text="看山不是山，看水不是水，看山还是山，看水还是水" />
</u:Skeleton>
</UniformGrid>
</Grid>

1
demo/Ursa.Demo/ViewModels/MainViewViewModel.cs
View File

@@ -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(),

2
demo/Ursa.Demo/ViewModels/MenuViewModel.cs
View File

@@ -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" },

34
src/Ursa.Themes.Semi/Controls/Skeleton.axaml
View File

@@ -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}"
IsVisible="{TemplateBinding Loading}"
IsHitTestVisible="{TemplateBinding IsLoading}"
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>

28
src/Ursa.Themes.Semi/Styles/Skeleton.axaml Normal file
View File

@@ -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>

1
src/Ursa.Themes.Semi/Styles/_index.axaml
View File

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

10
src/Ursa/Controls/Skeleton.cs
View File

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