feat: fix loading animation issue.

This commit is contained in:
rabbitism
2024-09-21 19:27:05 +08:00
parent 054ab858b4
commit 34811c6884
3 changed files with 25 additions and 18 deletions

View File

@@ -10,7 +10,7 @@
mc:Ignorable="d"> mc:Ignorable="d">
<Grid RowDefinitions="Auto, Auto, *"> <Grid RowDefinitions="Auto, Auto, *">
<ToggleSwitch Name="s" Content="Loading" /> <ToggleSwitch Name="s" Content="Loading" />
<StackPanel Grid.Row="1" Orientation="Horizontal"> <StackPanel Grid.Row="1" Orientation="Horizontal" IsVisible="False">
<u:LoadingIcon Classes="Small" /> <u:LoadingIcon Classes="Small" />
<u:LoadingIcon /> <u:LoadingIcon />
<u:LoadingIcon Classes="Large" /> <u:LoadingIcon Classes="Large" />

View File

@@ -7,6 +7,7 @@
<!-- Add Resources Here --> <!-- Add Resources Here -->
<converters:BrushToColorConverter x:Key="BrushToColorConverter" /> <converters:BrushToColorConverter x:Key="BrushToColorConverter" />
<ControlTheme x:Key="{x:Type u:LoadingIcon}" TargetType="u:LoadingIcon"> <ControlTheme x:Key="{x:Type u:LoadingIcon}" TargetType="u:LoadingIcon">
<Setter Property="IsLoading" Value="True"></Setter>
<Setter Property="Foreground" Value="{DynamicResource LoadingIconForeground}" /> <Setter Property="Foreground" Value="{DynamicResource LoadingIconForeground}" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="u:LoadingIcon"> <ControlTemplate TargetType="u:LoadingIcon">
@@ -29,20 +30,6 @@
</GradientStops> </GradientStops>
</ConicGradientBrush> </ConicGradientBrush>
</Arc.Stroke> </Arc.Stroke>
<Arc.Styles>
<Style Selector="Arc[IsVisible=True]">
<Style.Animations>
<Animation IterationCount="Infinite" Duration="0:0:0.5">
<KeyFrame Cue="0%">
<Setter Property="RotateTransform.Angle" Value="0.0" />
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="RotateTransform.Angle" Value="-360.0" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
</Arc.Styles>
</Arc> </Arc>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
@@ -56,13 +43,25 @@
<Setter Property="Height" Value="32" /> <Setter Property="Height" Value="32" />
<Setter Property="StrokeThickness" Value="5" /> <Setter Property="StrokeThickness" Value="5" />
</Style> </Style>
<Style Selector="^[IsLoading=True] /template/ Arc#PART_Arc">
<Style.Animations>
<Animation IterationCount="Infinite" Duration="0:0:0.5">
<KeyFrame Cue="0%">
<Setter Property="RotateTransform.Angle" Value="0.0" />
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="RotateTransform.Angle" Value="-360.0" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
</ControlTheme> </ControlTheme>
<ControlTheme x:Key="{x:Type u:Loading}" TargetType="u:Loading"> <ControlTheme x:Key="{x:Type u:Loading}" TargetType="u:Loading">
<Setter Property="Background" Value="{DynamicResource LoadingMaskBackground}" /> <Setter Property="Background" Value="{DynamicResource LoadingMaskBackground}" />
<Setter Property="Indicator"> <Setter Property="Indicator">
<Template> <Template>
<u:LoadingIcon /> <u:LoadingIcon IsLoading="{Binding $parent[u:Loading].IsLoading, Mode=TwoWay}" />
</Template> </Template>
</Setter> </Setter>
<Setter Property="Template"> <Setter Property="Template">
@@ -98,7 +97,7 @@
<Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Indicator"> <Setter Property="Indicator">
<Template> <Template>
<u:LoadingIcon /> <u:LoadingIcon IsLoading="{Binding $parent[u:LoadingContainer].IsLoading, Mode=TwoWay}" />
</Template> </Template>
</Setter> </Setter>
<Setter Property="Template"> <Setter Property="Template">

View File

@@ -1,8 +1,16 @@
using Avalonia;
using Avalonia.Controls; using Avalonia.Controls;
namespace Ursa.Controls; namespace Ursa.Controls;
public class LoadingIcon: ContentControl public class LoadingIcon: ContentControl
{ {
public static readonly StyledProperty<bool> IsLoadingProperty = AvaloniaProperty.Register<LoadingIcon, bool>(
nameof(IsLoading));
public bool IsLoading
{
get => GetValue(IsLoadingProperty);
set => SetValue(IsLoadingProperty, value);
}
} }