SimpleMenu 和 SimpleMenuItem

此页仅适用于 WPF 项目

菜单是一种按层次结构来组织与命令和事件处理程序相关的元素的项目控件。在 Microsoft Expression Blend 中,可以通过双击菜单并在其中绘制元素(如矩形),从而在菜单中放入内容。或者,可以在“对象和时间线”下右键单击菜单,然后单击“添加 SimpleMenuItem”向集合中添加单个项目,或者单击“将 ItemsSource 绑定到数据”从数据源生成“MenuItem”元素的集合。若要添加二级菜单项,请在“对象和时间线”下右键单击一个菜单项,再单击“添加 SimpleMenuItem”,或者从“资源库”Cc295350.0224cabd-5da1-4e01-bddd-4a647401a098(zh-cn,Expression.10).png 的“本地样式”选项卡中添加自定义菜单项。

通过在“对象和时间线”下右键单击菜单项,再单击“编辑文本”,可编辑菜单项的文本;也可以双击菜单项并在其中绘制控件,从而激活菜单项。若要在美工板上查看菜单项的展开子菜单项,可以在“对象和时间线”下右键单击相应的父菜单项,再单击“展开 MenuItem”。

添加两个项和一个分隔符之后的 SimpleMenu 控件的美工板视图

Cc295350.6f7455aa-d548-46a9-b93c-4b1eaefe455d(zh-cn,Expression.10).png

控件模板的分类详解

SimpleMenu 控件模板由下列各项组成:

  • “网格”面板:用于在菜单中存放多个子元素。同时,使用网格也是为了便于应用程序用户界面 (UI) 的设计人员向模板中添加更多元素。

  • Border 元素:使用该元素是因为它包含“BorderThickness”属性,该属性可以用模板绑定到应用此模板的菜单控件的“BorderThickness”属性。

  • StackPanel:该元素包含在 Grid 元素中,用于对菜单项进行布局。默认情况下,StackPanel 的“Orientation”属性设置为“Horizontal”。

SimpleMenuItem 控件模板由下列项组成:

  • “网格”面板:用于在菜单项中存放多个子元素。同时,使用网格也是为了便于设计人员向模板中添加更多元素。“网格”面板采用了大小共享的概念,可令菜单中的所有菜单项均保持同宽。

  • 名为“Icon”的 ContentPresenter 元素:可绑定到应用此模板的菜单项的“Icon”属性。

  • 名为“GlyphPanel”的“网格”面板:用于在菜单项为可选中项时显示复选标记。默认情况下,Glyph 元素处于折叠状态,但可以通过 IsChecked 触发器显示出来。

  • 名为“HeaderHost”的 ContentPresenter 元素:可绑定到应用此模板的菜单项的“Header”属性。在 HeaderHost 元素的“ContentSource”属性中设置此绑定。

  • 名为“ArrowPanel”的“网格”面板:用于提供展开菜单项的方法。默认情况下,ArrowPanel 处于折叠状态,但可以通过 Role = SubmenuHeader 触发器显示出来,该触发器将菜单项标识为子菜单标题(拥有子菜单项的二级或更低级菜单项)。

  • 名为“SubMenuPopup”的 Popup 元素:用于存放任何现有的子菜单项。这些子菜单项放在标记为“项目承载区”的 StackPanel 元素中,以便此菜单项知道其子菜单项所放的位置。如果希望以不同的方式排列这些菜单项,则可以在“对象和时间线”下右键单击“StackPanel”元素,指向“更改布局类型”,然后选择一个面板,从而使用不同的版式面板(如 WrapPanel)。

    对象视图:SimpleMenu 控件(左图)和 SimpleMenuItem 控件(右图)的基本部件(模板)

    Cc295350.3c30a1c8-c055-441a-86ee-6038a02a6087(zh-cn,Expression.10).pngCc295350.2183480e-56b0-4241-a8da-4be1527de135(zh-cn,Expression.10).png

Cc295350.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-cn,Expression.10).gif返回页首

使用的属性触发器

控件模板中的属性触发器可用于使控件响应属性改变。可以在“交互”面板中的“触发器”下单击各项,以查看在激活触发器时更改的属性。例如,在菜单项的模板中,当“IsChecked”属性为“True”时,意味着可以选中应用该模板的菜单项,因此可以通过触发器将 GlyphPanel 元素显示出来。

Cc295350.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-cn,Expression.10).gif返回页首

使用的画笔

SimpleMenu 和 SimpleMenuItem 模板使用 SimpleStyles.xaml 资源字典中的下列画笔资源:

  • 将使用“LightBrush”设置菜单的“Background”属性,并在“IsEnabled”为“False”时使用“DisabledBackgroundBrush”设置该属性。

  • 将使用“NormalBorderBrush”设置菜单的“BorderBrush”属性,并在“IsEnabled”为“False”时使用“DisabledBorderBrush”设置该属性。

  • 将使用“WindowBackgroundBrush”设置 SubMenuBorder 元素的“Background”属性。

  • 将使用“SolidBorderBrush”设置 SubMenuBorder 元素的“BorderBrush”属性。

此外,模板还绑定到系统颜色,从而使控件能够使用系统默认设置。在许多情况下,用户可能希望更改这些画笔,以便创建独具特色的设计。为此,可以编辑那些设置系统颜色的触发器。

Cc295350.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-cn,Expression.10).gif返回页首

最佳实用技巧和设计准则

  • 如果希望设计人员能够向控件中添加更多可视元素,通常可将网格控件用作模板的根元素。Expression Blend 会查找网格控件等版式面板,并且默认将其激活,从而使添加到美工板上的新元素最终成为该版式面板的子元素。

  • 弹出控件呈现在其他所有控件之前。这通常是菜单所必需的。弹出控件本身的逻辑允许从要设置的父控件进行偏移,例如,通过将“Placement”属性设置为“Right”。菜单的展开则是通过与其父控件的绑定加以控制的。要使菜单能够正常展开,必须保留该绑定。

  • 菜单项模板的根“网格”面板采用了大小共享的概念,可令菜单中的所有菜单项均保持同宽。如果希望更改此方式,则需要在“XAML”视图中修改“SharedSizeGroup”属性,这是因为 Expression Blend 不会在“属性”面板中显示此属性。在大多数情况下,并不需要修改“SharedSizeGroup”,因为该属性使菜单能够正确调整大小。可以将元素拖到菜单项模板的根“网格"面板中,而不是对列或其内容进行重新排列,来更改菜单项的外观。这是一种最佳实用技巧。

  • 某些菜单项模板触发器可与名为“Role”的属性配合使用。Role 可根据菜单项在菜单层次结构中的级别进行设置。如果修改菜单项模板,可能需要保留基于角色的触发器。真正的 MenuItem 系统控件所使用的模板比 SimpleMenuItem 要复杂得多。MenuItem 控件模板使用了一种样式,可根据菜单项的角色切换不同的控件模板。SimpleMenuItem 使用单个模板来实现此功能,因此更容易编辑。

  • 若要编辑 SimpleMenuItem 模板,请在“资源”面板中单击“SimpleMenuItem”样式旁边的“编辑资源”按钮。然后,在样式的编辑模式下,右键单击“对象和时间线”下的“Style”,指向“编辑控件部件(模板)”,然后单击“编辑模板”或“编辑副本”。

  • 有关如何将菜单项挂钩到一个命令的信息,请参阅 MSDN 上的Menu 概述(此链接可能指向英文页面)。

Cc295350.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-cn,Expression.10).gif返回页首