如何实现WPF中行尾帮助图标点击/悬停弹出Flyout提示浮层？

哈哈，我懂你遇到的问题了——你用的ContextFlyout默认是右键触发的，所以左键点击当然没反应啦！先给你把现有代码的问题解决，再分享几种靠谱的WPF提示弹窗实现思路👇

如果想继续用ContextFlyout但让左键点击也能触发，只需要给TextBlock加个MouseLeftButtonDown事件，手动打开Flyout就行：

<TextBlock Text="?" MouseLeftButtonDown="HelpIcon_MouseLeftButtonDown">
    <TextBlock.ContextFlyout>
        <Flyout>
            <RichTextBlock>
                <Paragraph>
                    This is the help
                    <LineBreak/>
                    for this row
                    <LineBreak/>
                </Paragraph>
            </RichTextBlock>
        </Flyout>
    </TextBlock.ContextFlyout>
</TextBlock>

然后在后台代码里添加事件处理：

private void HelpIcon_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    var textBlock = sender as TextBlock;
    if (textBlock?.ContextFlyout is Flyout flyout)
    {
        flyout.ShowAt(textBlock);
        e.Handled = true;
    }
}

其实更简单的是把问号图标放在Button里——Button默认支持左键点击触发Flyout，还不用写额外的后台代码，只需要把Button的样式改成“纯图标”的样子就行：

<Button Content="?" Cursor="Help">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Padding" Value="2"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="#0066CC"/> <!-- 悬停变蓝色，模拟链接效果 -->
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
    <Button.Flyout>
        <Flyout Placement="Right"> <!-- 可以指定弹窗位置：Top/Bottom/Left/Right -->
            <RichTextBlock Width="200">
                <Paragraph FontSize="14">
                    This is the help
                    <LineBreak/>
                    for this row
                    <LineBreak/>
                    还可以加更多自定义内容哦～
                </Paragraph>
            </RichTextBlock>
        </Flyout>
    </Button.Flyout>
</Button>

划重点：这里给Button设置了透明背景、无边框，悬停时变色，看起来就像一个可点击的帮助图标，完全不会有按钮的生硬感。

如果需要既支持悬停显示，又支持点击保持弹窗（比如用户需要复制弹窗里的内容），用Popup控件会更灵活：

<Grid>
    <!-- 帮助图标 -->
    <TextBlock x:Name="HelpIcon" Text="?" Cursor="Help" 
               MouseEnter="HelpIcon_MouseEnter" 
               MouseLeave="HelpIcon_MouseLeave"
               MouseLeftButtonDown="HelpIcon_MouseLeftButtonDown"/>
    
    <!-- 提示弹窗 -->
    <Popup x:Name="HelpPopup" PlacementTarget="{Binding ElementName=HelpIcon}" 
           Placement="Right" StaysOpen="False">
        <Border Background="White" BorderBrush="#E0E0E0" BorderThickness="1" 
                Padding="10" CornerRadius="4" Width="220">
            <RichTextBlock>
                <Paragraph>
                    这是行内帮助提示
                    <LineBreak/>
                    悬停显示，点击可以固定弹窗哦～
                </Paragraph>
            </RichTextBlock>
        </Border>
    </Popup>
</Grid>

后台代码处理触发逻辑：

private bool _isPopupClicked = false;

private void HelpIcon_MouseEnter(object sender, MouseEventArgs e)
{
    if (!_isPopupClicked)
    {
        HelpPopup.IsOpen = true;
    }
}

private void HelpIcon_MouseLeave(object sender, MouseEventArgs e)
{
    if (!_isPopupClicked)
    {
        HelpPopup.IsOpen = false;
    }
}

private void HelpIcon_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    _isPopupClicked = !_isPopupClicked;
    HelpPopup.IsOpen = _isPopupClicked;
    // 如果点击后要保持弹窗，把StaysOpen改成True也行，这里用变量控制更灵活
    HelpPopup.StaysOpen = _isPopupClicked;
}

这个方案的好处是完全自定义弹窗的样式和触发逻辑，比如可以给弹窗加阴影、动画，甚至绑定ViewModel里的提示内容。

如果只是需要简单的文本提示，不用复杂的富文本，WPF自带的ToolTip是最省事的，悬停就显示，完全不用写后台代码：

<TextBlock Text="?" Cursor="Help">
    <TextBlock.ToolTip>
        <ToolTip>
            <StackPanel>
                <TextBlock Text="这是帮助提示"/>
                <TextBlock Text="第二行内容"/>
            </StackPanel>
        </ToolTip>
    </TextBlock.ToolTip>
</TextBlock>

不过ToolTip默认是悬停显示，点击不会触发，而且样式自定义性不如Flyout和Popup，适合简单场景。

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