UWP ContentDialog covers whole page

Question

When ContentDialog is used with a color theme from Fluent XAML Theme Editor, content dialog covers the whole page

To replicate follow these steps:

1. Create new UWP app
2. Grab a color scheme from Fluent XAML Theme Editor and add it to your project
3. In App.Xaml add this:

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

5. Add a TextBlock and Loaded event to MainPage
6. Add ContentDialog call to Loaded event

   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();
        }

7. Run the app and see how ContentDialog covers up the TextBlock. If you remove the color theme this does not happen.

Answer 1

What you are describing is not the dialog covering anything, but the normal background dimming feature of Content Dialog boxes.

The Fluent XAML Theme Editor output has simply altered the styles which make the default background a solid colour, in my theme that was white, but instead I would like the user to still see the content in the background.

This is the style key that you need to manage:

SystemControlPageBackgroundMediumAltMediumBrush

Add this snippet to a resource dictionary that is applied after your reference to the main theme file, it will set the background to an opaque color for all content dialog boxes, defineing in this way will allow you to support a different background colour in dark or light modes, this example uses the same colour for each theme, but demonstrates how to define a different one:

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

You could do this inline or move it to another file:

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