如何取消切换窗口时ToggleButton的动画效果

我在SettingsWindow中使用以下ToggleButton样式。当切换到SettingsWindow时，所有处于ON状态的ToggleButton都会播放动画，我希望它们直接完全处于启用状态，无需显示该动画。请问如何实现？

原样式代码：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style BasedOn="{StaticResource {x:Type ToggleButton}}" TargetType="ToggleButton" x:Key="ToggleButton">
        <Style.Setters>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <StackPanel Orientation="Horizontal" Grid.Column="0" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0,0,0,10">
                                <Border x:Name="border" Cursor="Hand" CornerRadius="12.5" Width="50" Height="25">
                                    <Border.Background>
                                        <SolidColorBrush Color="#363031" x:Name="backgroundbrush"/>
                                    </Border.Background>
                                    <Border CornerRadius="12.5">
                                        <Border.Background>
                                            <SolidColorBrush Color="#000000" Opacity="0" x:Name="hoverbrush"/>
                                        </Border.Background>
                                        <Ellipse Width="17.5" Height="17.5" Fill="#ffffff" Margin="-25,0,0,0" x:Name="ellipse"/>
                                    </Border>
                                </Border>
                            </StackPanel>
                            <Label FontFamily="Livvic" Content="{TemplateBinding Content}" Foreground="White" FontSize="20" FontWeight="Bold" Grid.Column="1" Margin="5,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center" Padding="0,0,0,0">
                                <Label.Effect>
                                    <DropShadowEffect BlurRadius="4" ShadowDepth="4" Opacity="0.25"/>
                                </Label.Effect>
                            </Label>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsChecked" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation To="#d151ff" Duration="0:0:0.2" Storyboard.TargetName="backgroundbrush" Storyboard.TargetProperty="Color"/>
                                            <ThicknessAnimation To="25,0,0,0" Duration="0:0:0.2" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Margin"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation To="#363031" Duration="0:0:0.2" Storyboard.TargetName="backgroundbrush" Storyboard.TargetProperty="Color"/>
                                            <ThicknessAnimation To="-25,0,0,0" Duration="0:0:0.2" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Margin"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style.Setters>
    </Style>
</ResourceDictionary>

解决方案 #

问题出在窗口加载时，IsChecked从初始值切换到绑定的True状态会触发Trigger.EnterActions的动画。要实现初始化直接显示ON状态、仅用户交互时播放动画，需要修改样式的触发逻辑：

1. 在IsChecked=True的Trigger中添加直接设置最终状态的Setter，确保控件初始化时直接应用ON样式，不触发动画。
2. 将原有的动画逻辑移到EventTrigger中，仅在用户点击按钮时播放切换动画。

修改后的完整样式代码：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style BasedOn="{StaticResource {x:Type ToggleButton}}" TargetType="ToggleButton" x:Key="ToggleButton">
        <Style.Setters>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <StackPanel Orientation="Horizontal" Grid.Column="0" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0,0,0,10">
                                <Border x:Name="border" Cursor="Hand" CornerRadius="12.5" Width="50" Height="25">
                                    <Border.Background>
                                        <SolidColorBrush Color="#363031" x:Name="backgroundbrush"/>
                                    </Border.Background>
                                    <Border CornerRadius="12.5">
                                        <Border.Background>
                                            <SolidColorBrush Color="#000000" Opacity="0" x:Name="hoverbrush"/>
                                        </Border.Background>
                                        <Ellipse Width="17.5" Height="17.5" Fill="#ffffff" Margin="-25,0,0,0" x:Name="ellipse"/>
                                    </Border>
                                </Border>
                            </StackPanel>
                            <Label FontFamily="Livvic" Content="{TemplateBinding Content}" Foreground="White" FontSize="20" FontWeight="Bold" Grid.Column="1" Margin="5,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center" Padding="0,0,0,0">
                                <Label.Effect>
                                    <DropShadowEffect BlurRadius="4" ShadowDepth="4" Opacity="0.25"/>
                                </Label.Effect>
                            </Label>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <!-- 初始化直接设置IsChecked=True的最终状态 -->
                            <Trigger Property="ToggleButton.IsChecked" Value="True">
                                <Setter TargetName="backgroundbrush" Property="Color" Value="#d151ff"/>
                                <Setter TargetName="ellipse" Property="Margin" Value="25,0,0,0"/>
                            </Trigger>

                            <!-- 用户点击时播放切换动画 -->
                            <EventTrigger RoutedEvent="PreviewMouseLeftButtonDown">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <!-- 切换状态的动画 -->
                                        <ColorAnimation x:Name="StateColorAnimation"
                                                        Storyboard.TargetName="backgroundbrush"
                                                        Storyboard.TargetProperty="Color"
                                                        Duration="0:0:0.2"
                                                        FillBehavior="HoldEnd"/>
                                        <ThicknessAnimation x:Name="StateMarginAnimation"
                                                            Storyboard.TargetName="ellipse"
                                                            Storyboard.TargetProperty="Margin"
                                                            Duration="0:0:0.2"
                                                            FillBehavior="HoldEnd"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>

                            <!-- 根据当前状态设置动画目标值 -->
                            <Trigger Property="ToggleButton.IsChecked" Value="True">
                                <Setter TargetName="StateColorAnimation" Property="To" Value="#363031"/>
                                <Setter TargetName="StateMarginAnimation" Property="To" Value="-25,0,0,0"/>
                            </Trigger>
                            <Trigger Property="ToggleButton.IsChecked" Value="False">
                                <Setter TargetName="StateColorAnimation" Property="To" Value="#d151ff"/>
                                <Setter TargetName="StateMarginAnimation" Property="To" Value="25,0,0,0"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style.Setters>
    </Style>
</ResourceDictionary>

逻辑说明 #

• 第一个Trigger直接设置IsChecked=True时的背景色和椭圆位置，控件初始化时会直接应用这个状态，不会播放动画。
• EventTrigger监听鼠标点击事件，只有用户点击按钮时才会启动状态切换动画。
• 后续两个Trigger根据当前IsChecked状态设置动画的目标值，实现点击时在ON/OFF状态间平滑切换。

内容的提问来源于stack exchange，提问作者user834874378