UWP中Popup.ShouldConstrainToRootBounds为false时ContentDialog无法显示在Popup上方

问题原因 #

当设置Popup.ShouldConstrainToRootBounds=false时，Popup会脱离应用主窗口的根可视化树约束，创建独立的窗口容器。而默认调用ContentDialog.ShowAsync()时，ContentDialog会绑定到应用主窗口的XamlRoot，导致它的窗口层级低于Popup的独立容器，因此会显示在Popup下方。

解决方案 #

在显示ContentDialog前，将它的XamlRoot属性设置为Popup内部元素的XamlRoot，确保两者处于同一个可视化层级。修改后的代码如下：

修改后的C#代码 #

private Popup popup;

private void Button_Click(object sender, RoutedEventArgs e)
{
    popup = new Popup { Margin = new Thickness(200, 300, 0, 0), ShouldConstrainToRootBounds = false };
    Border border = new Border { Width = 400, Height = 300, Background = new SolidColorBrush(Colors.Green) };
    Button popupButton = new Button { Content = "Open Content Dialog", Width = 200, Height = 50 };
    border.Child = popupButton;
    popupButton.Click += PopupButton_Click;
    popup.Child = border;
    popup.IsOpen = true;
}

private async void PopupButton_Click(object sender, RoutedEventArgs e)
{
    ContentDialog contentDialog = new ContentDialog
    {
        Title = "ContentDialogOverPopup",
        Content = "Content Dialog",
        CloseButtonText = "Ok",
        // 关键：绑定到Popup内部元素的XamlRoot
        XamlRoot = ((Button)sender).XamlRoot
    };
    await contentDialog.ShowAsync();
}

说明 #

通过将ContentDialog的XamlRoot设置为触发按钮的XamlRoot（即Popup的XamlRoot），ContentDialog会被渲染到Popup所在的同一个窗口容器中，自然显示在Popup上方，不受ShouldConstrainToRootBounds设置的影响。

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