Animation WPF de la bordure d'une boîte de texte lors de l'utilisation de IsMouseOver lorsqu'elle n'est pas centrée.

Question

Je suis en train d'implémenter des styles personnalisés pour le type TextBox dans une application WPF sur laquelle je travaille, et je veux implémenter des animations différentes pour le moment où le curseur est au-dessus du TextBox, et quand le TextBox est effectivement focalisé. Le fonctionnement actuel de mon code est le suivant IsMouseOver se déclenche et démarre l'animation même si la TextBox a déjà le focus. Je ne veux pas cela, je veux que le IsMouseOver pour que l'animation soit jouée uniquement lorsque le champ de texte n'est pas focalisé et lorsque l'utilisateur le survole. Est-ce possible en XAML ?

Voici mon code existant :

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

Gracias.

Answer 1

Je veux le IsMouseOver animation à jouer uniquement lorsque la TextBox n'est pas focalisée y lorsque l'utilisateur survole la TextBox.

_{(C'est moi qui souligne)}

Il s'agit en fait d'un petit ajustement de votre code existant. Vous devez utiliser un MultiTrigger au lieu de la simple Trigger pour tenir compte de IsMouseOver y le Focus. En fonction de vos besoins exacts, vous pouvez utiliser les éléments suivants IsKeyboardFocusWithin , IsKeyboardFocused ou IsFocused pour la deuxième condition.

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