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，但是我没有得到预期的结果。

我该怎么解决这个问题？

- StepTNT

---

你找到任何解决方案或变通方法了吗？ - ravi kumar

Answer 1

ContentDialog类似于Popup控件，当它在页面上显示时，PopupRoot将其持有。但与Popup控件不同的是，放置ContentDialog的位置编写在后端代码中，而此属性未向我们公开，因此我们无法更改它。

据我所知，ContentDialog的默认行为应该是在PC上居中显示。

ContentDialog并非始终在PC上居中显示。我测试了基于您发布的代码的ContentDialog，当页面高度小于640时，ContentDialog与页面顶部对齐。当页面高度等于640或大于640时，它位于页面中央。

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

- Jayden

---

哦，这是不是意味着没有办法强制它在电脑上居中？它看起来在那里非常丑陋！ - StepTNT

你可以添加 ApplicationView.PreferredLaunchViewSize = new Size(980, 800); ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize; 来使页面的高度等于800。 - Jayden

这对移动端有任何影响吗？有没有办法为应用程序窗口设置最小高度？ - StepTNT

它对移动设备没有影响，因为移动设备不支持调整页面大小。在电脑上，似乎没有设置最小高度的方法。所有应用程序都可以调整页面大小。 - Jayden

Jayden Gu的回复并没有解决问题。请看我下面发布的答案。@StepTNT您可以重新分配“答案”勾选标记。 - sjb-sjb

Answer 2

我不太清楚其中的细节，但似乎将对话框的MaxWidth或MaxHeight设置为引起问题的原因。

我将我的Maxwidth设置为500，对话框就会出现在屏幕左侧。我将MaxWidth更改为600，对话框仍然停留在左侧，但没有那么远。

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

可能是通过某种叠加形式创建对话框，以便正确对齐对话框需要全屏幕大小的叠加效果。当您设置MaxWidth或MaxHeight时，它会设置叠加的宽度/高度，而不是对话框本身的宽度/高度。因此，如果这些值小于实际屏幕尺寸，则叠加效果位于屏幕的一侧（靠近上部和左侧边缘），对话框位于叠加效果的中心。

删除MaxWidth对我来说解决了问题。

要实现所需的宽度，请不要在对话框本身上设置MaxWidth，而是在您告诉对话框容纳的内容上设置MaxWidth。

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

- Stuart Aitken

Answer 3

以下是方法：

使用放置参数来展示对话框，例如：dialog.ShowAsync(ContentDialogPlacement.InPlace)。

将内容对话框实例化为应用程序布局的一部分，例如将以下内容放入您的 App 类中： 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 保留为默认值，以使对话框的“模态背景”覆盖整个应用程序区域。

附注：有关确保一次只显示一个内容对话框的提示，请参见{{link1：“任何时候只能打开一个ContentDialog。”打开另一个contentdialog时出错}}

- sjb-sjb