Can't change background color of WPF menu

Question

I've tried changing multiple things, but I can't get the color behind the menuitems to change. I would expect that some XAML element is generated above the MenuItem, but I'm not able to find anything. My apologies beforehand if something like this has been answered before, but I really can't find a thing about it.

<Grid>
    <DockPanel Margin="0,0,0,715" >
        <Menu DockPanel.Dock="Top" Background="#222222" Height="20" VerticalAlignment="Top">

            <MenuItem Header="File" Width="80" Background="#333333" Foreground="White">
                <MenuItem Header="_New World" Background="#333333" />
                <MenuItem Header="_Open World" Background="#333333" />
                <MenuItem Header="_Save World" Background="#333333" />
                <Separator/>
                <MenuItem Header="_Close World" Background="#333333" />
                <MenuItem Header="Exit" Background="#333333" />
            </MenuItem>
            <MenuItem Header="Edit" Width="80" Background="#333333" Foreground="White">

            </MenuItem>
        </Menu>
        <StackPanel Background="AliceBlue"></StackPanel>

        <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="34" Height="34"/>
    </DockPanel>


</Grid>

    <Application.Resources>

    <Style TargetType="{x:Type StackPanel}"/>
    <Style TargetType="{x:Type Menu}">
        <Setter Property="Background" Value="#222222"></Setter>
        <Setter Property="VerticalAlignment" Value="Top"></Setter>
        <Setter Property="Height" Value="20"/>
        <Setter Property="DockPanel.Dock" Value="Top"/>
    </Style>
    <Style TargetType="{x:Type Grid}"/>

</Application.Resources>

Answer 1

Edited Answer: Okay, so I got your point now. Actually if you see the structure of the menuitem(I used snoop application), you will see actually its a pop-up when you open a menuitem, so you need to set the template of menuitem as per your requirement. I have set the style property of menuitem as below:

<Style x:Key="MenuItemBaseStyle" TargetType="{x:Type MenuItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type MenuItem}">
                <Grid SnapsToDevicePixels="true">
                    <DockPanel>
                        <ContentPresenter x:Name="Icon" ContentSource="Icon" Margin="4,0,6,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
                        <Path x:Name="GlyphPanel" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="7,0,0,0" Visibility="Collapsed" VerticalAlignment="Center"/>
                        <ContentPresenter x:Name="content" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </DockPanel>
                    <Popup x:Name="PART_Popup" AllowsTransparency="true" Focusable="false" HorizontalOffset="1" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom" VerticalOffset="-1">

                        <Border BorderThickness="2" BorderBrush="Black" Background="Black">
                            <ScrollViewer x:Name="SubMenuScrollViewer" CanContentScroll="true" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
                                <Grid RenderOptions.ClearTypeHint="Enabled">
                                    <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="true" Margin="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
                                </Grid>
                            </ScrollViewer>
                        </Border>
                    </Popup>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="TextBlock.Foreground" Value="Blue" TargetName="content"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Just implement this style in your menuitem:

<MenuItem Header="File" Width="80" Background="Black" Foreground="White" Style="{StaticResource MenuItemBaseStyle}">

Answer 2

You need to modify the ControlTemplate for the MenuItem with a Role of TopLevelHeader. Set the Background property of the Border element named "SubMenuBorder":

<Style TargetType="{x:Type MenuItem}">
    <Style.Triggers>
        <Trigger Property="MenuItem.Role" Value="TopLevelHeader">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type MenuItem}">
                        <Border x:Name="templateRoot" SnapsToDevicePixels="true"
                                        BorderThickness="{TemplateBinding Control.BorderThickness}"
                                        Background="{TemplateBinding Control.Background}"
                                        BorderBrush="{TemplateBinding Control.BorderBrush}">
                            <Grid VerticalAlignment="Center">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <ContentPresenter x:Name="Icon" ContentSource="Icon" 
                                                          SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" VerticalAlignment="Center"
                                                          HorizontalAlignment="Center" Width="16" Height="16" Margin="3"/>
                                <Path x:Name="GlyphPanel" Data="F1 M 10.0,1.2 L 4.7,9.1 L 4.5,9.1 L 0,5.2 L 1.3,3.5 L 4.3,6.1L 8.3,0 L 10.0,1.2 Z" FlowDirection="LeftToRight" Margin="3"
                                              Visibility="Collapsed" VerticalAlignment="Center" Fill="{TemplateBinding Control.Foreground}"/>
                                <ContentPresenter Grid.Column="1" ContentSource="Header" RecognizesAccessKey="true"
                                                          Margin="{TemplateBinding Control.Padding}"
                                                          SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"/>
                                <Popup x:Name="PART_Popup" AllowsTransparency="true" Focusable="false"
                                               PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}"
                                               Placement="Bottom"
                                               IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
                                               PlacementTarget="{Binding ElementName=templateRoot}">
                                    <Border x:Name="SubMenuBorder" Background="Red" BorderBrush="Red"
                                                    BorderThickness="1" Padding="2">
                                        <ScrollViewer x:Name="SubMenuScrollViewer"
                                                             Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
                                            <Grid RenderOptions.ClearTypeHint="Enabled">
                                                <Canvas Height="0" Width="0" HorizontalAlignment="Left" VerticalAlignment="Top">
                                                    <Rectangle Name="OpaqueRect" Height="{Binding ElementName=SubMenuBorder, Path=ActualHeight}"
                                                                         Width="{Binding ElementName=SubMenuBorder, Path=ActualWidth}"
                                                                         Fill="{Binding ElementName=SubMenuBorder, Path=Background}"/>
                                                </Canvas>
                                                <Rectangle HorizontalAlignment="Left" Width="1" Margin="29,2,0,2" Fill="#FFD7D7D7"/>
                                                <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle"
                                                                        KeyboardNavigation.TabNavigation="Cycle" Grid.IsSharedSizeScope="true"
                                                                        SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"/>
                                            </Grid>
                                        </ScrollViewer>
                                    </Border>
                                </Popup>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="MenuItem.IsSuspendingPopupAnimation" Value="true">
                                <Setter TargetName="PART_Popup" Property="Popup.PopupAnimation" Value="None"/>
                            </Trigger>
                            <Trigger Value="{x:Null}" Property="MenuItem.Icon">
                                <Setter TargetName="Icon" Property="UIElement.Visibility" Value="Collapsed"/>
                            </Trigger>
                            <Trigger Property="MenuItem.IsChecked" Value="true">
                                <Setter TargetName="GlyphPanel" Property="UIElement.Visibility" Value="Visible"/>
                                <Setter TargetName="Icon" Property="UIElement.Visibility" Value="Collapsed"/>
                            </Trigger>
                            <Trigger Property="MenuItem.IsHighlighted" Value="true">
                                <Setter TargetName="templateRoot" Value="#3D26A0DA" Property="Border.Background"/>
                                <Setter TargetName="templateRoot" Value="#FF26A0DA" Property="Border.BorderBrush"/>
                            </Trigger>
                            <Trigger Property="UIElement.IsEnabled" Value="false">
                                <Setter TargetName="templateRoot" Value="#FF707070" Property="TextElement.Foreground"/>
                                <Setter TargetName="GlyphPanel" Value="#FF707070" Property="Shape.Fill"/>
                            </Trigger>
                            <Trigger SourceName="SubMenuScrollViewer" Property="ScrollViewer.CanContentScroll" Value="false">
                                <Setter TargetName="OpaqueRect" Value="{Binding ElementName=SubMenuScrollViewer, Path=VerticalOffset}"
                                                Property="Canvas.Top"/>
                                <Setter TargetName="OpaqueRect" Value="{Binding ElementName=SubMenuScrollViewer, Path=HorizontalOffset}"
                                                Property="Canvas.Left"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

These values are hardcoded in the default template so you can't change them by simply setting some properties. You need to define a custom template.

Answer 3

You will want to learn more about templates and styles in WPF (XAML really). In XAML, how a control looks and how a control operates are two completely different things.

Read detailed answer HERE