WPF自定义标题栏实现Windows10关闭按钮原生悬停动画效果

当前实现效果参考：

用WPF内置的ColorAnimation做颜色插值过渡，通过鼠标路由事件触发动画，就能完全匹配Win10原生按钮的平滑过渡效果，不需要额外写后台颜色切换逻辑。

原有代码存在两个影响交互的问题：

• 直接给背景矩形写死了红色填充，默认状态下按钮应为透明背景、半透明白色叉号
• 容器Grid未设置透明背景，空白区域不响应鼠标命中，会出现交互盲区

完整可复用实现代码 #

<Grid Width="32" Height="25" Margin="1" HorizontalAlignment="Right" Grid.Column="4"
      MouseLeftButtonUp="OnCloseWindow" Background="Transparent">
    <Rectangle x:Name="BtnBg" Height="25" VerticalAlignment="Bottom" Fill="Transparent"/>
    <!-- 用Path绘制叉号比文本字符更还原原生样式，不会受字体渲染影响 -->
    <Path x:Name="CloseIcon" Data="M0,0 L10,10 M10,0 L0,10" Stroke="#DDFFFFFF" StrokeThickness="1.2" 
          Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    <Grid.Triggers>
        <!-- 鼠标悬停：平滑过渡到红色背景、纯白叉号 -->
        <EventTrigger RoutedEvent="Mouse.MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation Storyboard.TargetName="BtnBg" 
                                    Storyboard.TargetProperty="Fill.Color"
                                    To="#FFE81123" Duration="0:0:0.15"/>
                    <ColorAnimation Storyboard.TargetName="CloseIcon" 
                                    Storyboard.TargetProperty="Stroke.Color"
                                    To="#FFFFFFFF" Duration="0:0:0.15"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <!-- 鼠标移出：平滑恢复默认透明状态 -->
        <EventTrigger RoutedEvent="Mouse.MouseLeave">
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation Storyboard.TargetName="BtnBg" 
                                    Storyboard.TargetProperty="Fill.Color"
                                    To="#00FFFFFF" Duration="0:0:0.15"/>
                    <ColorAnimation Storyboard.TargetName="CloseIcon" 
                                    Storyboard.TargetProperty="Stroke.Color"
                                    To="#DDFFFFFF" Duration="0:0:0.15"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <!-- 鼠标按下状态，匹配Win10原生深红色反馈，不需要可删除 -->
        <EventTrigger RoutedEvent="Mouse.PreviewMouseLeftButtonDown">
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation Storyboard.TargetName="BtnBg" 
                                    Storyboard.TargetProperty="Fill.Color"
                                    To="#FFCA1013" Duration="0:0:0.1"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>
</Grid>

可选调整项 #

• 如果习惯用文本字符做叉号，把Path替换回原来的TextBlock即可，记得把对应动画的Storyboard.TargetProperty从Stroke.Color改成Foreground.Color
• 如果不需要鼠标按下的深色反馈，直接删除对应的PreviewMouseLeftButtonDown触发器块即可
• 动画时长可按需调整，0:0:0.15即150ms，是Windows系统控件的默认过渡值，和系统其他控件动效一致性最好

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