ContentDialog not aligning to center on UWP

Question

From what I know, ContentDialog's default behavior should be to have it centered on PC and aligned to top on mobile, but in my case I have it aligned to top even on PC and I don't understand what's going on.

I'm creating it using code-behind, and this is a snippet of the code that I'm using:

// 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()
});

I already tried using VerticalAlignment and FullSizeDesired but I don't get the expected results.

How can I fix this?

Answer 1

The ContentDialog is like the Popup control, the PopupRoot holds it when it is shown on the page. But unlike the Popup control, the location where to place the ContentDialog is written in the code behind, and this property is not exposed to us, we can not change it.

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

The ContentDialog is not always centered on PC. I test the ContentDialog bases on the code from you posted. The ContentDialog is aligned to top of the page when the page height smaller than 640. It is centered of the page when the page height equal to 640 or larger than 640.

From the image above we can see that the location where to place the ContentDialog is triggered by the height of the Page.

Answer 2

Here's how:

1. Use the placement argument to show the dialog, like this: dialog.ShowAsync( ContentDialogPlacement.InPlace).

2. Instantiate your content dialog as part of the layout of your app, for example put something like this in your App 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();
   }
   

3. Leave the content dialog's HorizontalAlignment, VerticalAlignment, MaxWidth and MaxHeight at their defaults in order to have the 'modal backdrop' of the dialog cover the entire area of the app.

P.S. For tips on making sure that only one content dialog shows at a time, see "Only a single ContentDialog can be open at any time." error while opening another contentdialog

Answer 3

I don't know the ins and outs here, but it seems to be that setting the dialog's MaxWidth or MaxHeight is what causes the problem.

I had my Maxwidth set to 500, and the dialog ended up on the left of the screen. I changed MaxWidth to 600 and the dialog still sat to the left, but not quite so far.

I then removed MaxWidth and the dialog was back in the centre of the screen.

Presumably the dialog is created via some kind of overlay which needs to be the full screen size in order to align the dialog correctly. When you set MaxWidth or MaxHeight, it sets the width/height of the overlay, not the dialog itself. So if those values are less than your actual screen size, the overlay sits to one side of the screen (towards the upper and left hand edges) and the dialog sits in the middle of the overlay.

Removing MaxWidth fixed the problem for me.

To achieve desired widths, instead of setting MaxWidth on the dialog itself, set MaxWidth on the content you've told the dialog to hold.

Having just looked more closely at the other answers, I notice sjb-sjb hinted at this too. I don't understand what all that other code in his answer is for though. Just remove MaxWidth/Height and the issue should be fixed.