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

简介:

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

image

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

imageimage

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

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

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

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

image

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

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

image

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

image

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

image

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

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

image

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

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

image

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





本文转自 kaneb0y 51CTO博客,原文链接:http://blog.51cto.com/kaneboy/592719,如需转载请自行联系原作者

目录
相关文章
|
3月前
|
存储 前端开发 C#
WPF/C#:更改界面的样式
WPF/C#:更改界面的样式
43 0
|
前端开发 Windows
19EasyUI 布局- 创建 XP 风格左侧面板
19EasyUI 布局- 创建 XP 风格左侧面板
51 0
|
C# C++
C# WPF 左侧菜单右侧内容布局效果实现
原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换。 wpf实现的话,我的办法是用一个tabcontrol,修改tabcontrol的样式模板,首先将控件的TabStripPlacement设置为left使tabcontrol的item header部分靠左内容靠右,然后用一个Expander将TabPanel包住实现可折叠菜单效果,最后就是把用到的控件样式修改一下即可。
4999 0
|
C#
WPF中的菜单模板
原文:WPF中的菜单模板 资源字典代码如下: ...
1224 0
|
C# 开发工具 git
WPF实现选项卡效果(3)——自定义动态添加的AvalonDock选项卡内容
原文:WPF实现选项卡效果(3)——自定义动态添加的AvalonDock选项卡内容 简介   在前面一篇文章里面,我们实现了AvalonDock选项卡的动态添加,但是对于选项卡里面的内容,我们并没有实现任何有用的功能。
1354 0
|
数据安全/隐私保护
|
Web App开发 前端开发 JavaScript
|
C# 数据安全/隐私保护
WPF 自定义搜索框
控件中的搜索图标下载地址:http://www.easyicon.net/1183666-Search_icon.html 搜索框设计过程比较简单: 1、先定义一个Rectangle作为背景 2、然后中间放TextBox输入,可以重写其中的模板。
1531 0