From d355410ff20053c1a718b63b2f23b84a16348aed Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Tue, 6 Aug 2024 15:22:49 +0800
Subject: [PATCH] feat: add Loading Classes.

---
 .../Pages/ToggleSwitchDemo.axaml              |  6 ++
 src/Semi.Avalonia/Controls/ToggleSwitch.axaml | 84 +++++++++++++++++++
 .../Themes/Shared/ToggleSwitch.axaml          |  2 +
 3 files changed, 92 insertions(+)

diff --git a/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
index d747949..94299c2 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
@@ -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}">
diff --git a/src/Semi.Avalonia/Controls/ToggleSwitch.axaml b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
index 5f7a8ae..8bb8bc6 100644
--- a/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
+++ b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
@@ -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>
diff --git a/src/Semi.Avalonia/Themes/Shared/ToggleSwitch.axaml b/src/Semi.Avalonia/Themes/Shared/ToggleSwitch.axaml
index 16a1e78..56a0b72 100644
--- a/src/Semi.Avalonia/Themes/Shared/ToggleSwitch.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/ToggleSwitch.axaml
@@ -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>