UWP: Content Dialogs & Popups

I ran into an annoying visual problem with eclecdec, where a Popup that overlays (partially or entirely) a ContentDialog ends up with a gray translucent overlay at the intersection point of the two. Like this:

Popup before

While the gray translucent overlay doesn’t interfere with user interaction with the Popup’s controls, it’s annoying and ugly and looks sloppy.
It turns out that someone (not me) is adding a Shadow to the Border element that contains the ContentDialog’s content. It took me quite a while to find this using the Visual Studio Visual Tree Navigator. Once I did, it was a relatively simple matter to walk back up the visual tree (from an element in the content, not from the ContentDialog itself), find the offending Border element, and set the Shadow to null. Like this:


private void clearBorderShadow(UIElement childElement)
{
if (childElement != null)
{
DependencyObject child = childElement;
DependencyObject parent;

while ((parent = VisualTreeHelper.GetParent(child)) as UIElement != null)
{
if (parent is Border)
{
Border border = parent as Border;
if (border.Name == "BackgroundElement”)
{
border.Shadow = null;
break;
}
}

child = parent;
}
}
}

If you’ve subclassed ContentDialog, you can call this method in an Opened event handler. Or, you can call it before you open a Popup.

It’s goofy, and I still don’t know who is adding the Shadow, but I’m not willing to spend any more time looking. Most importantly, it works – safely:

Popup after

Leave a Reply

Your email address will not be published. Required fields are marked *