切换按钮是鼠标悬停动画

Question

我想添加一个淡出动画，当ToggleButton IsChecked=false和IsMouseOver停用时。

我有一个自定义控件模板的切换按钮。

下面的触发器已经设置好并且工作得很好。

• 当IsChecked=true时显示背景不透明度=1

• 当IsMouseOver=true时显示背景不透明度=1

              <ControlTemplate.Triggers>
                  <Trigger Property="IsMouseOver" Value="True">
                      <Setter Property="Opacity" TargetName="innerRectangle" Value="1"/>
                  </Trigger>
                  <Trigger Property="IsChecked" Value="True">
                      <Setter Property="Opacity" TargetName="innerRectangle" Value="1"/> 
                  </Trigger>
              </ControlTemplate.Triggers>
  

然而，现在我想添加一个淡出动画，当ToggleButton是NOT检查和IsMouseOver是取消激活。

我已经创建了一个故事板动画，它在100毫秒内将不透明度值从1更改为0:

<Storyboard x:Key="OnMouseOut">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="innerRectangle">
        <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
      </DoubleAnimationUsingKeyFrames></Storyboard>

What I've try

我在IsMouseOver触发器中添加了EnterAction和ExitAction，并执行了预期的效果。但是，如果选中了ToggleButton，我不希望动画运行。

   <Trigger Property="IsMouseOver" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard x:Name="OnMouseIn_BeginStoryboard" Storyboard="{StaticResource OnMouseIn}"/>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard Storyboard="{StaticResource OnMouseOut}"/>
                                </Trigger.ExitActions>
                                <Setter Property="Opacity" TargetName="innerRectangle" Value="1"/>
                            </Trigger>

我尝试了什么第二部分

使用MultiTrigger不能解决这个问题。

 <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True"/>
                                    <Condition Property="IsChecked" Value="False"/>
                                </MultiTrigger.Conditions>
                                <MultiTrigger.EnterActions>
                                    <BeginStoryboard x:Name="OnMouseIn_BeginStoryboard" Storyboard="{StaticResource OnMouseIn}"/>
                                </MultiTrigger.EnterActions>
                                <MultiTrigger.ExitActions>
                                    <BeginStoryboard Storyboard="{StaticResource OnMouseOut}"/>
                                </MultiTrigger.ExitActions>
                                <Setter Property="Opacity" TargetName="innerRectangle" Value="1"/>
                            </MultiTrigger>

Answer 1

这看起来很疯狂，但是很有效。基本上，当IsChecked退出时，我用不同的名称创建了一个相同的故事板。在悬停时，我取消了这个次要的故事板。

 <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True"/>
                                <Condition Property="IsChecked" Value="False"/>
                            </MultiTrigger.Conditions>
                            <MultiTrigger.EnterActions>
                                <StopStoryboard BeginStoryboardName="OnMouseOut_BeginStoryboard2"/>
                                <BeginStoryboard x:Name="OnMouseIn_BeginStoryboard" Storyboard="{StaticResource OnMouseIn}"/>
                            </MultiTrigger.EnterActions>
                            <MultiTrigger.ExitActions>
                                <BeginStoryboard x:Name="OnMouseOut_BeginStoryboard" Storyboard="{StaticResource OnMouseOut}"/>
                            </MultiTrigger.ExitActions>
                            <Setter Property="Opacity" TargetName="innerRectangle" Value="1"/>
                        </MultiTrigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Trigger.ExitActions>
                                <StopStoryboard BeginStoryboardName="OnMouseOut_BeginStoryboard"/>
                                <StopStoryboard BeginStoryboardName="OnMouseIn_BeginStoryboard"/>
                                <BeginStoryboard x:Name="OnMouseOut_BeginStoryboard2" Storyboard="{StaticResource OnMouseOut}"/>
                            </Trigger.ExitActions>
                            <Trigger.EnterActions>
                                <StopStoryboard BeginStoryboardName="OnMouseOut_BeginStoryboard"/>
                                <StopStoryboard BeginStoryboardName="OnMouseIn_BeginStoryboard"/>
                            </Trigger.EnterActions>
                            <Setter Property="Opacity" TargetName="innerRectangle" Value="1"/>
                        </Trigger>
                    </ControlTemplate.Triggers>