代码之家  ›  专栏  ›  技术社区  ›  J-man

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

  •  2
  • J-man  · 技术社区  · 7 年前

    我正在为正在开发的WPF应用程序中的文本框类型实现自定义样式,并且我希望在光标位于文本框上方以及文本框实际聚焦时实现不同的动画。我的代码目前的工作方式是 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 回复  |  直到 7 年前
        1
  •  1
  •   Manfred Radlwimmer Michael Canan    7 年前

    我想要 IsMouseOver 当用户将鼠标悬停在文本框上时。

    (强调矿山)

    实际上,这只是对现有代码的一个小调整。你需要使用 MultiTrigger 而不是 易于理解的 Trigger 说明 重点。根据您的具体要求,您可能希望使用 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>