如何在 WPF Menu 控件上设置前景色和背景色? [英] How to set foreground and background colors on a WPF Menu control?

问题描述

我已经在 WPF 中工作了很长一段时间，但有一些关于样式的基本知识，我就是不明白.

I've been working in WPF for quite a while, but there's something basic about styling that I just don't get.

如何为 Menu 控件设置前景色和背景色?我从这个开始:

How can I set the foreground and background colors for a Menu control? I started with this:

    <Menu IsMainMenu="True" Background="#FF3A3A3A" Foreground="White">
        <MenuItem Header="_File">
            <MenuItem Header="_Exit">
            </MenuItem>
        </MenuItem>
    </Menu>

前景色显然是由 MenuItem 继承的，但背景不是.下一次尝试:

The foreground color is apparently inherited by the MenuItem, but the background is not. Next attempt:

    <Menu IsMainMenu="True" Background="#FF3A3A3A" Foreground="White">
        <MenuItem Background="#FF3A3A3A" Header="_File">
            <MenuItem Header="_Exit">
            </MenuItem>
        </MenuItem>
    </Menu>

现在激活菜单时突出显示/叠加颜色不正确，而且我没有看到设置它们的明显属性.此外，菜单弹出窗口有一个宽的白色边框，我也不知道如何更改它的颜色(或大小).

Now the highlight/overlay colors aren't right when the menu is activated, and I don't see an obvious property to set them. In addition, the menu popup has a wide, white border, and I don't see how to change it's color (or size), either.

我错过了什么?

推荐答案

您将希望了解有关 WPF(实际上是 XAML)中的模板和样式的更多信息.在 XAML 中，控件的外观和控件的运行方式是完全不同的两件事.在您的示例中，您可能有一个 Foreground 和 Background 属性，但控件的样式模板可能不会利用这些属性来显示控件.

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. In your example, you may have a Foreground and Background property, but the style emplate of the control my not utilize these properties for the display of the control.

阅读 http://wpftutorial.net/Templates.html 和 http://wpftutorial.net/TemplatesStyles.html，他们会给你一个很好的快速概览.如需更深入的了解，请阅读:http://msdn.microsoft.com/en-us/library/ee230084.aspx

Read http://wpftutorial.net/Templates.html and http://wpftutorial.net/TemplatesStyles.html, they will give you a good and quick overview. For a more in depth look, read this: http://msdn.microsoft.com/en-us/library/ee230084.aspx

如果您使用 Visual Studio 2012 来编辑 WPF UI，则可以轻松创建菜单控件正在使用的样式模板的副本，然后对其进行编辑.如果您使用的是 Visual Studio 2010，则应下载并安装(可能免费也可能不免费)Expression Blend 以编辑您的 XAML UI.

If you are using Visual Studio 2012 to edit your WPF UI, you can easily create a copy of the style emplate the menu control is using, and then edit it. If you are using Visual Studio 2010, you should download and install (it may or may not be free) Expression Blend to edit your XAML UI.

提示:如果您使用的是 Visual Studio 2012，请确保您的文档大纲窗格始终可见.这对于编辑 XAML UI 非常方便.我的默认折叠在程序的左侧.默认情况下，此窗格在 Expression Blend 中可见.

Tip: If you are using Visual Studio 2012, make sure your Document Outline window pane is visible all the time. This is very handy for editing a XAML UI. Mine defaulted to being collapsed on the left side of the program. This pane is visible in Expression Blend by default.

在文档大纲中找到 MenuItem 控件.右键单击它并选择编辑模板->编辑副本...

Find the MenuItem control in the Document Outline. Right-click on it and select Edit Template->Edit a Copy...

这将创建菜单项现有外观的副本供您编辑.执行此操作时，您将处于该模板的编辑模式，要弹出"该模式，请单击文档大纲"窗口左上角的小图标.

This will create a copy of the existing look-and-feel of the menu item for you to edit. When you do this, you will be in editing mode of that template, to "pop out" of that mode, click on the little icon on the top left of the Document Outline window.

编辑模板时，可以看到模板的布局和设计.当菜单项作为下拉部分时，它实际上显示为一个弹出菜单(右键菜单).翻看那个模板，我立刻想到的是这个名为 SubMenuBackgroundBrush 的颜色资源:

When editing the template, you can see the layout and design of the template. When a menu item is being as the drop-down part, it's really displayed like a Popup menu (right click menu). Looking through that template, what pops out at me right away is this color resource named SubMenuBackgroundBrush:

<SolidColorBrush x:Key="SubMenuBackgroundBrush" Color="#FFF5F5F5"/>

如果您搜索 SubMenuBackgroundBrush，您可以看到它用于名为 PART_Popup 的部件:

If you do a search for SubMenuBackgroundBrush you can see that it is used on a part named PART_Popup:

<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">
    <Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent">
        <Border x:Name="SubMenuBorder" BorderBrush="#FF959595" BorderThickness="1" Background="{StaticResource SubMenuBackgroundBrush}">
            <ScrollViewer x:Name="SubMenuScrollViewer" Margin="1,0" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
                <Grid RenderOptions.ClearTypeHint="Enabled">
                    <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
                        <Rectangle x:Name="OpaqueRect" Fill="{StaticResource SubMenuBackgroundBrush}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
                    </Canvas>
                    <Rectangle Fill="#F1F1F1" HorizontalAlignment="Left" Margin="1,2" RadiusY="2" RadiusX="2" Width="28"/>
                    <Rectangle Fill="#E2E3E3" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/>
                    <Rectangle Fill="White" HorizontalAlignment="Left" Margin="30,2,0,2" Width="1"/>
                    <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="true" Margin="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
                </Grid>
            </ScrollViewer>
        </Border>
    </Themes:SystemDropShadowChrome>
</Popup>

这是当您右键单击显示菜单或下拉菜单的内容时看到的弹出窗口.将引用从:{StaticResource SubMenuBackgroundBrush} 更改为 {TemplateBinding Foreground}.

This is the popup that you see when you right-click on something that shows a menu, or a dropdown menu. Change the references from: {StaticResource SubMenuBackgroundBrush} to {TemplateBinding Foreground}.

当您运行程序时，您会看到弹出窗口的主背景发生了变化，但显示图标的区域没有发生变化.这些也是弹出控件中的所有 <Rectangle Fill=" 项目.也更改它们.对 Rectangle 的最后引用看起来像是分割图标和文本的线，您可能不知道该怎么做改变它.

When you run the program, you'll see that the main background of the popup has changed, but the area where the icon is displayed has not. These are all the <Rectangle Fill=" items in the popup control too. Change those also. The last reference to Rectangle looks like its the line splitting the icon and the text, you may not what to change that.

享受美妙的模板世界.它看起来很混乱，而且需要做很多工作.它是.但是当你掌握了它的窍门时，它是一个非常酷的系统.掌握了窍门后，很难再回到任何其他 UI 系统.

Enjoy the wonderful world of templates. It looks confusing and like a lot of work. It is. But when you get the hang of it, it's a very cool system. It's hard to go back to any other UI system after you get the hang of it.

这篇关于如何在 WPF Menu 控件上设置前景色和背景色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！