Не могу изменить цвет фона меню WPF

Question

Я пытался изменить несколько вещей, но я не могу изменить цвет элементов меню. Я ожидаю, что какой-то элемент XAML генерируется над MenuItem, но я не могу ничего найти. Заранее извиняюсь, если на что-то подобное уже было дано ответ, но я действительно не могу найти в этом ничего.

<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

Отредактированный ответ: Хорошо, теперь я понял вашу точку зрения. На самом деле, если вы видите структуру элемента меню (я использовал приложение snoop), вы увидите его всплывающее окно при открытии элемента меню, поэтому вам нужно установить шаблон элемента меню в соответствии с вашими требованиями. Я установил свойство стиля menuitem как показано ниже:

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

Просто реализуйте этот стиль в вашем пункте меню:

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

Answer 2

Вам необходимо изменить ControlTemplate для MenuItem с Role из TopLevelHeader. Установите свойство Background элемента Border с именем «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>

Эти значения жестко заданы в шаблоне по умолчанию, поэтому вы не можете изменить их, просто установив некоторые свойства. Вам необходимо определить пользовательский шаблон.

Answer 3

Вы захотите узнать больше о шаблонах и стилях в WPF (действительно XAML). В XAML то, как выглядит элемент управления и как он работает, это две совершенно разные вещи.

Читать подробный ответ ЗДЕСЬ