WinUI3中如何在ContentDialog内显示TeachingTip？现有代码无法生效

在WinUI3开发中，尝试在ContentDialog中嵌入TeachingTip时无法正常显示，以下是针对原代码的修正方案：

核心问题分析 #

原代码将TeachingTip作为普通子元素放入StackPanel中，但TeachingTip属于弹出式控件，需要附加到正确的可视化树层级才能正常渲染。ContentDialog的Content容器会限制弹出元素的显示范围，导致TeachingTip无法被正确绘制。

修改后的完整代码 #

XAML代码（无需修改） #

<Window
    x:Class="WinUI3App.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="using:WinUI3App"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    Title="WinUI3App" Height="450" Width="800">

    <Grid>
        <Button Content="Open Dialog" HorizontalAlignment="Center" VerticalAlignment="Center" Click="Button_Click"/>
    </Grid>
</Window>

C#代码（修正版本） #

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace WinUI3App
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private async void Button_Click(object sender, RoutedEventArgs e)
        {
            var dialog = new ContentDialog
            {
                Title = "Sample Content Dialog",
                CloseButtonText = "Close",
                XamlRoot = (sender as Button).XamlRoot
            };

            var textBlock = new TextBlock { Text = "Hello world" };
            dialog.Content = new StackPanel { Children = { textBlock } };

            // 初始化TeachingTip并配置关键属性
            var teachingTip = new TeachingTip
            {
                Content = "This is a sample teaching tip.",
                Title = "Sample Teaching Tip",
                PlacementTarget = textBlock,
                Placement = TeachingTipPlacement.Top,
                XamlRoot = dialog.XamlRoot,
                IsOpen = false
            };

            // 将TeachingTip添加到ContentDialog的专用弹出容器
            dialog.ContentRoot.Children.Add(teachingTip);

            dialog.Opened += (s, _) => teachingTip.IsOpen = true;
            dialog.Closed += (s, _) => 
            {
                teachingTip.IsOpen = false;
                dialog.ContentRoot.Children.Remove(teachingTip);
            };

            await dialog.ShowAsync();
        }
    }
}

关键修改点 #

• 调整挂载位置：将TeachingTip添加到ContentDialog的ContentRoot集合，这是对话框专门用于承载弹出式元素的容器，避免Content布局限制
• 同步XamlRoot：确保TeachingTip的XamlRoot与ContentDialog一致，保证在对话框的上下文内正确渲染
• 明确显示位置：设置Placement属性指定TeachingTip相对于目标控件的显示方位（示例中为顶部）
• 资源清理：对话框关闭时移除TeachingTip，避免内存泄漏

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