如何在UWP中用ContentDialog复刻MessageDialog的外观？

完整自定义样式 #

下面是一套模拟MessageDialog默认外观的ContentDialog样式，可直接合并到你的资源字典中：

<Style TargetType="ContentDialog">
    <Setter Property="Foreground" Value="{ThemeResource SystemControlPageTextBaseHighBrush}" />
    <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
    <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundAccentBrush}" />
    <Setter Property="BorderThickness" Value="2" />
    <Setter Property="Padding" Value="19,14,19,14" />
    <Setter Property="MinWidth" Value="320" />
    <Setter Property="MaxWidth" Value="548" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ContentDialog">
                <Border x:Name="Container"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="{ThemeResource ContentDialogCornerRadius}">
                    <Grid x:Name="LayoutRoot">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>

                        <!-- 标题区域 -->
                        <ContentControl x:Name="Title"
                                        Grid.Row="0"
                                        Margin="0,0,0,12"
                                        Content="{TemplateBinding Title}"
                                        ContentTemplate="{TemplateBinding TitleTemplate}"
                                        FontSize="{ThemeResource ContentDialogTitleFontSize}"
                                        FontFamily="{ThemeResource ContentControlThemeFontFamily}"
                                        FontWeight="SemiBold"
                                        Foreground="{TemplateBinding Foreground}" />

                        <!-- 内容区域 -->
                        <ContentPresenter x:Name="Content"
                                          Grid.Row="1"
                                          Margin="0,0,0,16"
                                          Content="{TemplateBinding Content}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          FontSize="{ThemeResource ContentDialogContentFontSize}"
                                          FontFamily="{ThemeResource ContentControlThemeFontFamily}"
                                          Foreground="{TemplateBinding Foreground}" />

                        <!-- 按钮区域 -->
                        <Grid x:Name="CommandSpace"
                              Grid.Row="2"
                              HorizontalAlignment="Right"
                              Orientation="Horizontal">
                            <Button x:Name="PrimaryButton"
                                    Margin="0,0,8,0"
                                    Padding="16,8,16,8"
                                    Content="{TemplateBinding PrimaryButtonText}"
                                    Command="{TemplateBinding PrimaryButtonCommand}"
                                    CommandParameter="{TemplateBinding PrimaryButtonCommandParameter}"
                                    Style="{ThemeResource AccentButtonStyle}" />
                            <Button x:Name="SecondaryButton"
                                    Padding="16,8,16,8"
                                    Content="{TemplateBinding SecondaryButtonText}"
                                    Command="{TemplateBinding SecondaryButtonCommand}"
                                    CommandParameter="{TemplateBinding SecondaryButtonCommandParameter}"
                                    Style="{ThemeResource ButtonStyle}" />
                        </Grid>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

关键匹配细节 #

• 字体设置：MessageDialog默认采用系统主题字体{ThemeResource ContentControlThemeFontFamily}（即Segoe UI），标题字号为{ThemeResource ContentDialogTitleFontSize}（默认19px），内容字号为{ThemeResource ContentDialogContentFontSize}（默认14px）。
• 布局结构：严格遵循「标题-内容-按钮」的垂直布局，按钮区域右对齐，主按钮用强调色样式，次要按钮用默认按钮样式，完全贴合系统MessageDialog的交互逻辑。
• 间距规范：通过Padding和Margin匹配原生MessageDialog的留白标准，保证视觉一致性。

轻量字体匹配方案（无需完整样式） #

如果仅需对齐字体，可直接在ContentDialog或内部元素上设置：

<ContentDialog FontFamily="{ThemeResource ContentControlThemeFontFamily}">
    <StackPanel>
        <TextBlock FontSize="{ThemeResource ContentDialogTitleFontSize}" FontWeight="SemiBold" Text="操作标题" />
        <ProgressBar Margin="0,12,0,0" IsIndeterminate="True" />
        <TextBlock Margin="0,12,0,0" FontSize="{ThemeResource ContentDialogContentFontSize}" Text="正在处理，请稍候..." />
    </StackPanel>
</ContentDialog>

内容的提问来源于stack exchange，提问作者Kynan