How to integrate a simple ContentDialog in xaml? (C#)

Question

I dont quite understand how to make a simple ContentDialog. Basically I want to have a button that when pressed the ContentDialog Pops up. The ContentDialog should have at least 1 Button. I guess Im missing out something. I tried to put my part of the Code into it but there is an error when it Comes to build the program. My guess is that I still have to enter something in the XAML to make it work. This is the default Code of the .XAML (at the Bottom of the post you find the Code I want to put into it):

<Page
    x:Class="PDFViewerSDK_Win10.PDFReaderPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PDFViewerSDK_Win10"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" SizeChanged="OnSizeChanged">

    <Page.Resources>
        <DataTemplate x:Key="MenuItemTemplate">
            <Grid HorizontalAlignment="Left" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
                <StackPanel Margin="0,0,0,0" Orientation="Vertical">
                    <TextBlock TextWrapping="Wrap" Foreground="{StaticResource ApplicationForegroundThemeBrush}" Width="300" VerticalAlignment="Center" Text="{Binding Title}" HorizontalAlignment="Left" FontFamily="Segoe UI"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </Page.Resources>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="68"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="0.35*"/>
        </Grid.RowDefinitions>
        <Canvas x:Name="mPDFView" Grid.RowSpan="3"/>
        <Canvas x:Name="mPDFThumb" Grid.Row="2" Visibility="Visible"/>
        <ListView x:Name="mMenuView"
                  Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
                  HorizontalAlignment="Right"
                  VerticalAlignment="Top"
                  Margin="0, 68, 0, 0"
                  ItemTemplate="{StaticResource MenuItemTemplate}"
                  IsItemClickEnabled="True"
                  ItemClick="OnMenuListItemClicked"
                  Visibility="Collapsed"
                  ScrollViewer.VerticalScrollBarVisibility="Auto"
                  ScrollViewer.HorizontalScrollBarVisibility="Auto"
                  Grid.RowSpan="2"/>
        <Grid Height="68" Margin="0" VerticalAlignment="Top" Background="#7FC0C0C0" Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <StackPanel HorizontalAlignment="Left" Grid.Column="0" Orientation="Horizontal">
                <Button x:Name="backButton" Click="OnBtnGoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}" Margin="10,10,0,0" Foreground="Black" BorderBrush="Black" Background="Black" AllowDrop="True" VerticalAlignment="Top" RenderTransformOrigin="-1.62,0.618"/>
                <Button x:Name="searchBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
                    <Image Source="Assets/images/view_search.png"/>
                </Button>
                <Button x:Name="viewAnnotBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
                    <Image Source="Assets/images/annot_line.png"/>
                </Button>
                <Button x:Name="doneAnnotBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" Visibility="Collapsed">
                    <Image Source="Assets/images/annot_done.png"/>
                </Button>
                <Button x:Name="removeAnnotBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" Visibility="Collapsed">
                    <Image Source="Assets/images/annot_remove.png"/>
                </Button>
                <Button x:Name="selectBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
                    <!--Image Source="Assets/images/icon_select.png"/-->
                    <BitmapIcon Name="mSelectIcon" UriSource="ms-appx:///Assets/images/icon_select.png" />
                </Button>
                <Button x:Name="viewMenuBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
                    <Image Source="Assets/images/icon_menu.png"/>
                </Button>
                <TextBox x:Name="mPageInput" Width="90"  Margin="30,10,5,10" FontSize="30" KeyDown="OnKeyDown"/>
                <TextBlock x:Name="mPageDisplay" Width="90" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="30" Margin="0,10,0,10"/>
                <Button x:Name="settingsBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
                    <Image Source="Assets/images/icon_setting.png"/>
                </Button>
                <Button x:Name="thumbnailBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnThumbItemTapped">
                    <Image Source="Assets/images/icon_thumbnail.png"/>
                </Button>
                    <Image Source="Assets/images/icon_menu.png"/>
            </StackPanel>
            <StackPanel HorizontalAlignment="Right" Grid.Column="1" Orientation="Horizontal">
                <Button x:Name="viewInfoBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
                    <Image Source="Assets/images/view_about.png"/>
                </Button>

            </StackPanel>

        </Grid>

    </Grid>
    <Page.BottomAppBar>
        <AppBar x:Name="mAppBar">
            <Grid  x:Name="PDFOptionPanel"/>
        </AppBar>
    </Page.BottomAppBar>
</Page>

Now where do I have to put this part of the Code? Do I have to add something? What am I missing here?

        <ContentDialog x:Name="test" PrimaryButtonText="Ok" SecondaryButtonText="Cancel" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" </ContentDialog>

Answer 1

Derive from official document,

Use a ContentDialog to request input from the user, or to show information in a modal dialog. You can add a ContentDialog to an app page using code or XAML, or you can create a custom dialog class that's derived from ContentDialog. Both ways are shown in the examples section of this topic.

There are many ways could integrate ContentDialog to page, If you just make a simple ContentDialog, you could implement it in code behind.

private async void DisplayNoWifiDialog()
{
    ContentDialog noWifiDialog = new ContentDialog()
    {
        Title = "No wifi connection",
        Content = "Check connection and try again.",
        CloseButtonText = "Ok"
    };

    await noWifiDialog.ShowAsync();
}

If you want implement it with xaml, please put your ContentDialog in the bottom of the root Grid. for example:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="This is ContentDialog"/>
    <Button Click="Button_Click" Content="ClickMe"/>
    <ContentDialog x:Name="test" PrimaryButtonText="Ok" SecondaryButtonText="Cancel"  Tapped="OnOptionItemTapped" ></ContentDialog>
</Grid>

Please note, the ContentDialog that you provided missed > end mark. For more info please refer this.