9.3 Menu控件
使用Menu控件可以为ASP.NET网页开发静态和动态显示的菜单，可以在Menu控件中直接配置其内容，也可以通过将该控件绑定到数据源的方式指定其内容。
9.3.1 添加Menu控件
要使用Menu控件，首先必须向网页中添加Menu控件，步骤如下。
（1）打开要添加Menu控件的设计页面。
（2）将Menu控件从“工具箱”面板拖到网页上，或双击Menu控件将其添加到网页中，如图9-20所示。
图9-20 添加Menu控件到网页中
添加Menu控件后，需要为Menu控件定义菜单项。
9.3.2 为Menu控件定义项
为Menu控件定义项的具体步骤如下。
（1）在添加Menu控件后，切换到“设计”视图中，右键单击Menu控件，在弹出的菜单中选择“显示智能标记”命令，如图9-21所示。
图9-21 选择“显示智能标记”
（2）在“Menu任务”菜单上，单击“编辑菜单项”命令，如图9-22所示。
图9-22 编辑菜单项
（3）在“菜单项编辑器”对话框中，单击“添加根项”按钮，添加一项，如图9-23所示。
图9-23 添加根项
（4）在“属性”区域中，设置Text和NavigateUrl属性及要为该菜单项设置的任何其他属性，如图9-24所示。
图9-24 设置属性
（5）若要添加更多的子项，通过单击“添加子项”命令，向所选项添加子项。
（6）添加了若干个菜单项之后，可以通过选中某项并单击以下按钮来调整其顺序和缩进：“在同级间将项上移”、“在同级间将项下移”、“使所选项成为其父级的同级”、“使所选项成为其前一个同级的子级”或“移除项”。
（7）添加后，可以在浏览器预览效果，如图9-25所示。
图9-25 预览效果
当然，也可以在“设计”视图中，在“Menu任务”菜单上单击“自动套用格式”命令。在“自动套用格式”对话框中，从“选择架构”列表中选择一个架构，该架构对Menu控件产生的效果将显示在“预览”区域中，如图9-26所示。
图9-26 自动套用格式.
单击“确定”按钮应用格式架构，即可实现自动套用格式。
9.3.3 设计动态或静态菜单
Menu控件有两种显示模式：静态模式和动态模式。静态模式表示Menu控件始终是完全展开的。整个结构都是可视的，用户可以单击任何部位。在动态显示的菜单中，只有指定的部分是静态的，并且只有当用户将鼠标指针移到父节点时才会显示其子菜单项。可以在“设计”视图中选择是采用动态菜单还是静态菜单显示Menu控件，如图9-27所示。
图9-27 选择动态或静态
下面是具体的操作步骤。
（1）打开上小节的菜单页面，在“设计”视图中，单击Menu控件的智能标记。
（2）在“Menu任务”菜单上，从“视图”下拉列表中选择“静态”或“动态”命令，模板将切换到所选的视图。
静态菜单：
使用Menu控件的StaticDisplayLevels属性可以控制静态显示行为。StaticDisplayLevels属性指示从根菜单算起，静态显示菜单的级数。例如，如果将StaticDisplayLevels设置为“2”，则菜单将以静态显示方式展开其前2级，如图9-28所示为StaticDisplayLevels为2和1时的界面。如果将该值设置为0或负数，该控件将会引发异常。
图9-28 StaticDisplayLevels设置
动态菜单：
MaximumDynamicDisplayLevels属性指定在静态显示级别后应显示的动态显示菜单节点级数，例如，如果菜单有“3”个静态级和“2”个动态级，则菜单的前三级静态显示，后两级动态显示，如图9-29所示。
图9-29 MaximumDynamicDisplayLevels设置
如果将MaximumDynamicDisplayLevels设置为“0”，则不会动态显示任何菜单节点。如果将“MaximumDynamicDisplayLevels”设置为负数，则会引发异常。
设计动态菜单时注意，菜单的动态显示部分从显示到消失所持续的时间长度，这个值可以通过调整DisappearAfter属性的值以毫秒为单位进行配置，例如，将其设置为“1000”表示1秒钟。
默认值为500毫秒，即半秒钟。如果将DisappearAfter的值设置为“0”，在Menu控件之外暂停就会使其立即消失。将此值设置为“-1”指示暂停时间无限长，只有在Menu控件之外单击，才会使动态部分消失。
9.3.4 Menu控件样式
Menu控件外观的各方面都可以使用Menu控件的属性或级联样式表（CSS）来设置。可以直接在标记中设置各种样式的特性或使用样式表。CssClass属性可为菜单样式分配CSS类，该样式控制Menu控件外观的某些方面。
另外，控制菜单项的外观，就是单独设置菜单结构中每层的样式。Menu控件具有多个充当样式集合的属性，意味着这些属性可以包含菜单结构每层的样式信息。
可用于指定每层外观的样式属性如下。
LevelMenuItemStyles：为每个菜单项层指定样式。
LevelSubMenuStyles：根据静态菜单的子菜单项在Menu控件中的级别应用于这些子菜单项的。
LevelSelectedStyles：根据选定菜单项在Menu控件中的级别，将样式设置应用于该菜单项。
下面示例使用了CSS控制Menu控件的样式。
示例4：Menu控件使用CSS样式。
（1）新建一个空网站，创建一个窗体：Default.aspx，并切换到“设计”视图。
（2）在页面上添加一个Menu控件，并将其属性设置如下所代码所示。
（3）为Menu控件添加前面定义的CSS样式，代码如下。
（4）运行该页面，显示效果如图9-30所示。
图9-30 Menu控件使用样式
9.3.5 绑定到站点地图的菜单
本节将跳过编辑Menu控件项的步骤，直接从站点地图文件Web.sitemap文件生成菜单，这样可以在单独的XML文件中维护Menu控件的结构，下面演示其具体操作步骤。
示例5：创建绑定到站点地图的菜单。
（1）新建一个空网站，创建一个窗体：Default.aspx。
（2）添加“站点地图”。在“解决方案资源管理器”中右击网站的名称，在弹出的菜单中选择“添加新项”命令。在“添加新项”对话框中，选择“站点地图”，单击“添加”按钮，如图9-31所示。
图9-31 添加站点地图
（3）把下面的XML代码添加到新文件，该XML表示菜单选择的层次结构。
（4）保存该文件，打开Default.aspx页，切换到“设计”视图。
（5）从“工具箱”中的“导航”控件组中，把Menu控件拖到该页上，并设置该Menu控件的属性，在“属性”窗口中将“Orientation”属性设置为“Vertical”；将“MaximumDynamicDisplayLevels”设置为3，将“StaticDisplayLevels”设置为1，如图9-32所示。
图9-32 设置属性
（6）单击Menu控件上的智能标记，在弹出的“Menu任务”对话框中，从“选择数据源”下拉列表中选择“新建数据源”命令，如图9-33所示。
图9-33 选择数据源
（7）在“数据源配置向导”中，选择“网站地图”，默认名称“SiteMapDataSource1”，如图9-34所示，最后单击“确定”按钮。
图9-34 数据源配置向导
（8）返回到“设计”视图中后，查看Default.aspx页，单击Menu控件上的智能标记，在“数据源”下出现默认名称“SiteMapDataSource1”。
（9）保存，运行该页面，可以看到Menu控件显示的内容正是站点地图文中的导航信息，如图9-35所示。
图9-35 运行效果