无法更改WPF菜单的背景颜色

4

enter image description here

我尝试了多种方法,但无法更改菜单项背后的颜色。我预期在MenuItem上方生成某个XAML元素,但我找不到任何东西。如果之前已经回答过这样的问题,我提前道歉,但我真的找不到相关信息。
<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>
3个回答

3

编辑后的答案: 好的,我现在明白了您的意思。实际上,如果您查看菜单项的结构(我使用了 Snoop 应用程序),您会发现它实际上是一个弹出式菜单,因此您需要根据自己的要求设置菜单项的模板。我已将菜单项的样式属性设置为以下内容:

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

您是否在应用程序中使用任何目标样式来处理菜单项?只需查看我的输出图像即可。我是在基本的WPF应用程序中创建的,并且它不会显示菜单项的任何边框颜色。 - Gaurav Jalan
它确实有作用,只是你的按钮更大,但仍在白色背景上。 - Statharas.903
好的,现在这个问题已经解决了,我已经编辑了我的答案并提供了解决方案。 - Gaurav Jalan

2

您需要修改RoleTopLevelHeaderMenuItemControlTemplate。将名为“SubMenuBorder”的Border元素的Background属性设置为:

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

这些值是硬编码在默认模板中的,所以你不能仅通过设置一些属性来更改它们。您需要定义一个自定义模板。


0

你会想要学习更多关于 WPF(实际上是 XAML)中的模板和样式。在 XAML 中,控件的外观和操作是两个完全不同的事情。

阅读详细答案这里


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接