WPF Popup UI showing black

Question

I am using a WPF Popup control, and it is showing the background as black. I put a StackPanel inside it with Background="Transparent", but that does not help.

<Popup PlacementTarget="{Binding ElementName=parentStackPanel}" Placement="Center"
        IsOpen="False" Name="m_popWaitNotifier" PopupAnimation="None" 
        AllowsTransparency="False">
    <StackPanel Orientation="Vertical" Background="Transparent">
        <uc:CircularProgressBar x:Name="CB" StartupDelay="0"
                                            RotationsPerMinute="20"
                                            Height="25" Foreground="White"
                                            Margin="12"/>
    </StackPanel>
</Popup>

How does one make the background on Popup transparent (or any color)?

Answer 1

You need to set the AllowsTransparency="True" Popup Property to True

Here is an example:

<Grid>
    <StackPanel>
    <Button Click="Button_Click" Width="100" Height="20" Content="Click" />
        <Popup x:Name="popup" Width="100" Height="100" AllowsTransparency="True">
            <Grid Background="Transparent">
                <TextBlock Text="Some Text" />
            </Grid>
        </Popup>
    </StackPanel>
</Grid>

and the click handler

private void Button_Click(object sender, RoutedEventArgs e)
{
    popup.Visibility = System.Windows.Visibility.Visible;
    popup.IsOpen = true;
}

Answer 2

The base color of a Popup, or a Window for that matter, is black. You rarely see it for a Window because Window has a Background property and it defaults to a solid color, but if you set Window.Background to Transparent it will also be black. But Popup doesn't have a Background property and so, pardon the pun, this problem "pops up".

If you want the Popup to be transparent, you need to set AllowsTransparency="True". However, if you want the Popup to be a solid color, the simplest approach is to make the child of the Popup a Panel that supports the Background property and set that property to the color you desire and then set the child of the Panel to be the content you intended for the Popup in the first place. I suggest Grid as it won't affect the layout of your Popup. It's only effect will be to give you the background color you desire.

Answer 3

Make sure that the allow transparency is set to true, vertical and horizontal alignments are centered, and the height and width are set to Auto.

For example:

<Popup Name="popup1" Placement="Top" PlacementTarget="{Binding ElementName=button2}" AllowsTransparency="True" Height="Auto" Width="Auto" Panel.ZIndex="1" HorizontalOffset="-5" HorizontalAlignment="Center" VerticalAlignment="Center">

<StackPanel Height="92" HorizontalAlignment="Left" Margin="93,522,0,0" Name="stackPanelPop" VerticalAlignment="Top" Width="147">
</StackPanel>

</Popup>

Answer 4

Another possible cause:

• using IsOpen="True" in markup before AllowTransparency="True"

Switching the order fixes it.