Merge pull request #404 from irihitech/switch

Enchance ToggleSwitch

demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml

@@ -26,15 +26,38 @@
             OnContent="OnContent" />
         <StackPanel Orientation="Horizontal">
             <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" />
-            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" IsChecked="True"/>
+            <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" IsChecked="True" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large Loading" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large Loading" IsChecked="True" />
+        </StackPanel>
+
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开"/>
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜"/>
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" IsChecked="True" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜" IsChecked="True" />
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" Classes="Large" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜" Classes="Large" />
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" Classes="Large" IsChecked="True" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜" Classes="Large" IsChecked="True" />
         </StackPanel>
 
         <ToggleSwitch Theme="{DynamicResource ButtonToggleSwitch}">

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>
 
@@ -225,29 +278,29 @@
         x:Key="SimpleToggleSwitch"
         BasedOn="{StaticResource {x:Type ToggleSwitch}}"
         TargetType="ToggleSwitch">
+        <Setter Property="OnContent" Value="{x:Null}" />
+        <Setter Property="OffContent" Value="{x:Null}" />
+        <Setter Property="FontSize" Value="{DynamicResource SimpleToggleSwitchFontSize}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ToggleSwitch">
-                <Grid
+                <Border
+                    x:Name="SwitchBackgroundBorder"
                     Background="{TemplateBinding Background}"
                     Cursor="Hand"
-                    ColumnDefinitions="Auto, *">
+                    Width="{DynamicResource ToggleSwitchDefaultWidth}"
+                    Height="{DynamicResource ToggleSwitchDefaultHeight}"
+                    CornerRadius="100">
+                    <Border.Transitions>
+                        <Transitions>
+                            <BrushTransition Property="Background" Duration="0:0:0.2" />
+                        </Transitions>
+                    </Border.Transitions>
                     <Grid
-                        Grid.Column="0"
+                        ColumnDefinitions="*,*">
-                        Grid.ColumnSpan="2"
-                        TemplatedControl.IsTemplateFocusTarget="True" />
-                    <Border
-                        x:Name="SwitchBackgroundBorder"
-                        Grid.Column="0"
-                        Width="{DynamicResource ToggleSwitchDefaultWidth}"
-                        Height="{DynamicResource ToggleSwitchDefaultHeight}"
-                        CornerRadius="100">
-                        <Border.Transitions>
-                            <Transitions>
-                                <BrushTransition Property="Background" Duration="0:0:0.2" />
-                            </Transitions>
-                        </Border.Transitions>
                         <Canvas
                             x:Name="PART_SwitchKnob"
+                            Grid.Column="0"
+                            Grid.ColumnSpan="2"
                             Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                             Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                             HorizontalAlignment="Left">
@@ -261,11 +314,74 @@
                                     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>
+                        <ContentPresenter
-                </Grid>
+                            x:Name="PART_OnContentPresenter"
+                            Grid.Column="0"
+                            VerticalAlignment="Center"
+                            HorizontalAlignment="Center"
+                            FontSize="{TemplateBinding FontSize}"
+                            Foreground="{TemplateBinding Foreground}"
+                            Content="{TemplateBinding OnContent}"
+                            ContentTemplate="{TemplateBinding OnContentTemplate}" />
+                        <ContentPresenter
+                            x:Name="PART_OffContentPresenter"
+                            Grid.Column="1"
+                            VerticalAlignment="Center"
+                            HorizontalAlignment="Center"
+                            FontSize="{TemplateBinding FontSize}"
+                            Foreground="{TemplateBinding Foreground}"
+                            Content="{TemplateBinding OffContent}"
+                            ContentTemplate="{TemplateBinding OffContentTemplate}" />
+                    </Grid>
+                </Border>
             </ControlTemplate>
         </Setter>
+        <Style Selector="^:unchecked">
+            <Setter Property="Foreground" Value="{DynamicResource SimpleToggleSwitchContainerUnCheckedForeground}" />
+        </Style>
+        <Style Selector="^:checked">
+            <Setter Property="Foreground" Value="{DynamicResource SimpleToggleSwitchContainerCheckedForeground}" />
+        </Style>
+        <Style Selector="^.Small">
+            <Style Selector="^ /template/ ContentPresenter#PART_OnContentPresenter">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_OffContentPresenter">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+        </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Themes/Dark/ToggleSwitch.axaml

@@ -10,4 +10,7 @@
     <SolidColorBrush x:Key="ToggleSwitchContainerCheckedPointeroverBackground" Color="#7FD184" />
     <SolidColorBrush x:Key="ToggleSwitchContainerCheckedPressedBackground" Color="#A6E1A8" />
     <SolidColorBrush x:Key="ToggleSwitchContainerCheckedDisabledBackground" Color="#277731" />
+
+    <SolidColorBrush x:Key="SimpleToggleSwitchContainerUnCheckedForeground" Opacity="0.6" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="SimpleToggleSwitchContainerCheckedForeground" Color="White" />
 </ResourceDictionary>

src/Semi.Avalonia/Themes/Light/ToggleSwitch.axaml

@@ -10,4 +10,7 @@
     <SolidColorBrush x:Key="ToggleSwitchContainerCheckedPointeroverBackground" Color="#30953B" />
     <SolidColorBrush x:Key="ToggleSwitchContainerCheckedPressedBackground" Color="#25772F" />
     <SolidColorBrush x:Key="ToggleSwitchContainerCheckedDisabledBackground" Color="#A4E0A7" />
+
+    <SolidColorBrush x:Key="SimpleToggleSwitchContainerUnCheckedForeground" Opacity="0.62" Color="#1C1F23" />
+    <SolidColorBrush x:Key="SimpleToggleSwitchContainerCheckedForeground" Color="White" />
 </ResourceDictionary>

src/Semi.Avalonia/Themes/Shared/ToggleSwitch.axaml

@@ -11,10 +11,14 @@
     <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>
 
     <Thickness x:Key="ToggleSwitchHeaderMargin">8 4</Thickness>
     <Thickness x:Key="ToggleSwitchOnContentMargin">8 4</Thickness>
+
+    <x:Double x:Key="SimpleToggleSwitchFontSize">14</x:Double>
 </ResourceDictionary>