WPF 弹出 UI 显示黑色答案

【问题标题】：WPF Popup UI showing blackWPF 弹出 UI 显示黑色
【发布时间】：2011-04-23 21:12:02
【问题描述】：

我正在使用 WPF Popup 控件，它的背景显示为黑色。我在其中放了一个 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>

如何使 Popup 上的背景透明（或任何颜色）？

【问题讨论】：

请发布一些示例 XAML。您所描述的不是默认行为，但是如果不知道您如何定义它，就很难说得更多。
@PN 顺便说一句——如果您添加代码，请选择（突出显示）它，然后选择编辑文本框上方的“代码”按钮。这将格式化代码，使其更具可读性。
如果将 CircularProgressBar 控件直接添加到窗口（作为测试）会发生什么。黑色背景可能来自那里吗？

标签： wpf user-interface popup

【解决方案1】：

您需要将AllowsTransparency="True" Popup 属性设置为 True

这是一个例子：

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

和点击处理程序

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

【讨论】：

嗨 Svetlozar：我试过这个，但它不起作用。对我来说，虽然我在 Popup 之外没有 StackPanel，但我在 Popup 中有一个 StackPanel，它拥有几个控制权。
伙计，你是金子。为什么它有这种奇怪的默认行为？我失去了勇气试图了解正在发生的事情......

【解决方案2】：

Popup 或 Window 的基色是黑色。 Window 很少看到它，因为 Window 具有 Background 属性并且默认为纯色，但如果将 Window.Background 设置为 Transparent，它也将是黑色的。但是Popup 没有Background 属性，所以，原谅双关语，这个问题“弹出”。

如果你想让Popup透明，你需要设置AllowsTransparency="True"。但是，如果您希望 Popup 成为纯色，最简单的方法是使 Popup 的子代成为支持 Panel 属性的 Panel 并将该属性设置为您想要的颜色，然后首先将Panel 的子项设置为您打算用于Popup 的内容。我建议Grid，因为它不会影响Popup 的布局。它的唯一效果是为您提供所需的背景颜色。

【讨论】：

我希望我早点使用正确的搜索词。我一直认为是弹出窗口中的东西导致了我的黑色背景。一旦我最终正确搜索并登陆此页面，这绝对是答案

【解决方案3】：

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

例如：

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

【讨论】：

【解决方案4】：

另一个可能的原因：

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

切换顺序修复它。

【讨论】：

【解决方案5】：

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

这里是一个快速-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>

所以，你可以做两个测试来确定发生了什么：

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

【讨论】：

【解决方案6】：

根据这篇文章Why is my WPF Popup black and how do I get it positioned properly? ：
您需要将 Popup 上的 AllowsTransparency 属性设置为 True，并设置 PlacementTarget 和 Placement 属性来控制 Popup 打开的位置。

根据相关代码：

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

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

嗨，Svetlozar：我试过了，但确实如此不行。对我来说，虽然我没有 StackPanel 在弹出窗口之外，但我在弹出窗口中有一个 StackPanel 拥有几个控制权

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

【讨论】：

【解决方案7】：

问题是网格没有方向将其置于弹出窗口之外。去掉弹窗内所有控件的VerticalAlignment和horizontalAlignment，就可以正常工作了

【讨论】：

【解决方案8】：

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

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

【讨论】：

@WoIIe，感谢您的反馈。我很高兴知道我的错误是什么。它对我有用，所以我想念什么？
我很抱歉写了这么粗鲁的评论。我只是不认为您的回答可以以任何方式帮助 OP 解决他的问题。一个原因是 InitializeComponent()-Method 自动生成到构造函数中，并且对于 Control 或 FrameWorkelement 在 WPF 应用程序中工作是完全必要的。绝对没有理由删除这一行。您还编写了代码，该代码显示了Popup-control 的自定义实现，而 OP 并非如此。由于他使用普通的Popup 类，所以他不可能忘记他的Popup 的this.InializeComponent() 方法。
@WoIIe，是的，我完全同意。