Merge pull request #11618 from rabbitism/master

Fix ToggleSwitch knob animation issues.

src/Avalonia.Controls/ToggleSwitch.cs

@@ -1,4 +1,5 @@
-using Avalonia.Controls.Metadata;
+using Avalonia.Animation;
+using Avalonia.Controls.Metadata;
 using Avalonia.Controls.Presenters;
 using Avalonia.Controls.Primitives;
 using Avalonia.Controls.Templates;
@@ -42,6 +43,10 @@ namespace Avalonia.Controls
                     x.UpdateKnobPos(x.IsChecked.Value);
                 }
             });
+            KnobTransitionsProperty.Changed.AddClassHandler<ToggleSwitch>((x, e) =>
+            {
+                x.UpdateKnobTransitions();
+            });
         }
 
         /// <summary>
@@ -68,6 +73,12 @@ namespace Avalonia.Controls
         public static readonly StyledProperty<IDataTemplate?> OnContentTemplateProperty =
             AvaloniaProperty.Register<ToggleSwitch, IDataTemplate?>(nameof(OnContentTemplate));
 
+        /// <summary>
+        /// Defines the <see cref="KnobTransitions"/> property.
+        /// </summary>
+        public static readonly StyledProperty<Transitions> KnobTransitionsProperty = 
+            AvaloniaProperty.Register<ToggleSwitch, Transitions>(nameof(KnobTransitions));
+
         /// <summary>
         /// Gets or Sets the Content that is displayed when in the On State.
         /// </summary>
@@ -116,6 +127,17 @@ namespace Avalonia.Controls
             set { SetValue(OnContentTemplateProperty, value); }
         }
 
+        /// <summary>
+        /// Gets or Sets the <see cref="Transitions"/> of switching knob. 
+        /// </summary>
+        public Transitions KnobTransitions
+        {
+            get { return GetValue(KnobTransitionsProperty); }
+            set { SetValue(KnobTransitionsProperty, value); }
+        }
+
+        
+
         private void OffContentChanged(AvaloniaPropertyChangedEventArgs e)
         {
             if (e.OldValue is ILogical oldChild)
@@ -177,7 +199,21 @@ namespace Avalonia.Controls
                 UpdateKnobPos(IsChecked.Value);
             }
         }
-        
+
+        protected override void OnLoaded()
+        {
+            base.OnLoaded();
+            UpdateKnobTransitions();
+        }
+
+        private void UpdateKnobTransitions()
+        {
+            if (_knobsPanel != null)
+            {
+                _knobsPanel.Transitions = KnobTransitions;
+            }
+        }
+
         private void KnobsPanel_PointerPressed(object? sender, Input.PointerPressedEventArgs e)
         {
             _switchStartPoint = e.GetPosition(_switchKnob);
@@ -194,7 +230,7 @@ namespace Avalonia.Controls
                 _knobsPanel!.ClearValue(Canvas.LeftProperty);
 
                 PseudoClasses.Set(":dragging", false);
-
+  
                 if (shouldBecomeChecked == IsChecked)
                 {
                     UpdateKnobPos(shouldBecomeChecked);
@@ -203,6 +239,7 @@ namespace Avalonia.Controls
                 {
                     SetCurrentValue(IsCheckedProperty, shouldBecomeChecked);
                 }
+                UpdateKnobTransitions();
             }
             else
             {
@@ -218,6 +255,10 @@ namespace Avalonia.Controls
         {
             if (_knobsPanelPressed)
             {
+                if(_knobsPanel != null)
+                {
+                    _knobsPanel.Transitions = null;
+                }
                 var difference = e.GetPosition(_switchKnob) - _switchStartPoint;
 
                 if ((!_isDragging) && (System.Math.Abs(difference.X) > 3))

src/Avalonia.Themes.Fluent/Controls/ToggleSwitch.xaml

@@ -28,6 +28,14 @@
     <Setter Property="HorizontalContentAlignment" Value="Left" />
     <Setter Property="VerticalContentAlignment" Value="Center" />
     <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+    <Setter Property="KnobTransitions">
+      <Transitions>
+          <DoubleTransition
+              Easing="CubicEaseOut"
+              Property="Canvas.Left"
+              Duration="0:0:0.2" />
+        </Transitions>
+    </Setter>
     <Setter Property="Template">
       <ControlTemplate>
         <Grid Background="{TemplateBinding Background}" RowDefinitions="Auto,*">
@@ -134,18 +142,6 @@
       <Setter Property="Margin" Value="0" />
     </Style>
 
-    <!--  NormalState  -->
-    <Style Selector="^:not(:dragging) /template/ Grid#PART_MovingKnobs">
-      <Setter Property="Transitions">
-        <Transitions>
-          <DoubleTransition
-              Easing="CubicEaseOut"
-              Property="Canvas.Left"
-              Duration="0:0:0.2" />
-        </Transitions>
-      </Setter>
-    </Style>
-
     <!--  PointerOverState  -->
     <Style Selector="^:pointerover /template/ Border#OuterBorder">
       <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPointerOver}" />

src/Avalonia.Themes.Simple/Controls/ToggleSwitch.xaml

@@ -46,6 +46,14 @@
     <Setter Property="HorizontalContentAlignment" Value="Left" />
     <Setter Property="VerticalContentAlignment" Value="Center" />
     <Setter Property="FontSize" Value="{DynamicResource FontSizeNormal}" />
+    <Setter Property="KnobTransitions">
+      <Transitions>
+        <DoubleTransition
+            Easing="CubicEaseOut"
+            Property="Canvas.Left"
+            Duration="0:0:0.2" />
+      </Transitions>
+    </Setter>
     <Setter Property="Template">
       <ControlTemplate>
         <Grid Background="{TemplateBinding Background}"
@@ -123,11 +131,6 @@
 
               <Grid x:Name="PART_MovingKnobs"
                     Width="20" Height="20">
-                <Grid.Transitions>
-                  <Transitions>
-                    <DoubleTransition Property="Canvas.Left" Duration="0:0:0.2" Easing="CubicEaseOut" />
-                  </Transitions>
-                </Grid.Transitions>
 
                 <Ellipse x:Name="SwitchKnobOn"
                          Fill="{DynamicResource HighlightForegroundColor}"