Set the combobox's popup background transparent

Question

I want to have my dropdown 10px behind the toggle button of the combobox so I made the following template :

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

But I can't manage to make the popup Transparent . As you can see in my code I've put "DropDown" yellow and it works :

But when I put it to transparent it displays a black background behind my dropdownborder (which is on the image above the black border with shadow effects) I have this (I've also put a green background on the dropdownborder so you can see the background of the popup remains Black):

How could I just put the popup (or use an alternative ?) transparent ?

Thank you !

Answer 1

If you want to have a Transparent background instead of a Black one, you'll have to set the AllowsTransparency property of the Popup to true.

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

       <!-- Content -->

</Popup