zhaoyushun1999/Semi.Avalonia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Loading Classes.

Browse Source
This commit is contained in:
Zhang Dian 2024-08-06 15:22:49 +08:00
parent fae4a32507
commit d355410ff2
3 changed files with 92 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
View File

@ -27,14 +27,20 @@
<StackPanel Orientation="Horizontal">
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" />
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" IsChecked="True"/>
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small Loading" />
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small Loading" IsChecked="True"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" />
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" IsChecked="True" />
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Loading" />
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Loading" IsChecked="True" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large" />
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large" IsChecked="True"/>
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large Loading" />
<ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large Loading" IsChecked="True"/>
</StackPanel>
<ToggleSwitch Theme="{DynamicResource ButtonToggleSwitch}">

84
src/Semi.Avalonia/Controls/ToggleSwitch.axaml
View File

@ -72,6 +72,37 @@
Background="White"
BoxShadow="0 0 1 1 #222E3238"
CornerRadius="100" />
<Arc
x:Name="SwitchKnobLoadingIndicator"
IsVisible="False"
StrokeThickness="2"
StartAngle="0"
SweepAngle="140"
StrokeJoin="Round"
StrokeLineCap="Round">
<Arc.Stroke>
<ConicGradientBrush>
<GradientStops>
<GradientStop Offset="0.1" Color="Transparent"/>
<GradientStop Offset="0.7" Color="White"/>
</GradientStops>
</ConicGradientBrush>
</Arc.Stroke>
<Arc.Styles>
<Style Selector="Arc[IsVisible=True]">
<Style.Animations>
<Animation IterationCount="Infinite" Duration="0:0:0.6">
<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>
</Grid>
</Canvas>
</Border>
@ -149,6 +180,22 @@
<Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerCheckedDisabledBackground}" />
</Style>
</Style>
<Style Selector="^.Loading">
<Style Selector="^ /template/ Border#SwitchKnobIndicator">
<Setter Property="IsVisible" Value="False" />
</Style>
<Style Selector="^ /template/ Arc#SwitchKnobLoadingIndicator">
<Setter Property="IsVisible" Value="True" />
</Style>
<Style Selector="^:unchecked /template/ Border#SwitchBackgroundBorder">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedPointeroverBackground}" />
</Style>
<Style Selector="^:checked /template/ Border#SwitchBackgroundBorder">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerCheckedPointeroverBackground}" />
</Style>
</Style>
<Style Selector="^.Small">
<Style Selector="^ /template/ Border#SwitchBackgroundBorder">
<Setter Property="Width" Value="{DynamicResource ToggleSwitchSmallWidth}" />
@ -163,6 +210,9 @@
<Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" />
<Setter Property="Margin" Value="{DynamicResource ToggleSwitchIndicatorSmallMargin}"/>
</Style>
<Style Selector="^ /template/ Arc#SwitchKnobLoadingIndicator">
<Setter Property="StrokeThickness" Value="{DynamicResource ToggleSwitchLoadingIndicatorSmallStrokeThickness}" />
</Style>
</Style>
<Style Selector="^.Large">
<Style Selector="^ /template/ Border#SwitchBackgroundBorder">
@ -178,6 +228,9 @@
<Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" />
<Setter Property="Margin" Value="{DynamicResource ToggleSwitchIndicatorLargeMargin}"/>
</Style>
<Style Selector="^ /template/ Arc#SwitchKnobLoadingIndicator">
<Setter Property="StrokeThickness" Value="{DynamicResource ToggleSwitchLoadingIndicatorLargeStrokeThickness}" />
</Style>
</Style>
</ControlTheme>
@ -261,6 +314,37 @@
Background="White"
BoxShadow="0 0 1 1 #222E3238"
CornerRadius="100" />
<Arc
x:Name="SwitchKnobLoadingIndicator"
IsVisible="False"
StrokeThickness="2"
StartAngle="0"
SweepAngle="140"
StrokeJoin="Round"
StrokeLineCap="Round">
<Arc.Stroke>
<ConicGradientBrush>
<GradientStops>
<GradientStop Offset="0.1" Color="Transparent" />
<GradientStop Offset="0.7" Color="White" />
</GradientStops>
</ConicGradientBrush>
</Arc.Stroke>
<Arc.Styles>
<Style Selector="Arc[IsVisible=True]">
<Style.Animations>
<Animation IterationCount="Infinite" Duration="0:0:0.6">
<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>
</Grid>
</Canvas>
</Border>

2
src/Semi.Avalonia/Themes/Shared/ToggleSwitch.axaml
View File

@ -11,6 +11,8 @@
<Thickness x:Key="ToggleSwitchIndicatorDefaultMargin">2 0 0 0</Thickness>
<Thickness x:Key="ToggleSwitchIndicatorSmallMargin">1 0 0 0</Thickness>
<Thickness x:Key="ToggleSwitchIndicatorLargeMargin">3 0 0 0</Thickness>
<x:Double x:Key="ToggleSwitchLoadingIndicatorSmallStrokeThickness">1</x:Double>
<x:Double x:Key="ToggleSwitchLoadingIndicatorLargeStrokeThickness">3</x:Double>
<x:Double x:Key="ToggleSwitchDefaultFontSize">12</x:Double>
<x:Double x:Key="ToggleSwitchLargeFontSize">14</x:Double>