Why does the async/await code to show my ContentDialog fail at runtime?

Question

I want to instantiate a ContentDialog in my UWP app, which is defined in my XAML as follows:

<Page
    . . .
    <Grid x:Name="grd">
        . . .
        <ContentDialog x:Name="cntDlgLoadMap"
            Title="This is an example"
            PrimaryButtonText="Ok"
            CloseButtonText="Cancel"
            DefaultButton="Primary">
        </ContentDialog>
    </Grid>
</Page>

Trying to get a minimal example running, I was going to try this:

private void btnLoadMap_Click(object sender, RoutedEventArgs e)
{
    cntDlgLoadMap.ShowAsync();
}

...but got this design-time err msg:

So I changed the code to this, adding "async" to the method/event handler and "await" to the call to show the content dialog:

private async void btnLoadMap_Click(object sender, RoutedEventArgs e)
{
    await cntDlgLoadMap.ShowAsync();
}

As such, the app compiles and runs, but when I select the "LoadMaps" button, I get this:

Then, after hitting F5 to continue, I get:

What is wrong with or missing from my code or XAML?

UPDATE

Per Roy Li's request, here is the XAML for the load button:

<Button x:Name="btnLoadMap" Content="Load Map" Margin="20,16,50,0" VerticalAlignment="Top" Click="btnLoadMap_Click" />
    

Answer 1

Create your ContentDialog on the stack not on the page Xaml. You can create a new ContentDialog class or create a UserControl class with the xaml. See the sample here.

    private async void btnLoadMap_Click(object sender, 
    RoutedEventArgs e)
    {
        var content = new MyUserControl();
        var dialog = new ContentDialog
        {
           Content = content
        };

        await dialog.ShowAsync();
    }

Answer 2

I am able to get it to work (pretty much/more-or-less) using the following code.

Here is the pertinent XAML:

<Button x:Name="btnCre8NewMap" Content="Create New Map" ToolTipService.ToolTip="Create a new map" Margin="140,16,50,0" VerticalAlignment="Top" Click="btnCre8NewMap_Click"/>
. . .
<ContentDialog x:Name="cntDlgCre8Map"
Title="Create a New Map"
PrimaryButtonText="Save"
CloseButtonText="Cancel"
DefaultButton="Primary">
    <StackPanel>
    <TextBlock Text="Map Name: "/>
    <TextBox x:Name="txtbxMapName"
        Width="300" HorizontalAlignment="Left"/>
    <TextBlock Text="Default Zoom Level: "/>
    <ComboBox x:Name="cmbxCre8MapZoomLevels"
        Width="100" HorizontalAlignment="Left"/>
    <TextBlock Text="Map Notes: "/>
    <TextBox x:Name="txtbxMapNotes"
        Width="300" Height="300" HorizontalAlignment="Left"/>
    </StackPanel>
</ContentDialog>

...and here is the button click event in the code-behind:

private async void btnCre8NewMap_Click(object sender, RoutedEventArgs e)
{
    try
    {
        string mapName = string.Empty;
        string mapNotes = string.Empty;
        int defaultZoomLevel = 1;
        ClearLocations();
        // Popul8 the cmbx
        for (int i = 1; i < 20; i++)
        {
            cmbxCre8MapZoomLevels.Items.Add(i.ToString());
        }
        ContentDialogResult result = await cntDlgCre8Map.ShowAsync();

        if (result == ContentDialogResult.Primary)
        {    
            mapName = txtbxMapName.Text;
            mapNotes = txtbxMapNotes.Text;
            defaultZoomLevel = cmbxCre8MapZoomLevels.SelectedIndex + 1;
            InsertMapRecord(mapName, mapNotes, preferredZoomLevel);
        }
        // else do nothing (don't save)
    }
    catch (Exception ex)
    {
        MessageDialog exceptionMsgDlg = new MessageDialog(ex.Message, "btnCre8NewMap_Click");
        await exceptionMsgDlg.ShowAsync();
    }
}

This is what I see when I click btnCre8NewMap: