WPF技术问询：如何实现TextBlock鼠标悬停背景变色动画

方案一：自定义TextBlock模板实现 #

TextBlock默认没有可视化背景容器，需要先通过模板添加Border承载背景，再结合触发器实现平滑过渡：

<TextBlock Text="悬停测试" Padding="8,4">
    <TextBlock.Style>
        <Style TargetType="TextBlock">
            <!-- 初始背景设为透明，保证动画有起始值 -->
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TextBlock">
                        <!-- 用Border包裹内容，实现可动画的背景 -->
                        <Border Background="{TemplateBinding Background}" CornerRadius="4">
                            <ContentPresenter/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <!-- 鼠标进入时的背景过渡动画 -->
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation 
                                    Storyboard.TargetProperty="Background.Color"
                                    To="#FFE0F7FA" <!-- 替换为你需要的目标颜色 -->
                                    Duration="0:0:0.3"/> <!-- 过渡时长，可自行调整 -->
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <!-- 鼠标离开时的背景还原动画 -->
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation 
                                    Storyboard.TargetProperty="Background.Color"
                                    To="Transparent"
                                    Duration="0:0:0.3"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </Style.Triggers>
        </Style>
    </TextBlock.Style>
</TextBlock>

方案二：通过外层Border实现（更简便） #

如果不想修改TextBlock模板，可将TextBlock嵌套在Border中，直接动画Border的背景：

<Border Background="Transparent" CornerRadius="4" Padding="8,4">
    <TextBlock Text="悬停测试"/>
    <Border.Style>
        <Style TargetType="Border">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation 
                                    Storyboard.TargetProperty="Background.Color"
                                    To="#FFE0F7FA"
                                    Duration="0:0:0.3"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation 
                                    Storyboard.TargetProperty="Background.Color"
                                    To="Transparent"
                                    Duration="0:0:0.3"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Border.Style>
</Border>

注意事项 #

• 必须确保初始背景为SolidColorBrush类型（如Transparent），否则ColorAnimation无法生效
• 调整Duration值可控制过渡快慢，例如0:0:0.2表示200毫秒完成过渡
• 可修改CornerRadius属性设置背景圆角，按需调整样式

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