How does one make the submenu popup holding box/border to be transparent?

I have styled menu and submenus. When one selects a menu item that has submenus, one sees a grey box around the styled selections. How can I style that?

At looking at the styling for a menu Menu Styles and Templates I have tried multiple style overrides for the controls Border, ScrollViewer and Stackpanel. I attempted to override colors.

<Menu.Resources>
    <Style TargetType="Popup"><Setter Property="AllowsTransparency" Value="True" /></Style>

    <Style TargetType="ScrollViewer"><Setter Property="Background"  Value="Green" /></Style>
    <Style TargetType="StackPanel"><Setter Property="Background"    Value="Firebrick"/></Style>
    <Style TargetType="Border"><Setter Property="Background"        Value="Firebrick" /></Style>   

    <SolidColorBrush x:Key="MenuPopuBrush"      Color="Firebrick" />
    <SolidColorBrush x:Key=" BorderMediumColor" Color="Firebrick" />          
</Menu.Resources>

Minimal Example

<Menu Foreground="Transparent">
   <MenuItem Header="Item 1">
        <MenuItem Header="Sub 1a" />
        <MenuItem Header="Sub 1b"/>
   </MenuItem>
</Menu>

In your example just change the popup color to red or transparent.

CodePudding user response：

Not sure if it is the only way, but you could override the ControlTemplate for the MenuItem. Basic Example:

        <Menu>
        <MenuItem Header="Item 1">
            <MenuItem.Template>
                <ControlTemplate TargetType="MenuItem">
                    <Border Name="Border" >
                        <Grid>
                            <ContentPresenter Margin="6,3,6,3" ContentSource="Header" RecognizesAccessKey="True" />
                            <Popup Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsSubmenuOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Fade">
                                <Border Name="SubmenuBorder" SnapsToDevicePixels="True" Background="LightGray" BorderBrush="Transparent" BorderThickness="1" >
                                    <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" />
                                </Border>
                            </Popup>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSuspendingPopupAnimation" Value="true">
                            <Setter TargetName="Popup" Property="PopupAnimation" Value="None"/>
                        </Trigger>
                        <Trigger Property="IsHighlighted" Value="true">
                            <Setter TargetName="Border" Property="Background" Value="LightGray"/>
                            <Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
                            <Setter Property="Foreground" Value="Firebrick" />
                        </Trigger>
                        <Trigger  Property="IsHighlighted" Value="False">
                            <Setter Property="Foreground" Value="Black" />
                        </Trigger>
                        <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
                            <Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="0,0,4,4"/>
                            <Setter TargetName="SubmenuBorder" Property="Padding" Value="0,0,0,3"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" Value="DarkGray"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </MenuItem.Template>
            <MenuItem Header="Sub 1a" />
            <MenuItem Header="Sub 1b" />
        </MenuItem>
    </Menu>

You can now access the component parts and style individually.