WPF Popup has a black border instead of a transparent one

Question

I am programmatically creating a popup for an element in a WPF window and can't get rid of the black border:

var p = new Popup {
     PlacementTarget = target,
     IsOpen = true,
     StaysOpen = false,
     AllowsTransparency = true
};

// Add the popup content
p.Child = new Views.MapLocationInformation {DataContext = context};

The User control MapLocationInformation is defined in XAML like this:

<UserControl ...
 mc:Ignorable="d" 
 Background="Transparent"
 d:DesignHeight="65" d:DesignWidth="401">

 <Border BorderThickness="1"
        CornerRadius="5"
        BorderBrush="{StaticResource ExpanderHeaderBorderGradient}"
        Background="White"
        Margin="0 0 8 8">

        <Stackpanel> ... </Stackpanel>
     </Border>
</UserControl>

I cannot find any combination of border, background fill and transparency setting which would render the black area transparent. Any idea?

Answer 1

Your Popup allows transparency but is not using a transparent background. Change to:

var p = new Popup {
     PlacementTarget = target,
     IsOpen = true,
     StaysOpen = false,
     AllowsTransparency = true,
     Background = Brushes.Transparent
};

That should do the trick. Also, the reason the black bit is wider on the right and bottom is due to the Margin on your Border, which is actually kind of useless. I suggest you remove that too.

Answer 2

I just ran into the same problem. The problem appers to be, that when the Popup's IsOpen Property is to True too early, the transparency is not working properly.

My Solution was to move setting IsOpen to true from the contruction to the Loaded event of the Popup.

myPopup.Loaded += (sender, args) => { myPopup.IsOpen = true; };

Answer 3

This is caused by the Background property of MapLocationInformation. Just set the Background of your UserControl to null and AllowsTransparency to True to fix it, like this:

<UserControl ...
 mc:Ignorable="d" 
 Background="{x:Null}"
 AllowsTransparency="True"