WPF Popup UI показывает черный

Question

Я использую всплывающий элемент управления WPF, и он показывает черный фон. Я поместил в нее StackPanel с Background = "Transparent", но это не помогает.

<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 прозрачным (или любого цвета)?

Answer 1

Для свойства всплывающего окна AllowsTransparency="True" необходимо установить значение 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;
}

Answer 2

Основной цвет Popup или Window в этом отношении - черный. Вы редко видите его для Window, потому что Window имеет свойство Background и по умолчанию имеет сплошной цвет, но если вы установите Window.Background в Transparent, оно также будет черным. Но Popup не имеет свойства Background и, извините за каламбур, эта проблема "всплывает".

Если вы хотите, чтобы Popup был прозрачным, вам нужно установить AllowsTransparency="True". Однако, если вы хотите, чтобы Popup был сплошным цветом, самый простой подход - сделать его потомком Popup a Panel, который поддерживает свойство Background, и установить для этого свойства желаемый цвет, а затем установите дочерний элемент Panel в качестве содержимого, которое вы предназначали для Popup. Я предлагаю Grid, так как это не повлияет на макет вашего Popup. Это единственный эффект, который даст вам желаемый цвет фона.

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

Answer 4

Другая возможная причина:

• с использованием IsOpen = "True" в разметке перед AllowTransparency = "True"

При изменении порядка это исправляется.

Answer 5

Я предполагаю, что CircularProgressBar на самом деле вызывает черный фон. Единственный другой способ, которым это может произойти, - это если в одном из элементов управления (Popup или StackPanel или ...) был установлен стиль или что-то еще.

Вот пример quick-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>

Итак, вы можете провести два теста, чтобы определить, что происходит:

1. Замените CircularProgressBar простым TextBlock или другим элементом управления, к которому не применен стиль.
2. Поместите CircularProgressBar в качестве отдельного элемента управления где-нибудь в вашем окне или в другом пустом тестовом окне.

Answer 6

Согласно этой статье Почему мой WPF Popup черный и как мне правильно расположить его?:
Необходимо установить для свойства AllowsTransparency всплывающего окна значение True и установить свойства PlacementTarget и Placement для управления положением, в котором открывается всплывающее окно.

Согласно рассматриваемому коду:

<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, тогда как спрашивающий упомянул:

Привет, Светлозар: Я пробовал это, но это не работает.Для меня, хотя я не не имею StackPanel вне всплывающего окна, но у меня есть StackPanel внутри всплывающего окна, которая имеет пару элементов управления

Проблема может заключаться в том, что Popup не может найти PlacementTarget 'parentStackPanel', поскольку он не существует.

Answer 7

Довольно старый, но может кому-то помочь: добавьте InitializeComponent(); в конструктор, это решило мою проблему:

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

Answer 8

Проблема в том, что сетка не ориентирована и размещает ее вне всплывающего окна.Удалите VerticalAlignment и horizontalAlignment из всех элементов управления внутри всплывающего окна, и оно будет работать правильно