未聚焦时 IsMouseOver 上 TextBox 边框上的 WPF 动画

Question

我正在为我正在开发的 WPF 应用程序中的 TextBox 类型实现自定义样式，并且我想在光标位于 TextBox 上时以及 TextBox 实际获得焦点时实现不同的动画。我的代码当前的工作方式是 IsMouseOver 触发器触发并启动动画，即使 TextBox 已经具有焦点。我不想要这个，我希望 IsMouseOver 动画仅在 TextBox 未聚焦且用户将鼠标悬停在 TextBox 上时播放。这在 XAML 中可行吗？

这是我现有的代码：

<Style TargetType="TextBox">
    <Setter Property="BorderBrush" Value="Gray" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBoxBase}">
                <Border x:Name="PART_Border" 
                        Background="{TemplateBinding Background}"  
                        BorderBrush="{TemplateBinding BorderBrush}" 
                        BorderThickness="{TemplateBinding BorderThickness}" 
                        CornerRadius="4">
                    <ScrollViewer x:Name="PART_ContentHost"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" TargetName="PART_Border" />
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                    </Trigger>
                    <Trigger Property="IsFocused" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Duration="0:0:0.15" Storyboard.TargetName="PART_Border" Storyboard.TargetProperty="BorderBrush.Color" To="#0079CB" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Duration="0:0:0.15" Storyboard.TargetName="PART_Border" Storyboard.TargetProperty="BorderBrush.Color" To="#CBCBCB" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Duration="0:0:0.15" Storyboard.TargetName="PART_Border" Storyboard.TargetProperty="BorderBrush.Color" To="#5A5A5A" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Duration="0:0:0.15" Storyboard.TargetName="PART_Border" Storyboard.TargetProperty="BorderBrush.Color" To="#CBCBCB" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>
                    <Trigger Property="Validation.HasError" Value="True">
                        <Setter Property="FocusManager.FocusedElement" Value="{Binding RelativeSource={RelativeSource Self}}"/>
                        <Setter Property="BorderThickness" Value="0" />
                    </Trigger>
                    <Trigger Property="Width" Value="Auto">
                        <Setter Property="MinWidth" Value="100"/>
                    </Trigger>
                    <Trigger Property="Height" Value="Auto">
                        <Setter Property="MinHeight" Value="20"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

谢谢！

Answer 1

I want the IsMouseOver animation to play only when the TextBox is not focused and when the user hovers over the TextBox.

_{（强调我的）}

这实际上只是对您现有代码的一个小调整。您需要使用 MultiTrigger 而不是简单 Trigger 来占 IsMouseOver 和的焦点.根据您的具体要求，您可能希望对第二个条件使用 IsKeyboardFocusWithin、IsKeyboardFocused 或 IsFocused。

<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="IsMouseOver" Value="True"/>
        <Condition Property="IsKeyboardFocusWithin" Value="False"/>
    </MultiTrigger.Conditions>
    <MultiTrigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Duration="0:0:0.15" Storyboard.TargetName="PART_Border" 
                  Storyboard.TargetProperty="BorderBrush.Color" To="#5A5A5A" />
            </Storyboard>
        </BeginStoryboard>
    </MultiTrigger.EnterActions>
    <MultiTrigger.ExitActions>
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Duration="0:0:0.15" Storyboard.TargetName="PART_Border" 
                  Storyboard.TargetProperty="BorderBrush.Color" To="#CBCBCB" />
            </Storyboard>
        </BeginStoryboard>
    </MultiTrigger.ExitActions>
</MultiTrigger>

未聚焦时 IsMouseOver 上 TextBox 边框上的 WPF 动画

WPF Animation on TextBox Border On IsMouseOver when Not Focused

wpf

xaml

wpf-controls