WPF自定义ClearableTextBox：跨组件鼠标悬停触发样式动画问题

核心问题分析 #

你遇到的两个关键问题：

1. 子元素（TextBox、清除按钮）的鼠标事件拦截，导致仅悬停Rectangle本身时才触发动画
2. Style内的Storyboard无法指定TargetName，限制了跨元素的动画触发

方案一：使用ControlTemplate实现纯XAML解决方案 #

这是最符合WPF设计思想的方案，将所有元素纳入UserControl的ControlTemplate，通过模板触发器监听整个控件的IsMouseOver状态，直接对Rectangle做动画。

<UserControl x:Class="YourNamespace.ClearableTextBox"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <UserControl.Template>
        <ControlTemplate TargetType="UserControl">
            <Grid>
                <!-- 背景Rectangle：放在布局最底层 -->
                <Rectangle x:Name="BackgroundRect"
                           RadiusX="4" RadiusY="4">
                    <Rectangle.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                            <GradientStop Color="#F0F0F0" Offset="0"/>
                            <GradientStop Color="#E0E0E0" Offset="1"/>
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                    <Rectangle.RenderTransform>
                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
                
                <!-- TextBox：透明背景保证鼠标事件传递 -->
                <TextBox x:Name="InputTextBox"
                         Margin="8,4"
                         Background="Transparent"
                         BorderThickness="0"/>
                
                <!-- 清除按钮：透明背景避免拦截鼠标事件 -->
                <Button x:Name="ClearBtn"
                        Margin="4"
                        HorizontalAlignment="Right"
                        VerticalAlignment="Center"
                        Width="20" Height="20"
                        Content="X">
                    <Button.Style>
                        <Style TargetType="Button">
                            <Setter Property="Background" Value="Transparent"/>
                            <Setter Property="BorderThickness" Value="0"/>
                        </Style>
                    </Button.Style>
                </Button>
            </Grid>
            
            <ControlTemplate.Triggers>
                <!-- 监听整个UserControl的鼠标悬停状态 -->
                <Trigger Property="IsMouseOver" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <!-- 渐变色彩动画 -->
                                <ColorAnimation Storyboard.TargetName="BackgroundRect"
                                                Storyboard.TargetProperty="Fill.GradientStops[0].Color"
                                                To="#E5F3FF" Duration="0:0:0.2"/>
                                <ColorAnimation Storyboard.TargetName="BackgroundRect"
                                                Storyboard.TargetProperty="Fill.GradientStops[1].Color"
                                                To="#C8E6FF" Duration="0:0:0.2"/>
                                <!-- 缩放动画 -->
                                <DoubleAnimation Storyboard.TargetName="BackgroundRect"
                                                 Storyboard.TargetProperty="RenderTransform.ScaleX"
                                                 To="1.02" Duration="0:0:0.2"/>
                                <DoubleAnimation Storyboard.TargetName="BackgroundRect"
                                                 Storyboard.TargetProperty="RenderTransform.ScaleY"
                                                 To="1.02" Duration="0:0:0.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="BackgroundRect"
                                                Storyboard.TargetProperty="Fill.GradientStops[0].Color"
                                                To="#F0F0F0" Duration="0:0:0.2"/>
                                <ColorAnimation Storyboard.TargetName="BackgroundRect"
                                                Storyboard.TargetProperty="Fill.GradientStops[1].Color"
                                                To="#E0E0E0" Duration="0:0:0.2"/>
                                <DoubleAnimation Storyboard.TargetName="BackgroundRect"
                                                 Storyboard.TargetProperty="RenderTransform.ScaleX"
                                                 To="1" Duration="0:0:0.2"/>
                                <DoubleAnimation Storyboard.TargetName="BackgroundRect"
                                                 Storyboard.TargetProperty="RenderTransform.ScaleY"
                                                 To="1" Duration="0:0:0.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </UserControl.Template>
</UserControl>

关键细节

• 将TextBox和按钮的Background设为Transparent，确保鼠标悬停时UserControl的IsMouseOver状态能正确触发
• ControlTemplate内的触发器允许使用TargetName，完美避开Style中Storyboard的限制
• Rectangle放在布局最底层，保证不会被其他元素遮挡

方案二：后台事件触发动画（适合复杂逻辑场景） #

如果不想重构现有布局，可以通过监听UserControl的MouseEnter和MouseLeave事件，手动触发预定义的Storyboard。

XAML部分

<UserControl x:Class="YourNamespace.ClearableTextBox"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <UserControl.Resources>
        <!-- 悬停进入动画 -->
        <Storyboard x:Key="HoverEnterStoryboard">
            <ColorAnimation Storyboard.TargetProperty="Fill.GradientStops[0].Color"
                            To="#E5F3FF" Duration="0:0:0.2"/>
            <ColorAnimation Storyboard.TargetProperty="Fill.GradientStops[1].Color"
                            To="#C8E6FF" Duration="0:0:0.2"/>
            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
                             To="1.02" Duration="0:0:0.2"/>
            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY"
                             To="1.02" Duration="0:0:0.2"/>
        </Storyboard>
        <!-- 悬停退出动画 -->
        <Storyboard x:Key="HoverExitStoryboard">
            <ColorAnimation Storyboard.TargetProperty="Fill.GradientStops[0].Color"
                            To="#F0F0F0" Duration="0:0:0.2"/>
            <ColorAnimation Storyboard.TargetProperty="Fill.GradientStops[1].Color"
                            To="#E0E0E0" Duration="0:0:0.2"/>
            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
                             To="1" Duration="0:0:0.2"/>
            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY"
                             To="1" Duration="0:0:0.2"/>
        </Storyboard>
    </UserControl.Resources>

    <Grid>
        <Rectangle x:Name="BackgroundRect"
                   RadiusX="4" RadiusY="4">
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="#F0F0F0" Offset="0"/>
                    <GradientStop Color="#E0E0E0" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
            <Rectangle.RenderTransform>
                <ScaleTransform ScaleX="1" ScaleY="1"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <TextBox Margin="8,4" Background="Transparent" BorderThickness="0"/>
        <Button Margin="4" HorizontalAlignment="Right" VerticalAlignment="Center"
                Width="20" Height="20" Content="X"
                Background="Transparent" BorderThickness="0"/>
    </Grid>
</UserControl>

C#后台代码

public partial class ClearableTextBox : UserControl
{
    public ClearableTextBox()
    {
        InitializeComponent();
        MouseEnter += OnMouseEnter;
        MouseLeave += OnMouseLeave;
    }

    private void OnMouseEnter(object sender, MouseEventArgs e)
    {
        (Resources["HoverEnterStoryboard"] as Storyboard)?.Begin(BackgroundRect);
    }

    private void OnMouseLeave(object sender, MouseEventArgs e)
    {
        (Resources["HoverExitStoryboard"] as Storyboard)?.Begin(BackgroundRect);
    }
}

优势

• 无需重构现有布局，快速适配现有代码
• 可在后台添加额外逻辑（比如判断控件是否禁用后再触发动画）

内容的提问来源于stack exchange，提问作者fallingLeaves