如何在WPF菜单控件上设置前景色和背景色? [英] 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属性，但是控件的style \ template不能将这些属性用于控件的显示.

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\template of the control my not utilize these properties for the display of the control.

阅读 http://wpftutorial.net/Templates.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\template 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，请确保您的 Document Outline 窗口窗格始终可见.这对于编辑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菜单控件上设置前景色和背景色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！