Configuring overlay background colour for ContentD

Question

I'm writing an app for the universal windows platform using the dark theme and I've noticed that although I've correctly set the requested theme to dark when I display a modal dialog using the ContentDialog class the overlay lightens the overall page rather than darkening it.

Before dialog displayed:

With dialog displayed:

Since there isn't a property on ContentDialog to control the overlay how do I override the colour being used?

Answer 1

Try the below code.

    /// <summary>
    /// Set the Overlay background for content Dialog
    /// </summary>
    /// <param name="subTree">Content Dialog reference</param>
    public static void SetContentDialogOverlay(UIElement subTree)
    {

        var hostparent = VisualTreeHelper.GetParent(subTree);
        var rect = FindVisualChild<Rectangle>(hostparent);
        rect.Fill = new SolidColorBrush(Colors.Black);
        rect.Opacity = 0.7;

    }

    /// <summary>
    /// Find the child element from UIContainer
    /// </summary>
    /// <typeparam name="T"> Type</typeparam>
    /// <param name="depObj"> Dependency Reference </param>
    /// <returns></returns>
    public static T FindVisualChild<T>(DependencyObject depObj) where T : DependencyObject
    {
        if (depObj != null)
        {
            for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
            {
                DependencyObject child = VisualTreeHelper.GetChild(depObj, i);
                if (child != null && child is T)
                {
                    return (T)child;
                }

                T childItem = FindVisualChild<T>(child);
                if (childItem != null) return childItem;
            }
        }
        return null;
    }

Now, Call the above method on your code behind like this----

   // Based upon your access modifier i.e. public/private or protected
    SetContentDialogOverlay(this); 

Here, "this" represent the Content Dialog reference or you can pass the object reference of the ContectDialog.

Hope, this will help you to change the color of the Overlay. Happy Coding .. :)

Answer 2

I used the code for the accepted answer, but changing the color of this brush worked for me... "SystemControlPageBackgroundMediumAltMediumBrush" Maybe because i am using Anniversary Edition as I read here

Also make sure your resource dictionary key matches the theme you are using. I was using the "Light" theme, so I changed the Resource dictionary x:key to this...

<ResourceDictionary x:Key="Light">

Answer 3

I used the below code in App.xaml. It works for me properly.

<Application.Resources> <SolidColorBrush x:Key="SystemControlPageBackgroundMediumAltMediumBrush" Color="#00000000" /> </Application.Resources>

Answer 4

After some experimentation I've found that the brush being used to control the colour of the overlay that a ContentDialog is displayed above is SystemControlPageBackgroundBaseMediumBrushrather than the more likely looking ContentDialogDimmingThemeBrush.

By inspecting the default theme definitions it emerges that both light and dark themes set this brush to the colour resource SystemBaseMediumColor which on the light theme is #99000000 and on the dark theme is #99FFFFFF. This results in the overlay darkening the light theme and lightening the dark theme.

Since SystemBaseMediumColor is references by other brush definitions such as those used for inactive pivot titles it's necessary to override SystemControlPageBackgroundBaseMediumBrush rather than the colour it references solely for the dark theme.

To do this we need to redefine the brush in a resource theme dictionary in App.xaml or in a resource XAML file merged into App.xamlalong the lines of:

<Application>

    <Application.Resources>

        <ResourceDictionary>

            <ResourceDictionary.ThemeDictionaries>

                <ResourceDictionary x:Key="Dark">

                    <SolidColorBrush 
                        x:Key="SystemControlPageBackgroundBaseMediumBrush" 
                        Color="#99000000"
                        />

                </ResourceDictionary>

           </ResourceDictionary.ThemeDictionaries>

       </ResourceDictionary>

    </Application.Resources>

</Application>