ContentDialog 未对齐以 UWP 为中心

Question

据我所知，ContentDialog 的默认行为应该是让它在 PC 上居中并在移动设备上与顶部对齐，但就我而言，即使在 PC 上我也将它与顶部对齐但我没有不明白是怎么回事。

我正在使用代码隐藏创建它，这是我正在使用的代码片段：

// Creates the password box
var passwordBox = new PasswordBox {IsPasswordRevealButtonEnabled = true, Margin = new Thickness(5)};            

// Creates the StackPanel with the content
var contentPanel = new StackPanel();
contentPanel.Children.Add(new TextBlock
{
    Text = "Insert your password to access the application",
    Margin = new Thickness(5),
    TextWrapping = TextWrapping.WrapWholeWords
});
contentPanel.Children.Add(passwordBox);       

// Creates the password dialog
_passwordDialog = new ContentDialog
{
    PrimaryButtonText = "accept",
    IsPrimaryButtonEnabled = false,
    SecondaryButtonText = "exit",
    Title = "Authentication",
    Content = contentPanel
};

// Report that the dialog has been opened to avoid overlapping
_passwordDialog.Opened += (s, e) =>
{
    // HACK - opacity set to 0 to avoid seeing behind dialog
    Window.Current.Content.Opacity = 0;
    _canShowPasswordDialog = false;
};
// Report that the dialog has been closed to enable it again
_passwordDialog.Closed += (s, e) =>
{
    // HACK - opacity set to 1 to reset the window to original options
    Window.Current.Content.Opacity = 1;
    _canShowPasswordDialog = true;
};

// Clear inserted password for next logins
_passwordDialog.PrimaryButtonClick += (s, e) =>
{
    // ... login ...
};

// Close the app if the user doesn't insert the password
_passwordDialog.SecondaryButtonClick += (s, e) => { BootStrapper.Current.Exit(); };

// Set the binding to enable/disable the accept button 

_passwordDialog.SetBinding(ContentDialog.IsPrimaryButtonEnabledProperty, new Binding
{
    Source = passwordBox,
    Path = new PropertyPath("Password"),
    Mode = BindingMode.OneWay,
    Converter = new PasswordValidatorConverter()
});

我已经尝试使用 VerticalAlignment 和 FullSizeDesired 但我没有得到预期的结果。

我该如何解决这个问题？

Answer 1

ContentDialog就像Popup控件一样，PopupRoot显示在页面上时就持有它。但是和Popup控件不同的是，ContentDialog的放置位置是写在后面的代码里的，这个属性没有暴露给我们，我们无法更改。

From what I know, ContentDialog's default behavior should be to have it centered on PC.

ContentDialog并不总是以PC为中心。我根据您发布的代码测试了 ContentDialog。当页面高度小于640时，ContentDialog对齐页面顶部。当页面高度等于640或大于640时，它居中对齐。

从上图中我们可以看出，放置ContentDialog的位置是由Page的高度触发的。

Answer 2

方法如下：

使用放置参数显示对话框，如下所示：dialog.ShowAsync(ContentDialogPlacement.InPlace)。

将您的内容对话框实例化为应用程序布局的一部分，例如在您的应用程序中放置类似这样的内容 class:

private Grid RootGrid => (Grid)Window.Current.Content;
private Frame Frame => this.RootGrid?.Children[0] as Frame;
private ContentDialog ContentDialog => this.RootGrid?.Children[1] as ContentDialog;

protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    if (Window.Current.Content == null) {
        Window.Current.Content = new Grid();
        Debug.Assert( this.RootGrid != null);
        this.RootGrid.Children.Add(new Frame()); 
        this.RootGrid.Children.Add(new ContentDialog());
        Debug.Assert(this.Frame != null && this.ContentDialog != null);
    }
    ...
    Window.Current.Activate();
}

将内容对话框的 HorizontalAlignment、VerticalAlignment、MaxWidth 和 MaxHeight 保留为默认值，以使对话框的 'modal backdrop' 覆盖应用程序的整个区域。

P.S。有关确保一次只显示一个内容对话框的提示，请参阅 "Only a single ContentDialog can be open at any time." error while opening another contentdialog

Answer 3

我不知道这里的来龙去脉，但似乎是设置对话框的 MaxWidth 或 MaxHeight 导致了问题。

我将 Maxwidth 设置为 500，对话框最终出现在屏幕左侧。我将 MaxWidth 更改为 600，对话框仍然位于左侧，但不是很远。

然后我删除了 MaxWidth，对话框又回到了屏幕中央。

大概是通过某种覆盖创建的对话框，它需要是全屏大小才能正确对齐对话框。当您设置 MaxWidth 或 MaxHeight 时，它会设置 overlay 的 width/height，而不是对话框本身。因此，如果这些值小于您的实际屏幕尺寸，则叠加层位于屏幕的一侧（朝向上部和左侧边缘）并且对话框位于叠加层的中间。

删除 MaxWidth 解决了我的问题。

要获得所需的宽度，不要在对话框本身上设置 MaxWidth，而是在您告诉对话框保留的内容上设置 MaxWidth。

仔细查看其他答案后，我注意到 sjb-sjb 也暗示了这一点。不过，我不明白他的回答中所有其他代码的用途。只需删除 MaxWidth/Height 即可解决问题。

ContentDialog 未对齐以 UWP 为中心

ContentDialog not aligning to center on UWP

c#

win-universal-app

windows-10

windows-10-universal