Christian Studer
Christian Studer

Reputation: 25607

WPF Popup has a black border instead of a transparent one

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

Popup with 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?

Upvotes: 8

Views: 9111

Answers (5)

StayOnTarget
StayOnTarget

Reputation: 13008

In my case all I needed to add was AllowsTransparency = true for the Popup. I have a feeling Kent's answer is correct, and the inclusion of a nonexistent Background property there is not relevant because it is not needed.

Upvotes: 1

oleh
oleh

Reputation: 960

@NikoR is right. But it is just the order of the properties.

You must set AllowsTransparency before IsOpen:

var popup = new Popup
{
  AllowsTransparency = true,
  IsOpen = true
};

Upvotes: 1

NikoR
NikoR

Reputation: 548

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

Upvotes: 3

Yogesh
Yogesh

Reputation: 14608

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"

Upvotes: 2

Kent Boogaart
Kent Boogaart

Reputation: 178660

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.

Upvotes: 1

Related Questions