将自定义颜色添加到 ToggleButton IsChecked = false

Question

所以我有这样的风格：

<Style x:Key="AnimatedSwitch" TargetType="{x:Type ToggleButton}">
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="Background" Value="Crimson" />
            <Setter Property="BorderBrush" Value="#EAEAEB" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Viewbox Stretch="Uniform">
                            <Canvas Name="Layer_1" Width="20" Height="20" Canvas.Left="10" Canvas.Top="0">
                                <Ellipse  Canvas.Left="0" Width="20" Height="20" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0.5"/>
                                <Ellipse  Canvas.Left="15" Width="20" Height="20" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0.5"/>
                                <Border Canvas.Left="10" Width="15" Height="20" Name="rect416927" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0.5,0,0.5"/>
                                <Ellipse x:Name="ellipse"  Canvas.Left="0" Width="20" Height="20" Fill="White" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0.3">
                                    <Ellipse.RenderTransform>
                                        <TranslateTransform X="0" Y="0" />
                                    </Ellipse.RenderTransform>
                                    <Ellipse.BitmapEffect>
                                        <DropShadowBitmapEffect Softness="0.1" ShadowDepth="0.7" Direction="270" Color="#BBBBBB"/>
                                    </Ellipse.BitmapEffect>
                                </Ellipse>
                            </Canvas>
                        </Viewbox>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True" >
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetProperty="Background.Color" To="LightSeaGreen" Duration="0:0:0.2" />
                                            <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="LightSeaGreen" Duration="0:0:0.2" />
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ellipse">
                                                <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="15" KeySpline="0, 1, 0.6, 1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetProperty="Background.Color" To="#FAFAFB" Duration="0:0:0.2" />
                                            <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="#FAFAFB" Duration="0:0:0.2" />
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ellipse">
                                                <SplineDoubleKeyFrame KeyTime="0" Value="15"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0" KeySpline="0, 0.5, 0.5, 1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

我在 IsChecked = True 时更改了颜色（颜色 LightSeaGreen），我将 IsChecked = False 的颜色复制为 Red 颜色：

<Trigger Property="IsChecked" Value="False" >
    <Trigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Storyboard.TargetProperty="Background.Color" To="Red" Duration="0:0:0.2" />
                <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="Red" Duration="0:0:0.2" />
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ellipse">
                    <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                    <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="15" KeySpline="0, 1, 0.6, 1"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
    <Trigger.ExitActions>
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Storyboard.TargetProperty="Background.Color" To="#FAFAFB" Duration="0:0:0.2" />
                <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="#FAFAFB" Duration="0:0:0.2" />
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ellipse">
                    <SplineDoubleKeyFrame KeyTime="0" Value="15"/>
                    <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0" KeySpline="0, 0.5, 0.5, 1"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.ExitActions>
</Trigger>

所以我的问题是，在我的 ToggleButton 是 checked 之后，它变成 Red 而不是 LightSeaGreen 并且当未选中时它变成 White 而不是Red。只有在添加这个 IsChecked = False

之后才会发生这种情况

Answer 1

你的问题是这些行：

<ColorAnimation Storyboard.TargetProperty="Background.Color" To="#FAFAFB" Duration="0:0:0.2" />
<ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="#FAFAFB" Duration="0:0:0.2" />

您必须在 ExitActions 中再次将 To 设置为 Crimson，它应该可以正常工作

将自定义颜色添加到 ToggleButton IsChecked = false

Add custom color to ToggleButton IsChecked = false

wpf

xaml

togglebutton