WPF Конфликтующие анимации

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

Я бы посоветовал вам попробовать использовать MultiDataTrigger с условием ИЛИ, как описано здесь .Ваш код должен выглядеть примерно так:

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