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

时间:2017-08-22 19:38:20

标签: wpf xaml wpf-controls

我正在为我正在处理的WPF应用程序中的TextBox类型实现自定义样式,并且我希望在光标位于TextBox上时以及当TextBox实际聚焦时实现不同的动画。我的代码当前是如何工作的,即使TextBox已经有焦点,IsMouseOver触发器也会触发并启动动画。我不想要这个,我希望只有当TextBox没有聚焦时以及用户将鼠标悬停在TextBox上时才能播放IsMouseOver动画。这在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>

谢谢!

1 个答案:

答案 0 :(得分:1)

  

我希望IsMouseOver动画仅在用户将鼠标悬停在TextBox上时未聚焦时播放。

(强调我的)

这实际上只是对现有代码的一个小调整。您需要使用MultiTrigger代替简单 Trigger来考虑IsMouseOver 焦点。根据您的具体要求,您可能希望使用IsKeyboardFocusWithinIsKeyboardFocusedIsFocused作为第二个条件。

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