创建与SharePoint 2010风格一致的下拉菜单

在笔者公司中，SharePoint得到了大规模的使用。最近，在IT托管的SharePoint 2010系统中，页面最上方被统一加上了一个额外的区域，右上角放置了两个额外的下拉菜单。

这两个下拉菜单为用户提供了一些快捷链接，包括访问IT的Support网站、查看当前网站的信息，以及从系统中申请一个新的SharePoint网站等。

从上面的截图可以看到，这两个定制的下拉菜单使用了SharePoint的内置风格，它们的样式与SharePoint 2010页面上的网站操作与欢迎菜单保持了一致。如果我们要在自己的应用中，创建这样一个与SharePoint 2010风格一致的下拉菜单，应该如何做呢？

要创建一个使用SharePoint内置风格的下拉菜单，可以创建一个自定义类，并让其继承自Microsoft.SharePoint.WebControls.ToolBarMenuButton类。通过调用父类所提供的各个属性与方法，我们的自定义类就可以为菜单添加自定义的菜单项。

在下面所示的代码中，从第18到28行，初始化了这个菜单的基本样式。基本上，我们会复用SharePoint 2010内置的CSS Class和图片。第19行通过将MenuTemplateControl.LargeIconMode属性指定为true，使得菜单以大图标模式进行展现。

第31行通过MenuControl.Text属性指定了这个下拉菜单所显示出来的文本内容。

接下来，我们开始向这个下拉菜单中添加子菜单项。添加子菜单项的方法有两种，第一种是直接调用父类所提供的AddMenuItem()方法。此方法的各个参数分别是：

• id：指定一个唯一的ID号；
• displayName：菜单项的标题文字；
• imageUrl：菜单项的图标；
• description：菜单项的描述文字；
• navigateUrl：用户点击菜单项时，将用户导航到此路径；
• onClickScript：用户点击菜单项时，执行指定的JavaScript脚本

第二种方法是先创建一个MenuItemTemplate对象，为它的各个属性赋值，然后将它添加到MenuTemplateControl.Controls集合里面。

要在下拉菜单中添加一个分割线，调用父类的AddMenuItemSeparator()方法。

如果想在下拉菜单中添加二级菜单，就需要先创建一个SubMenuTemplate对象，将它添加到MenuTemplateControl.Controls集合里面。然后一个一个的创建MenuItemTemplate对象，将它们添加到SubMenuTemplate对象的Controls集合中。

下面的代码创建了一个“Support”二级菜单，然后向这个二级菜单添加了一个“GetIT”子菜单项。

最后要做的，就是将我们创建的这个自定义控件，放到页面上去。根据我们想要放置的地方的不同，可以有不同的方式。比如，可以修改（或创建一个新的）母版页。

通过上面的示范代码最后创建出来的下拉菜单的呈现效果，如下图所示。在下图中，笔者将这个额外的菜单，放到了页面的用户欢迎菜单的左侧。

在下一篇文章中，我将讲述如何让我们创建的自定义菜单，能够和SharePoint Feature框架中的Custom Action整合在一起。也就是说，网站开发人员可以使用Custom Action，直接向我们所创建的自定义菜单中添加子菜单项，就如同向“网站操作”菜单中添加子菜单项那样。通过这样的整合，我们的自定义菜单将具有更好的灵活性和可扩展性。

 

 

 

Part II

 

在上一篇“创建与SharePoint 2010风格一致的下拉菜单”文章中，演示了如何添加一个额外的菜单到页面顶端，并使其的样式风格与SharePoint 2010内置的菜单保持一致。如果只需要创建一个子菜单项目固定的菜单，那么这篇文章里面的包含的内容已经足够了。但是如果在设计这个菜单的时候，我们并不确定需要向菜单中加入什么菜单项呢？

在SharePoint企业应用开发的过程中，有时候我们会希望能够创建一个可扩展的菜单。最开始的时候，开发人员在SharePoint网站页面的某个位置添加一个菜单，之后，就允许其他开发人员使用一种标准的扩展方式，先这个菜单中添加其他子菜单项。

实际上，SharePoint已经内置了一种这样的机制。如果你对Custom Action有了解，就应该知道，SharePoint开发人员可以通过在Feature中定义Custom Action，就可以向SharePoint内置的UI界面上添加额外的菜单项、按钮、Ribbon操作控件等等UI元素。是否可以让开发人员通过统一的Custom Action机制，向自定义的菜单中添加菜单项呢？答案是可以。

在创建自定义菜单的时候，除了添加MenuItemTemplate（表示菜单项）和SubMenuTemplate（表示二级菜单）之外，还可以添加FeatureMenuTemplate。FeatureMenuTemplate类似于定义了一个菜单占位符，并定义了这个菜单占位符的Location和Group ID。之后开发人员可以通过Custom Action，使用自定义的Location和Group ID，向这个菜单占位符中添加菜单项。

在下面的代码中，就添加了一个FeatureMenuTemplate，它的Location是“HP.ExtendedMenu”，Group ID是“TopToolsMenu”。

以后，其他开发人员就可以使用标准的SharePoint Feature框架中的Custom Action元素，来向这个位置添加想要的菜单项。如下面截图所示，我们定义了两个Custom Action，第一个是“About this Site”，第二个是“GetIT Support”。

将包含上面这两个Custom Action元素的Feature部署到SharePoint系统中，并在网站上激活后，就能看到它们会出现在我们想要它们出现的菜单中。

通过使用Feature Custom Action机制，我们就可以让自定义菜单具有更好的灵活性和扩展性。比如，在设计自定义母版页时，我们就可以将自定义菜单控件添加到母版页上，而开发人员可以在项目后续通过Custom Action机制向菜单中不断的添加所需的菜单项。