Question

我有两个动画来控制TextBox边框的颜色。一个动画将颜色从默认的黄色更改为蓝色，一个动画将颜色更改回默认值。这些动画以IsFocused上的触发器开始。这很好。

现在我希望IsMouseOver也可以触发相同的动画。我希望的行为是TextBox的边框如果有焦点或者鼠标悬停在它上面应该是蓝色，否则它应该是黄色。并且各州之间应该有一个动画过渡。

如上所述，当TextBox获得或失去焦点时，使用动画更改颜色不是问题。当鼠标在TextBox上移动时，更改颜色也没有问题。问题是同时出现。然后就是冲突......

我怎样才能拥有这两种动画？

这里有一些带有动画的代码，但由于冲突，这不能正常工作。如果我将鼠标悬停在TextBox上，动画永远不会再次在IsFocused上运行......

<TextBox Width="200" Height="140" BorderBrush="Yellow" BorderThickness="4">
        <TextBox.Style>
            <Style TargetType="TextBox">
                <Style.Resources>
                    <Storyboard x:Key="RecievedFocusOrMouseOverAnimation">
                        <ColorAnimation
                            Storyboard.TargetProperty="BorderBrush.(SolidColorBrush.Color)" 
                            To="Blue" 
                            Duration="0:0:0.2" />
                    </Storyboard>
                    <Storyboard x:Key="LostFocusOrMouseOutAnimation">
                        <ColorAnimation
                            Storyboard.TargetProperty="BorderBrush.(SolidColorBrush.Color)" 
                            To="Yellow" 
                            Duration="0:0:0.2" />
                    </Storyboard>
                </Style.Resources>
                <Style.Triggers>
                    <Trigger Property="IsFocused" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard Name="IsFocusedTrueBeginStoryBoard" Storyboard="{StaticResource RecievedFocusOrMouseOverAnimation}" />
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard Name="IsFocusedFalseBeginStoryBoard" Storyboard="{StaticResource LostFocusOrMouseOutAnimation}" />
                        </Trigger.ExitActions>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard Name="IsMouseOverTrueBeginStoryboard" Storyboard="{StaticResource RecievedFocusOrMouseOverAnimation}" />
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard Name="IsMouseOverFalseBeginStoryboard" Storyboard="{StaticResource LostFocusOrMouseOutAnimation}" />
                        </Trigger.ExitActions>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </TextBox.Style>
    </TextBox>

Answer 1

我建议您尝试使用带有OR条件的MultiDataTrigger，如here所述。你的代码应该是这样的：

<MultiDataTrigger>
    <MultiDataTrigger.Conditions>
        <Condition Value="True">
            <Condition.Binding>
                <MultiBinding Converter="{StaticResource BooleanOr}">
                    <Binding Path="IsMouseOver" RelativeSource="{RelativeSource self}" />
                    <Binding Path="IsFocused" RelativeSource="{RelativeSource self}" />
                </MultiBinding>
            </Condition.Binding>
        </Condition>
    </MultiDataTrigger.Conditions>
    <MultiDataTrigger.EnterActions>
         <BeginStoryboard Name="IsFocusedTrueBeginStoryBoard" Storyboard="{StaticResource RecievedFocusOrMouseOverAnimation}" />
    </MultiDataTrigger.EnterActions>
    <MultiDataTrigger.ExitActions>
        <BeginStoryboard Name="IsFocusedFalseBeginStoryBoard" Storyboard="{StaticResource LostFocusOrMouseOutAnimation}" />
    </MultiDataTrigger.ExitActions>
</MultiDataTrigger>

BooleanOr是一个IMultiValueConverter，用于计算其所有参数之间的OR（您可以在链接中附加到文章的代码中找到它）。

Answer 2

您似乎需要在开始新故事板之前停止潜在的故事板。试试这个

<Trigger Property="IsFocused" Value="True">
    <Trigger.EnterActions>
        <StopStoryboard BeginStoryboardName="IsMouseOverTrueBeginStoryboard"/>
        <StopStoryboard BeginStoryboardName="IsMouseOverFalseBeginStoryboard"/>
        <BeginStoryboard Name="IsFocusedTrueBeginStoryBoard" Storyboard="{StaticResource RecievedFocusOrMouseOverAnimation}" />
    </Trigger.EnterActions>
    <Trigger.ExitActions>
        <BeginStoryboard Name="IsFocusedFalseBeginStoryBoard" Storyboard="{StaticResource LostFocusOrMouseOutAnimation}" />
    </Trigger.ExitActions>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
    <Trigger.EnterActions>
        <StopStoryboard BeginStoryboardName="IsFocusedTrueBeginStoryBoard"/>
        <StopStoryboard BeginStoryboardName="IsFocusedFalseBeginStoryBoard"/>
        <BeginStoryboard Name="IsMouseOverTrueBeginStoryboard" Storyboard="{StaticResource RecievedFocusOrMouseOverAnimation}" />
    </Trigger.EnterActions>
    <Trigger.ExitActions>
        <BeginStoryboard Name="IsMouseOverFalseBeginStoryboard" Storyboard="{StaticResource LostFocusOrMouseOutAnimation}" />
    </Trigger.ExitActions>
</Trigger>

WPF冲突动画

2 个答案: