如何在 xaml 中集成一个简单的 ContentDialog？ （C＃）

Question

我不太明白如何制作一个简单的 ContentDialog。基本上我想要一个按钮，当按下 ContentDialog 时会弹出。 ContentDialog 应该至少有 1 个按钮。我想我错过了一些东西。我试图将我的部分代码放入其中，但是在构建程序时出现错误。我的猜测是我仍然必须在 XAML 中输入一些内容才能使其工作。这是 .XAML 的默认代码（在帖子底部，您可以找到我要放入其中的代码）：

<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>

现在我必须将这部分代码放在哪里？我必须添加一些东西吗？我在这里错过了什么？

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

Answer 1

派生自official document，

使用 ContentDialog 请求用户输入，或在模式对话框中显示信息。您可以使用代码或 XAML 将 ContentDialog 添加到应用页面，也可以创建派生自 ContentDialog 的自定义对话框类。这两种方式都显示在本主题的示例部分中。

有很多方法可以将ContentDialog集成到页面中，如果你只是简单地做一个ContentDialog，你可以在后面的代码中实现它。

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

    await noWifiDialog.ShowAsync();
}

如果你想用 xaml 实现它，请将你的 ContentDialog 放在根 Grid 的底部。例如：

<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>

请注意，您提供的ContentDialog 错过了> 结束标记。更多信息请参考this。