WPF 弹出式 UI 显示为黑色

WPF Popup UI showing black

提问by P N

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.

我正在使用 WPF 弹出控件，它显示背景为黑色。我在其中放置了一个带有 Background="Transparent" 的 StackPanel，但这无济于事。

<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)?

有人可以告诉我如何使 Popup 的背景透明（或任何颜色）？

回答by Svetlozar Angelov

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

您需要将AllowsTransparency="True"Popup 属性设置为 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;
}

回答by Rick Sladkey

The base color of a Popup, or a Windowfor that matter, is black. You rarely see it for a Windowbecause Windowhas a Backgroundproperty and it defaults to a solid color, but if you set Window.Backgroundto Transparentit will also be black. But Popupdoesn't have a Backgroundproperty and so, pardon the pun, this problem "pops up".

aPopup或 a 的基色Window是黑色。你很少看到它，Window因为它 Window有一个Background属性，它默认为纯色，但如果你设置Window.Background为Transparent它也会是黑色的。但是Popup没有Background属性，所以，请原谅双关语，这个问题“突然出现”。

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

如果您希望Popup透明，则需要设置AllowsTransparency="True". 但是，如果您希望Popupa 成为纯色，最简单的方法是制作支持该属性的Popupa的子项并将Panel该Background属性设置为您想要的颜色，然后将 the 的子项设置为Panel您想要的内容该Popup摆在首位。我建议，Grid因为它不会影响您的Popup. 它的唯一效果是为您提供所需的背景颜色。

回答by Zengineer

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.

确保允许透明度设置为 true，垂直和水平对齐居中，高度和宽度设置为自动。

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>

回答by Rob Relyea

Another possible cause:

另一个可能的原因：

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

• 在 AllowTransparency="True" 之前的标记中使用 IsOpen="True"

Switching the order fixes it.

切换顺序修复它。

回答by Wonko the Sane

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...).

我的猜测是 CircularProgressBar 实际上导致了黑色背景。可能发生这种情况的唯一另一种方式是，如果在其中一个控件（弹出窗口或 StackPanel 或...）上设置了样式或其他内容。

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:

这是一个快速-n-dirty 示例，它在选中复选框时在弹出窗口中显示一个 TextBlock。选择的颜色只是为了确保事物在视觉上脱颖而出：

<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.

1. 将 CircularProgressBar 替换为简单的 TextBlock 或其他未应用样式的控件。
2. 将 CircularProgressBar 作为独立控件放在窗口的某个位置，或者放在其他空白的测试窗口上。

回答by publicgk

As per this article Why is my WPF Popup black and how do I get it positioned properly? :
You need to set the AllowsTransparency property on the Popup to True, and set the PlacementTarget and Placement properties to control the position the Popup opens in.

根据这篇文章为什么我的 WPF 弹出窗口是黑色的，如何正确定位它？ ：
需要将 Popup 上的 AllowsTransparency 属性设置为 True，并设置 PlacementTarget 和 Placement 属性来控制 Popup 打开的位置。

As per the code in question:

根据相关代码：

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

the PlacementTarget is set to parentStackPanel, whereas the questioner has mentioned:

PlacementTarget 设置为 parentStackPanel，而提问者提到：

Hi Svetlozar: I tried this but it does not work. For me though I do nothave a StackPanel outsidethe Popup, but I have a StackPanel within the Popup that holds a couple of control on it

嗨 Svetlozar：我试过这个，但它不起作用。对我来说，虽然我在 Popup之外没有StackPanel ，但我在 Popup 中有一个 StackPanel，它拥有几个控制权

The problem could be that Popup could not findthe PlacementTarget 'parentStackPanel' because it does not exist.

问题可能是 Popup找不到PlacementTarget 'parentStackPanel'，因为它不存在。

回答by Johnny DropTables

The problem is that the grid is not orientation places it outside of the popup. Remove VerticalAlignment and horizontalAlignment from all the controls inside the popup, and it will work correctly

问题是网格不是方向将它放在弹出窗口之外。从弹出框内的所有控件中删除 VerticalAlignment 和 horizo​​ntalAlignment，它会正常工作

回答by Tar

Quite old, but may help someone: Add InitializeComponent();in the constructor, it solved my problem:

很旧，但可能对某人有所帮助：添加InitializeComponent();构造函数，它解决了我的问题：

class MyPopupClass : Popup {
    /*
    ...
    */
    public MyPopupClass () {
        InitializeComponent();
        /*
        ...
        */
    }
    /*
    ...
    */
}