1

我想在 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 并且 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>

我试过的

我向 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>

我试过的第 2 部分

使用 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>
4

1 回答 1

0

这看起来很疯狂，但它确实有效。基本上，当 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>
于 2015-07-24T18:11:04.057 回答