如何在WinUI 3 XAML中实现悬停打开TeachingTip的圆形信息图标

方案1：自定义无动画圆形Button（推荐，无需后台代码） #

利用Button作为目标元素，通过自定义样式去除默认悬停/按下动画并设置为圆形，结合TeachingTip的Trigger属性实现自动悬停显示。

XAML代码 #

<!-- 自定义圆形无动画Button -->
<Button x:Name="InformationIcon"
        Width="24"
        Height="24"
        Padding="0"
        Background="Transparent"
        BorderBrush="{ThemeResource SystemControlForegroundBaseMediumBrush}"
        BorderThickness="1"
        CornerRadius="100">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <!-- 移除默认交互动画，仅保留内容展示 -->
            <Grid>
                <ContentPresenter HorizontalAlignment="Center"
                                  VerticalAlignment="Center"
                                  Content="{TemplateBinding Content}"
                                  ContentTemplate="{TemplateBinding ContentTemplate}"/>
            </Grid>
        </ControlTemplate>
    </Button.Template>
    <!-- 自带圆圈的信息图标 -->
    <SymbolIcon Symbol="InfoWithCircle"
                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"/>
</Button>

<!-- 绑定Button的TeachingTip，设置悬停触发 -->
<TeachingTip x:Name="InfoTeachingTip"
             Title="Title"
             Subtitle="Subtitle"
             Target="{x:Bind InformationIcon}"
             Trigger="PointerOver"/>

说明 #

• 设置CornerRadius="100"让Button变成正圆，需保证Width和Height数值一致
• 自定义ControlTemplate去掉了默认的悬停、按下动画，让图标呈现静态效果
• 使用SymbolIcon的InfoWithCircle符号，无需手动输入字符编码就能得到带圆圈的"i"图标
• TeachingTip的Trigger="PointerOver"属性会自动监听鼠标悬停状态，无需额外代码处理显示逻辑

方案2：Border+FontIcon（需后台事件处理） #

如果不想使用Button，可以用Border包裹图标，通过指针事件手动控制TeachingTip的显示与隐藏。

XAML代码 #

<Border x:Name="InformationIcon"
        Width="24"
        Height="24"
        CornerRadius="100"
        BorderBrush="{ThemeResource SystemControlForegroundBaseMediumBrush}"
        BorderThickness="1"
        PointerEntered="InformationIcon_PointerEntered"
        PointerExited="InformationIcon_PointerExited">
    <SymbolIcon Symbol="InfoWithCircle"
                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"/>
</Border>

<TeachingTip x:Name="InfoTeachingTip"
             Title="Title"
             Subtitle="Subtitle"
             Target="{x:Bind InformationIcon}"/>

后台C#代码 #

private void InformationIcon_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    InfoTeachingTip.IsOpen = true;
}

private void InformationIcon_PointerExited(object sender, PointerRoutedEventArgs e)
{
    InfoTeachingTip.IsOpen = false;
}

说明 #

• Border作为图标容器，通过CornerRadius="100"设置为圆形
• 通过PointerEntered和PointerExited事件监听鼠标状态，手动切换TeachingTip的IsOpen属性
• 该方案完全自定义样式，没有按钮的默认交互逻辑，适合需要精细控制的场景

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