将组合框的弹出背景设置为透明

Question

我想让我的下拉10px落后于组合框的切换按钮，所以我制作了以下模板：

<Style  x:Key="StyleComboBox"  TargetType="{x:Type ComboBox}">
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Height" Value="31" />
        <Setter Property="UIElement.SnapsToDevicePixels" Value="True"/>
        <Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
        <Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBox">
                    <Grid Background="Transparent">
                        <ToggleButton
                ClickMode="Press"
                Name="ToggleButton"
                IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                Focusable="False"
                Template="{StaticResource ComboBoxToggleButtonTemplate}"/>
                        <ContentPresenter
                HorizontalAlignment="Left"
                Margin="7,2,25,0"
                Name="ContentSite"
                VerticalAlignment="Center"
                ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}"
                Content="{TemplateBinding ComboBox.SelectionBoxItem}"
                IsHitTestVisible="False"
                            />
                        <TextBox
                Margin="3,3,23,3"
                Visibility="Hidden"
                HorizontalAlignment="Left"
                Name="PART_EditableTextBox"
                Background="Transparent"
                VerticalAlignment="Center"
                Style="{x:Null}"
                IsReadOnly="True"
                Focusable="True"
                xml:space="preserve"
                Template="{StaticResource ComboBoxTextBoxTemplate}"/>
            <Popup
                Placement="Bottom"
                Name="Popup"
                Focusable="False"
                IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}"
                PopupAnimation="Slide"
                >
              <Grid
                  MinWidth="{TemplateBinding FrameworkElement.ActualWidth}"
                  MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}"
                  Background="Yellow"
                  Name="DropDown"
                  SnapsToDevicePixels="True">
                <Border
                    Margin="0,10,0,0"
                    CornerRadius="{StaticResource StyleCornerRadius}"
                    Name="DropDownBorder"
                    Style="{StaticResource StyleBlocs}"
                    Cursor="Hand"
                    Background="{StaticResource CouleurComboBoxDropDownFond}"/>
                <ScrollViewer  Style="{StaticResource FavsScrollViewer}"
                    Margin="4,6,4,6"
                    SnapsToDevicePixels="True">

                  <ItemsPresenter
                      KeyboardNavigation.DirectionalNavigation="Contained" />
                </ScrollViewer>
              </Grid>
            </Popup>
          </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

但我无法设法使弹出窗口透明。正如你在我的代码中看到的那样，我将“DropDown”设置为黄色并且它可以工作：

但是当我把它变成透明时，它会在我的下拉边框后面显示一个黑色背景（位于带有阴影效果的黑色边框上方的图像上）我有这个（我还在下拉边框上放了一个绿色背景，这样你就可以了看到弹出窗口的背景仍为黑色）：

我怎么能把弹出窗口（或使用替代？）透明？

谢谢！

Answer 1

如果您想要透明背景而不是黑色背景，则必须将Popup的AllowsTransparency属性设置为true。

<Popup Placement="Bottom"
       Name="Popup"
       Focusable="False"
       IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}"
       PopupAnimation="Slide"
       AllowsTransparency="True">

       <!-- Content -->

</Popup