WinUI3中如何避免Tooltip遮挡MainWindow标题栏？

问题描述 #

WinUI 3应用中，主窗口Grid内的Image控件占据大部分空间，其附带的Tooltip在鼠标悬停时展示图片信息，但当悬停在图片右上角时，Tooltip会遮挡窗口标题栏，存在无障碍问题。此前尝试在Tooltip的OnOpened事件中动态修改Placement属性未生效，原因是该事件触发时Tooltip已进入布局阶段，修改无法影响最终显示位置。

解决方案 #

方法一：实时监听鼠标位置，提前设置Tooltip布局规则 #

通过监听Image的鼠标移动事件，实时判断鼠标相对于Image的位置，提前设置Tooltip的Placement属性，确保Tooltip显示时直接使用正确的位置规则。

1. 修改XAML代码，添加MouseMove事件绑定：

<Image
    x:Name="ImagePreview"
    MaxWidth="{x:Bind ImagePreviewer.MaxImageSize.Width, Mode=OneWay}"
    MaxHeight="{x:Bind ImagePreviewer.MaxImageSize.Height, Mode=OneWay}"
    Source="{x:Bind ImagePreviewer.Preview, Mode=OneWay}"
    Visibility="{x:Bind IsPreviewVisible(ImagePreviewer, Previewer.State), Mode=OneWay}"
    MouseMove="ImagePreview_MouseMove">
    <ToolTipService.ToolTip>
        <ToolTip x:Name="TooltipInfo" Content="{x:Bind InfoTooltip, Mode=OneWay}" />
    </ToolTipService.ToolTip>
</Image>

2. 后台实现鼠标移动事件逻辑：

private void ImagePreview_MouseMove(object sender, PointerRoutedEventArgs e)
{
    if (sender is not Image image) return;

    // 获取鼠标相对于Image控件的坐标
    Point pointerPosition = e.GetCurrentPoint(image).Position;
    // 获取Tooltip的实际高度，若未加载则用预估高度兜底
    double tooltipHeight = TooltipInfo.ActualHeight > 0 ? TooltipInfo.ActualHeight : 40;

    // 当鼠标位置靠近Image顶部（Y坐标小于Tooltip高度），设置Tooltip显示在下方
    if (pointerPosition.Y < tooltipHeight)
    {
        ToolTipService.SetPlacement(image, PlacementMode.Bottom);
    }
    else
    {
        // 其他场景恢复默认的顶部显示
        ToolTipService.SetPlacement(image, PlacementMode.Top);
    }
}

方法二：强制设置Tooltip偏移量（简单场景适用） #

如果不需要动态判断，可直接给Tooltip设置固定偏移，确保它不会靠近窗口标题栏：

<ToolTip x:Name="TooltipInfo" 
         Content="{x:Bind InfoTooltip, Mode=OneWay}"
         Placement="Top"
         VerticalOffset="10"/> <!-- 向下偏移10像素，避免贴顶遮挡标题栏 -->

关键说明 #

• OnOpened事件触发时机过晚：Tooltip的布局计算在该事件触发前已完成，此时修改Placement无法重新触发布局，导致设置不生效。
• 实时监听鼠标位置可提前告知Tooltip布局规则，确保显示时直接应用正确位置。

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