UWP ContentDialog 覆盖整个页面

Question

当 ContentDialog 与 Fluent XAML Theme Editor 中的颜色主题一起使用时，内容对话框会覆盖整个页面

要复制，请执行以下步骤：

创建新的 UWP 应用程序
从 Fluent XAML Theme Editor 中获取配色方案并将其添加到您的项目中
在 App.Xaml 中添加：

     <Application.Resources>
      <ResourceDictionary>
       <ResourceDictionary.MergedDictionaries>
           <ResourceDictionary Source="Dictionary1.xaml"/>
      </ResourceDictionary.MergedDictionaries>
     </ResourceDictionary>
    </Application.Resources>

将 TextBlock 和 Loaded 事件添加到 MainPage
向 Loaded 事件添加 ContentDialog 调用

   private async void Page_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            ContentDialog noWifiDialog = new ContentDialog
            {
                Title = "No wifi connection",
                Content = "Check your connection and try again.",
                CloseButtonText = "Ok"
            };

            _ = await noWifiDialog.ShowAsync();
        }

运行应用程序，看看 ContentDialog 如何掩盖 TextBlock。如果您删除颜色主题，则不会发生这种情况。

Answer 1

您描述的不是对话框覆盖任何东西，而是Content Dialog框的正常背景调光功能。

The Fluent XAML Theme Editor 输出只是改变了样式，使默认背景成为纯色，在我的主题中是白色的，但我希望用户仍然可以看到背景.

这是您需要管理的样式键：

SystemControlPageBackgroundMediumAltMediumBrush

将此代码段添加到应用的资源字典中在您引用主主题文件后，它会将所有内容对话框的背景设置为不透明颜色，定义通过这种方式，您可以在深色或浅色模式下支持不同的背景颜色，此示例为每个主题使用相同的颜色，但演示了如何定义不同的颜色：

<!--  override the Dialog Background  -->
<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <SolidColorBrush x:Key="ContentDialogDimmingThemeBrush" Color="#99FFFFFF" />
        <SolidColorBrush x:Key="SystemControlPageBackgroundMediumAltMediumBrush" Color="#99000000" />
        <StaticResource x:Key="ContentDialogLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
    </ResourceDictionary>
    <ResourceDictionary x:Key="Dark">
        <SolidColorBrush x:Key="ContentDialogDimmingThemeBrush" Color="{ThemeResource SystemColorHighlightColor}" />
        <SolidColorBrush x:Key="SystemControlPageBackgroundMediumAltMediumBrush" Color="#99000000" />
        <StaticResource x:Key="ContentDialogLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

您可以内联执行此操作或将其移动到另一个文件：

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Dictionary1.xaml"/>


            <ResourceDictionary>
                <ResourceDictionary.ThemeDictionaries>
                    <ResourceDictionary x:Key="Default">
                        <SolidColorBrush x:Key="ContentDialogDimmingThemeBrush" Color="#99FFFFFF" />
                        <SolidColorBrush x:Key="SystemControlPageBackgroundMediumAltMediumBrush" Color="#99000000" />
                        <StaticResource x:Key="ContentDialogLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
                    </ResourceDictionary>
                    <ResourceDictionary x:Key="Dark">
                        <SolidColorBrush x:Key="ContentDialogDimmingThemeBrush" Color="{ThemeResource SystemColorHighlightColor}" />
                        <SolidColorBrush x:Key="SystemControlPageBackgroundMediumAltMediumBrush" Color="#99000000" />
                        <StaticResource x:Key="ContentDialogLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
                    </ResourceDictionary>
                </ResourceDictionary.ThemeDictionaries>
            </ResourceDictionary>


        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

UWP ContentDialog 覆盖整个页面

UWP ContentDialog covers whole page

c#

xaml

themes

uwp