具有动画内容的WPF切换按钮

问题描述

我想创建一个切换按钮，该按钮在未选中时包含两个灰色的齿轮，在按下时包含两个红色的旋转齿轮。我创建了一个模板，其中包含用于检查 IsChecked 属性并相应设置按钮内容的触发器。

似乎工作正常，但是一旦我在页面上添加了两个按钮，第一个按钮似乎是空白的（没有图像）。似乎只能同时打开或关闭一个按钮。

我在做什么错了？

"2020-08-20,2020-08-19,2020-08-18,2020-08-17,2020-08-16,2020-08-15,2020-08-14,2020-08-13,2020-08-12,2020-08-11,2020-08-10,2020-08-09,2020-08-08,2020-08-07,2020-08-06,2020-08-05,2020-08-04,2020-08-03,2020-08-02,2020-08-01,2020-07-31,2020-07-30,2020-07-29,2020-07-28,2020-07-27,2020-07-26,2020-07-25,2020-07-24,2020-07-23,2020-07-22"

解决方法

发生这种情况的原因是触发器中的图像被冻结并且不共享，因此只有一个实例。

由于这是一个非常静态的设计，因此另一种方法是将ContentPresenter替换为实际图像，然后仅更改其源并触发IsChecked上的动画。

这是有效的XAML：

<SolidColorBrush x:Key="CogwheelButton.Border.Color" Color="Transparent" />
<SolidColorBrush x:Key="CogwheelButton.Background.Color" Color="Transparent" />

<Style x:Key="CogwheelButton" TargetType="{x:Type ToggleButton}">
    <Setter Property="Background" Value="{StaticResource CogwheelButton.Background.Color}" />
    <Setter Property="BorderBrush" Value="{StaticResource CogwheelButton.Border.Color}" />
    <Setter Property="Padding" Value="1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Border x:Name="border"
                    Background="{TemplateBinding Background}"
                    BorderBrush="Transparent"
                    BorderThickness="0">
                    <Grid
                        Width="29"
                        Height="35"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center">
                        <Image x:Name="Cog1"
                            Width="20"
                            Height="20"
                            Margin="0"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Top"
                            RenderTransformOrigin="0.5,0.5"
                            Source="/Resources/CogwheelGray.png"
                            Stretch="Uniform">
                            <Image.RenderTransform>
                                <RotateTransform Angle="0" />
                            </Image.RenderTransform>
                        </Image>
                        <Image x:Name="Cog2"
                            Width="20"
                            Height="20"
                            Margin="9,15,0"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Top"
                            RenderTransformOrigin="0.5,0.5"
                            Source="/Resources/CogwheelGray.png"
                            Stretch="Uniform">
                            <Image.RenderTransform>
                                <RotateTransform Angle="0" />
                            </Image.RenderTransform>
                        </Image>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Control.Visibility" Value="Hidden" />
                    </Trigger>

                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="Cog1" Property="Source" Value="/Resources/CogwheelRed.png" />
                        <Setter TargetName="Cog2" Property="Source" Value="/Resources/CogwheelRed.png" />
                        <Trigger.EnterActions>
                            <BeginStoryboard x:Name="CogAnimation">
                                <Storyboard>
                                    <DoubleAnimation
                                        AutoReverse="False"
                                        RepeatBehavior="Forever"
                                        Storyboard.TargetName="Cog1"
                                        Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                                        From="0"
                                        To="360"
                                        Duration="0:0:3" />
                                    <DoubleAnimation
                                        AutoReverse="False"
                                        RepeatBehavior="Forever"
                                        Storyboard.TargetName="Cog2"
                                        Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                                        From="0"
                                        To="-360"
                                        Duration="0:0:3" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <StopStoryboard BeginStoryboardName="CogAnimation" />
                        </Trigger.ExitActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>