重新设计的 ToggleSwitch 动画无法正常工作

Question

我正在尝试重新设置 ToggleSwitch 的外观，使其看起来像一个阀门。我写了一个样式，它设置了一个新的 ControlTemplate，如下所示。

<Style x:Key="Valve" TargetType="ToggleSwitch">
    <Setter Property="Foreground" Value="{ThemeResource ToggleSwitchContentForeground}" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="MinWidth" Value="154" />
    <Setter Property="ManipulationMode" Value="System,TranslateX" />
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleSwitch">
                <Grid Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />

                            <VisualState x:Name="PointerOver">

                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchStrokeOffPointerOver}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOffPointerOver}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOffPointerOver}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOnPointerOver}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOnPointerOver}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchStrokeOnPointerOver}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchAreaGrid" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchContainerBackgroundPointerOver}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="Pressed">

                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="StrokeThickness">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchStrokeOffPressed}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOffPressed}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOnPressed}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchStrokeOnPressed}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOffPressed}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOnPressed}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchAreaGrid" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchContainerBackgroundPressed}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="Disabled">

                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchHeaderForegroundDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OffContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchContentForegroundDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OnContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchContentForegroundDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchStrokeOffDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOffDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOnDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchStrokeOnDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOffDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOnDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchAreaGrid" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchContainerBackgroundDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ToggleStates">

                            <VisualStateGroup.Transitions>
                                <VisualTransition x:Name="DraggingToOnTransition"
                                    From="Dragging"
                                    To="On"
                                    GeneratedDuration="0">
                                    <Storyboard>
                                        <!--<RepositionThemeAnimation TargetName="SwitchKnob" FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KnobCurrentToOnOffset}" />-->
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Opacity">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Opacity">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Opacity">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Opacity">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualTransition>
                                <VisualTransition x:Name="DraggingToOffTransition"
                                    From="Dragging"
                                    To="Off"
                                    GeneratedDuration="0">
                                    <Storyboard>
                                        <!--<DoubleAnimation Storyboard.TargetName="KnobTranslateTransform"
                                                         Storyboard.TargetProperty="Angle"
                                                         To="0"
                                                         Duration="0:0:0.2" />-->
                                        <!--<RepositionThemeAnimation TargetName="SwitchKnob" FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KnobCurrentToOffOffset}" />-->
                                    </Storyboard>
                                </VisualTransition>
                                <VisualTransition x:Name="OnToOffTransition"
                                    From="On"
                                    To="Off"
                                    GeneratedDuration="0">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="KnobTranslateTransform"
                                                         Storyboard.TargetProperty="Angle"
                                                         To="0"
                                                         Duration="0:0:2" />
                                        <!--<RepositionThemeAnimation TargetName="SwitchKnob" FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KnobOnToOffOffset}" />-->
                                    </Storyboard>
                                </VisualTransition>
                                <VisualTransition x:Name="OffToOnTransition"
                                    From="Off"
                                    To="On"
                                    GeneratedDuration="0">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="KnobTranslateTransform"
                                                         Storyboard.TargetProperty="Angle"
                                                         To="-90"
                                                         Duration="0:0:2" />

                                        <!--<RepositionThemeAnimation TargetName="SwitchKnob" FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KnobOffToOnOffset}" />-->
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Opacity">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Opacity">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Opacity">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Opacity">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualTransition>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Dragging" />
                            <VisualState x:Name="Off" />

                            <VisualState x:Name="On">

                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="KnobTranslateTransform"
                                        Storyboard.TargetProperty="Angle"
                                        To="90"
                                        Duration="0" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Opacity">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Opacity">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Opacity">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Opacity">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ContentStates">
                            <VisualState x:Name="OffContent">

                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="OffContentPresenter"
                                        Storyboard.TargetProperty="Opacity"
                                        To="1"
                                        Duration="0" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="OffContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <x:Boolean>True</x:Boolean>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="OnContent">

                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="OnContentPresenter"
                                        Storyboard.TargetProperty="Opacity"
                                        To="1"
                                        Duration="0" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="OnContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <x:Boolean>True</x:Boolean>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="10" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="10" />
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="12" MaxWidth="12" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <ContentPresenter x:Name="HeaderContentPresenter"
                        x:DeferLoadStrategy="Lazy"
                        Visibility="Collapsed"
                        Foreground="{ThemeResource ToggleSwitchHeaderForeground}"
                        Grid.ColumnSpan="4"
                        Content="{TemplateBinding Header}"
                        ContentTemplate="{TemplateBinding HeaderTemplate}"
                        IsHitTestVisible="False"
                        AutomationProperties.AccessibilityView="Raw" />
                    <Grid x:Name="SwitchAreaGrid"
                        Grid.Row="1"
                        Grid.RowSpan="3"
                        Grid.ColumnSpan="3"
                        Margin="0,5"
                        Control.IsTemplateFocusTarget="True"
                        Background="{ThemeResource ToggleSwitchContainerBackground}" />
                    <ContentPresenter x:Name="OffContentPresenter"
                        Grid.Row="1"
                        Grid.RowSpan="3"
                        Grid.Column="2"
                        Opacity="0"
                        Foreground="{TemplateBinding Foreground}"
                        IsHitTestVisible="False"
                        Content="{TemplateBinding OffContent}"
                        ContentTemplate="{TemplateBinding OffContentTemplate}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    <ContentPresenter x:Name="OnContentPresenter"
                        Grid.Row="1"
                        Grid.RowSpan="3"
                        Grid.Column="2"
                        Opacity="0"
                        Foreground="{TemplateBinding Foreground}"
                        IsHitTestVisible="False"
                        Content="{TemplateBinding OnContent}"
                        ContentTemplate="{TemplateBinding OnContentTemplate}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    <Rectangle x:Name="OuterBorder"
                        Grid.Row="2"
                        Height="32"
                        Width="32"
                        RadiusX="16"
                        RadiusY="16"
                        Fill="{ThemeResource ToggleSwitchFillOff}"
                        Stroke="{ThemeResource ToggleSwitchStrokeOff}"
                        StrokeThickness="2" />
                    <Rectangle x:Name="SwitchKnobBounds"
                        Grid.Row="2"
                        Height="32"
                        Width="32"
                        RadiusX="16"
                        RadiusY="16"
                        Fill="{ThemeResource ToggleSwitchFillOn}"
                        Stroke="{ThemeResource ToggleSwitchStrokeOn}"
                        StrokeThickness="{ThemeResource ToggleSwitchOnStrokeThickness}"
                        Opacity="0" />
                    <Grid x:Name="SwitchKnob"
                        Grid.Row="2"
                        HorizontalAlignment="Left"
                          RenderTransformOrigin=".5,.5"
                        Width="32"
                        Height="32">
                        <!--<Ellipse x:Name="SwitchKnobOn"
                            Fill="{ThemeResource ToggleSwitchKnobFillOn}"
                            Width="14"
                            Height="14"
                            Opacity="0" />
                        <Rectangle x:Name="PipeKnobOn"
                                   Width="6"
                                   Height="32"
                                   Opacity="1"
                                   RadiusX="2"
                                   RadiusY="2"
                                   Fill="{ThemeResource ToggleSwitchKnobFillOff}" />
                        <Ellipse x:Name="SwitchKnobOff"
                            Fill="{ThemeResource ToggleSwitchKnobFillOff}"
                            Width="14"
                            Height="14" />-->
                        <Path  x:Name="SwitchKnobOn" Opacity="0"  Fill="{ThemeResource ToggleSwitchKnobFillOn}">
                            <Path.Data>
                                <GeometryGroup FillRule="Nonzero">
                                    <EllipseGeometry Center="16,16" RadiusX="7" RadiusY="7" />
                                    <RectangleGeometry Rect="13,0,6,32" />
                                </GeometryGroup>
                            </Path.Data>
                        </Path>
                        <Path  x:Name="SwitchKnobOff" Fill="{ThemeResource ToggleSwitchKnobFillOff}">
                            <Path.Data>
                                <GeometryGroup FillRule="Nonzero">
                                    <EllipseGeometry Center="16,16" RadiusX="7" RadiusY="7" />
                                    <RectangleGeometry Rect="13,0,6,32" />
                                </GeometryGroup>
                            </Path.Data>
                        </Path>
                        <Grid.RenderTransform>
                            <RotateTransform x:Name="KnobTranslateTransform" />
                        </Grid.RenderTransform>
                    </Grid>
                    <Thumb x:Name="SwitchThumb"
                        AutomationProperties.AccessibilityView="Raw"
                        Grid.Row="1"
                        Grid.RowSpan="3"
                        Grid.ColumnSpan="3">
                        <Thumb.Template>
                            <ControlTemplate TargetType="Thumb">
                                <Rectangle Fill="Transparent" />
                            </ControlTemplate>
                        </Thumb.Template>
                    </Thumb>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

从 Off 到 On 状态动画效果很好，但是 On 到 Off 看起来不太好。似乎发生的事情是当我在 On 状态下按下鼠标左键时，首先显示按下状态（而不是 On 的按下状态，显示 Off 的按下状态），然后动画从 On 播放到 Off，看起来不太好。

我试图将 RepositionThemeAnimation 更改为 DoubleAnimation，但失败了。

<RepositionThemeAnimation 
    TargetName="SwitchKnob" 
    FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KnobOffToOnOffset}" />


<DoubleAnimation Storyboard.TargetName="KnobTranslateTransform"
                 Storyboard.TargetProperty="Angle"
                 To="-90"
                 Duration="0:0:2" />

更新

这是目前的样子。如您所见，从关闭到开启的过渡是平滑的，但从关闭到开启却不是这样。

Answer 1

The first transition of Off to On is smooth. However, the On to Off starts with Off, then On to Off transition.

经过大量测试，出现这种情况是因为Pressed视觉状态会先触发，然后才会触发On to Off视觉状态。

我编辑了您的 Pressed 视觉状态，使其看起来更好看：

<VisualState x:Name="Pressed">
    <Storyboard>
          <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnob" Storyboard.TargetProperty="Opacity">
                <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
          </ObjectAnimationUsingKeyFrames>
          <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Opacity">
                <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
          </ObjectAnimationUsingKeyFrames>
     </Storyboard>
</VisualState>

重新设计的 ToggleSwitch 动画无法正常工作

Re-skinned ToggleSwitch animation not working properly

uwp

uwp-xaml

controltemplate