如何在WPF菜单控件上设置前景色和背景色？

Question

我已经在WPF工作了很长一段时间,但有一些关于造型的基本知识,我只是没有得到.

如何设置Menu控件的前景色和背景色？我从这开始:

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

前景色显然是由它继承的MenuItem,但背景却没有.下一次尝试:

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

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

我错过了什么？

Answer 1

您将需要了解有关WPF(XAML)中的模板和样式的更多信息.在XAML中,控件的外观和控件的操作方式是两个完全不同的东西.在您的示例中,您可能具有Foreground和Background属性,但控件的样式\模板不使用这些属性来显示控件.

阅读http://wpftutorial.net/Templates.html和http://wpftutorial.net/TemplatesStyles.html,它们将为您提供良好而快速的概述.有关更深入的了解,请阅读:http://msdn.microsoft.com/en-us/library/ee230084.aspx

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

提示:如果您使用的是Visual Studio 2012,请确保" 文档大纲"窗口窗格始终可见.这对于编辑XAML UI非常方便.我的默认是在该计划的左侧崩溃.默认情况下,此窗格在Expression Blend中可见.

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

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

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

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

如果搜索SubMenuBackgroundBrush,可以看到它在名为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}to {TemplateBinding Foreground}.

运行程序时,您将看到弹出窗口的主背景已更改,但显示图标的区域未更改.这些也是<Rectangle Fill="弹出控件中的所有项目.改变那些.对Rectangle的最后一个引用看起来就像拆分图标和文本的行,你可能无法改变它.

享受精彩的模板世界.它看起来很混乱,喜欢很多工作.它是.但是当你掌握它的时候,这是一个非常酷的系统.在掌握了它之后很难回到任何其他UI系统.