Sharepoint自訂功能表列

Sharepoint2010的UI有很大的改觀，一個重要的體現是在Ribbon。然而有些人並不喜歡這種操作，所以我想到之前的2007的工具列。

在工具列裡面添加了建立，和刪除項目，及切換視圖。

效果如：

1：ToolBar

需要先放置建立，刪除項目按鈕的容器。在Sharepoint裡面有提供一個使用者自訂控制項，位置存放在C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\CONTROLTEMPLATES/ToolBar.ascx。因為想偷懶，這個控制項都已經做好了樣式，直接拿過來用就好了，當然也可以自己去修改樣式。該ToolBar.ascx的代碼如下：

<%@ Control Language="C#" Inherits="Microsoft.SharePoint.WebControls.ToolBar,Microsoft.SharePoint,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c"   AutoEventWireup="false" compilationMode="Always" %><%@ Register Tagprefix="wssawc" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %><table class="<%=CssClass%>" cellpadding="2" cellspacing="0" border="0" id="<%=ClientID%>" width="100%">  <tr><%-- Buttons on the left --%><wssawc:RepeatedControls id="RptControls" runat="server"><HeaderHtml/><BeforeControlHtml><td class="ms-toolbar" nowrap="nowrap"></BeforeControlHtml><AfterControlHtml></td></AfterControlHtml><SeparatorHtml><td class="ms-separator">|</td></SeparatorHtml><FooterHtml/></wssawc:RepeatedControls><td width="99%" class="ms-toolbar" nowrap="nowrap"><img src="/_layouts/images/blank.gif" width='1' height='18' alt="" /></td><%-- Buttons on the right --%><wssawc:RepeatedControls id="RightRptControls" runat="server"><HeaderHtml/><BeforeControlHtml><td class="ms-toolbar" nowrap="nowrap"></BeforeControlHtml><AfterControlHtml></td></AfterControlHtml><SeparatorHtml><td class="ms-separator">|</td></SeparatorHtml><FooterHtml/></wssawc:RepeatedControls>  </tr></table>

如果需要修改樣式，建議在自己的樣式表裡面，重寫這些定義的樣式為好。

我們引用這個工具列控制項：

<%@ Register Src="/_controltemplates/ToolBar.ascx" TagPrefix="YLSoft" TagName="ToolBar" %> 

 

<YLSoft:ToolBar ID="tbar" runat="server">     <Template_Buttons>             </Template_Buttons>     <Template_RightButtons>         </Template_RightButtons> </YLSoft:ToolBar>

 

在Template_Buttons和Template_RightButtons分別放置左邊，和最右邊的按鈕集合，一般我們視圖選擇都放在右邊。裡面直接拖拽控制項也可以，為了美觀，這裡還是用到Sharepoint的幾個控制項 。

Menu：

<SharePoint:Menu ID="MenuNew" runat="server" TemplateId="MenuTemplateNew" Text="<%$Resources:wss,multipages_new_menu_text%>"             MenuFormat="ArrowAlwaysVisible" MenuAlignment="Left" HoverCellActiveCssClass="ms-menubuttonactivehover"             HoverCellInActiveCssClass="ms-menubuttoninactivehover" AccessKey="<%$Resources:wss,tb_NewMenu_AK%>" />

這裡有使用到資源檔，<%$Resources:wss,multipages_new_menu_text%>，意思是調用的是wss.resx,key為multipages_new_menu_text的資源。資源檔放在：目錄下面。multipages_new_menu_text的值是New（建立）。

  <data name="multipages_new_menu_text">    <value>New</value>  </data>

那這個MenuNew西面有哪些子功能表呢？這裡有一個很重要的屬性：TemplateId。TemplateId指明從哪個Template擷取子功能表。這裡我指明的是MenuTemplateNew。看看它的定義：

<SharePoint:FeatureMenuTemplate ID="MenuTemplateNew" LargeIconMode="TRUE" runat="server" GroupId="NewMenu">    <SharePoint:NewMenu MenuAlignment="Default" ID="newMenu" runat="server">    </SharePoint:NewMenu></SharePoint:FeatureMenuTemplate>

我在MenuTemplateNew的菜單模板下面放置了新增菜單。看看效果

NewMenu都是取得當前列表的新增的內容類型。當然也可以自己編碼來添加新增的內容。這貌似需要繼承來實現。之前有重寫過這個NewMenu。

刪除項目菜單：

<YLSoft:ToolBarButton ID="btnDel" OnClientClick="getSels();return false;" runat="server" Text="<%$Resources:wss,setanon_deleteitems_display %>"></YLSoft:ToolBarButton>

ToolBarButton樣式都Sharepoint的，所以看上去順眼點，如果直接放Button有點噁心。

最後UI代碼如下：

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %><%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %><%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"    Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %><%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %><%@ Register TagPrefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %><%@ Import Namespace="Microsoft.SharePoint" %><%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"    Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %><%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ListToolBarUserControl.ascx.cs"    Inherits="YLSoft.Features.Webparts.ListToolBar.ListToolBarUserControl" %><%@ Register Src="/_controltemplates/ToolBar.ascx" TagPrefix="YLSoft" TagName="ToolBar" %><%@ Register TagPrefix="YLSoft" TagName="ToolBarButton" src="~/_controltemplates/ToolBarButton.ascx" %> <!-- Templates --> <SharePoint:FeatureMenuTemplate ID="MenuTemplateNew" LargeIconMode="TRUE" runat="server" GroupId="NewMenu">     <SharePoint:NewMenu MenuAlignment="Default" ID="newMenu" runat="server">     </SharePoint:NewMenu> </SharePoint:FeatureMenuTemplate> <SharePoint:MenuTemplate runat="server" ID="MenuTemplateView"> <SharePoint:ViewSelectorMenu ID="viewSelector" runat="server">         </SharePoint:ViewSelectorMenu> </SharePoint:MenuTemplate> <!--End Template--> <YLSoft:ToolBar ID="tbar" runat="server">     <Template_Buttons>         <SharePoint:Menu ID="MenuNew" runat="server" TemplateId="MenuTemplateNew" Text="<%$Resources:wss,multipages_new_menu_text%>"             MenuFormat="ArrowAlwaysVisible" MenuAlignment="Left" HoverCellActiveCssClass="ms-menubuttonactivehover"             HoverCellInActiveCssClass="ms-menubuttoninactivehover" AccessKey="<%$Resources:wss,tb_NewMenu_AK%>" />         <YLSoft:ToolBarButton ID="btnDel" OnClientClick="getSels();return false;" runat="server" Text="<%$Resources:wss,setanon_deleteitems_display %>"></YLSoft:ToolBarButton>     </Template_Buttons>     <Template_RightButtons>     <asp:PlaceHolder ID="PlaceHolder1" runat="server">              <table border="0" cellpadding="0" cellspacing="0" style='margin-right: 4px'>               <tr>                <td nowrap="nowrap" class="ms-toolbar" id="topPagingCell"></td>                <td></td>                <td nowrap="nowrap">&#160;</td>                <td nowrap="nowrap" class="ms-listheaderlabel"><SharePoint:EncodedLiteral ID="EncodedLiteral1" runat="server" text="<%$Resources:wss,view_selector_view%>" EncodeMethod='HtmlEncode'/>&#160;</td>                <td nowrap="nowrap" class="ms-viewselector" onmouseover="this.className='ms-viewselectorhover'" onmouseout="this.className='ms-viewselector'" id="onetPeopleViewSelector">                 <SharePoint:Menu ID="MenuViewSelector" runat="server" TemplateId="MenuTemplateView"             Text="<%$Resources:wss,mngsubwebs_selectview%>" MenuFormat="ArrowAlwaysVisible"             MenuAlignment="Right" AlignmentElementOverrideClientId="onetPeopleViewSelector"             HoverCellActiveCssClass="ms-viewselectorhover" HoverCellInActiveCssClass="ms-viewselector"             AccessKey="<%$Resources:wss,tb_ViewSelector_AK%>" />                </td>               </tr>               </table>             </asp:PlaceHolder>     </Template_RightButtons> </YLSoft:ToolBar>