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>

Can someone please tell me how to 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

My guess is that the CircularProgressBar is actually causing the Black background. The only other way that this could happen is if there was a Style or something set on one of the controls (Popup or StackPanel or...).

Here is a quick-n-dirty example that shows a TextBlock in a popup when a checkbox is checked. The colors chosen are just to make sure things stand out visually:

<StackPanel x:Name="stackPanelLayout">
    <StackPanel.Background>
        <RadialGradientBrush Center="0.75, 0.75"
                             SpreadMethod="Reflect">
            <GradientStop Color="LightBlue" Offset="0" />
            <GradientStop Color="SeaGreen" Offset="0.5" />
            <GradientStop Color="MidnightBlue" Offset="0.75" />
        </RadialGradientBrush>
    </StackPanel.Background>


    <CheckBox x:Name="chkShowPopup"
              FontSize="20"
              Foreground="White"
              Content="Show Popup" />

    <Popup PlacementTarget="{Binding ElementName=stackPanelLayout}" 
           Placement="Center" 
           IsOpen="{Binding ElementName=chkShowPopup, Path=IsChecked}" 
           Name="m_popWaitNotifier" 
           PopupAnimation="Slide"
           AllowsTransparency="True">
        <StackPanel Orientation="Vertical" Background="Transparent">
            <TextBlock Foreground="White" FontSize="30" FontWeight="Bold" Text="PopUp" />
        </StackPanel>
    </Popup>
</StackPanel>

So, two tests you can do to determine what is happening:

1. Replace the CircularProgressBar with a simple TextBlock or other control that you don't have a Style applied to.
2. Put the CircularProgressBar as a standalone control somewhere on your window, or on an otherwise blank test Window.