Триггер TextBox IsMouseOver работает только до запуска триггера IsFocused элемента управления

Question

Проблема и намерения

Я пытаюсь создать стиль TextBox с тенью.Непрозрачность тени должна немного увеличиться при наведении курсора мыши, а затем еще больше при фокусировке TextBox.

В настоящее время в стиле TextBox настроены два триггера: триггер IsMouseOver иIsFocused триггер.Оба они прекрасно работают независимо друг от друга;однако, когда они соединены вместе, возникают некоторые проблемы.IsMouseOver работает только до срабатывания триггера IsFocused.После этого IsMouseOver больше не работает.

Код

<Style TargetType="TextBox">
    <Style.Resources>
        <Storyboard x:Key="ShowShadow">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(Effect).Opacity">
                <SplineDoubleKeyFrame KeyTime="0:0:0.1" Value="0.5"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="HideShadow">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(Effect).Opacity">
                <SplineDoubleKeyFrame KeyTime="0:0:0.1" Value="0.3"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="MaxShadow">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(Effect).Opacity">
                <SplineDoubleKeyFrame KeyTime="0:0:0.1" Value="0.7"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Style.Resources>

    <Setter Property="Effect">
        <Setter.Value>
            <DropShadowEffect ShadowDepth="1" BlurRadius="6" Opacity="0.3"></DropShadowEffect>
        </Setter.Value>
    </Setter>

    <!-- other styles such as font, color etc removed -->

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Border Background="{TemplateBinding Background}" x:Name="Bd" BorderThickness="0" CornerRadius="4" BorderBrush="{StaticResource BorderColorBrush}">
                    <ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Auto"  x:Name="PART_ContentHost" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard
                    Storyboard="{StaticResource ShowShadow}"/>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard
                    Storyboard="{StaticResource HideShadow}"/>
            </Trigger.ExitActions>
        </Trigger>

        <Trigger Property="IsFocused" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard
                    Storyboard="{StaticResource MaxShadow}"/>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard
                    Storyboard="{StaticResource HideShadow}"/>
            </Trigger.ExitActions>
        </Trigger>

    </Style.Triggers>

</Style>

Ожидаемое и фактическое поведение

Ожидаемое

1. Пользователь наводит курсор наTextBox и непрозрачность тени падают немного к правильному значению.
2. Пользователь нажимает на TextBox, чтобы ввести его, и непрозрачность тени еще больше увеличивается до правильного значения.
3. Пользовательщелкает в другом месте и TextBox теряет фокус.Непрозрачность возвращается к исходному значению.
4. Пользователь наводит курсор на TextBox, и непрозрачность тени слегка увеличивается до правильного значения.
5. Пользователь нажимает на TextBox, чтобы ввести его иНепрозрачность тени уменьшается еще больше до правильного значения.

Actual

1. Пользователь наводит курсор на TextBox, и непрозрачность тени слегка увеличивается до правильного значения.
2. Пользователь нажимает на TextBox, чтобы ввести его, и непрозрачность тени еще больше увеличивается до правильного значения.
3. Пользователь щелкает в другом месте, и TextBox теряет фокус.Непрозрачность возвращается к исходному значению.
4. Пользователь снова наводит курсор на TextBox - ничего не происходит.
5. Пользователь нажимает на TextBox - непрозрачность увеличивается до правильногозначение.

То, что я пробовал

• Использование триггера IsKeyboardFocused вместо IsFocused
• Замена порядка двух триггеров
• Thisфактически создало больше проблем - триггер IsFocused вообще не работал.

Видео проблемы

https://youtu.be/LT7fWA6uRLo

Обратите внимание, что я сделалпоэтому при нажатии на основной Window он будет фокусироваться на основном Grid.Вот так TextBox теряет фокус, когда я нажимаю на пустое место.

Answer 1

Существует одна проблема, присущая вашему дизайну: если TextBox сфокусирован, а мышь отодвинута, непрозрачность тени исчезнет.

Кроме того, попробуйте следующее:

<Style.Triggers>
    <EventTrigger RoutedEvent="TextBox.MouseEnter">
        <EventTrigger.Actions>
            <BeginStoryboard Storyboard="{StaticResource ShowShadow}"/>
        </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="TextBox.MouseLeave">
        <EventTrigger.Actions>
            <BeginStoryboard Storyboard="{StaticResource HideShadow}"/>
        </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="TextBox.GotFocus">
        <EventTrigger.Actions>
            <BeginStoryboard Storyboard="{StaticResource MaxShadow}"/>
        </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="TextBox.LostFocus">
        <EventTrigger.Actions>
            <BeginStoryboard Storyboard="{StaticResource HideShadow}"/>
        </EventTrigger.Actions>
    </EventTrigger>
</Style.Triggers>