ASP.NET Outlook 风格工具栏控件

• 下载源文件 - 9.15 Kb

引言

本文介绍如何开发一个复杂的Outlook风格工具栏作为ASP.NET服务器控件。过去，我见过许多类似的控件，但它们要么不容易使用，要么没有提供我想要的功能。所以我决定自己尝试一下。

工具栏的功能

该工具栏模拟Outlook风格的工具栏。工具栏由各种工具栏组组成。每个工具栏组包含一个标题和标题后面的按钮。此外，任何时候只能有一个组处于活动状态。可以通过点击标题来激活组，展开该组，同时收缩先前活动的组。

工具栏中的按钮由图片和标签构成。更一般地，工具栏的任何按钮都可以通过工具栏组和按钮索引对来标识。

当活动工具栏组中的按钮数量超过屏幕区域时，此工具栏控件缺少滚动功能，即

#Buttons in active group * Height of each button > 
    Toolbar Height - ToolbarGroupTitleHeight * Number of Total Groups.

这是因为没有 Web 组件尺寸的运行时信息。也许有人可以指导我一下。

另一件需要注意的是，只有当容器页面不是以网格模式而是以流模式设计时，工具栏才能成功下拉。

代码结构

当我开始规划我的服务器控件时，我有两个主要考虑因素。首先，服务器控件应该可以在运行时进行配置。其次，修改元素样式以及元素的悬停/非悬停样式应该非常容易。一方面，我讨厌我的服务器控件依赖JavaScript（不容易管理）。

第一个需求是通过使用XML模式和配置文件来实现的。工具栏服务器控件公开了`ToolbarDefinitionFileName`属性，可以更改该属性来重新配置工具栏配置。或者，可以更改相同的配置文件以反映下一次页面刷新/回发时的更改。工具栏控件会根据其模式验证此文件的XML内容。

以下是工具栏的模式

<?xml version="1.0" encoding="utf-8" ?>
<xs:schema id="Toolbar" targetNamespace="http://tempuri.org/Toolbar.xsd" 
                                             elementFormDefault="qualified"
xmlns="http://tempuri.org/Toolbar.xsd" 
      xmlns:mstns="http://tempuri.org/Toolbar.xsd" 
      xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:complexType name="ToolbarButtonDef">
      <xs:sequence>
            <xs:element name="Caption" type="xs:string" nillable="false" />
            <xs:element name="ImagePath" type="xs:string" nillable="false" />
            <xs:element name="Alt" type="xs:string" />
      </xs:sequence>
</xs:complexType>

<xs:complexType name="ToolbarGroupDef">
      <xs:sequence>
            <xs:element name="Caption" type="xs:string" nillable="false" />
            <xs:element name="ToolbarButton" type="ToolbarButtonDef" />
      </xs:sequence>
</xs:complexType>
<xs:element name="Toolbar">
      <xs:complexType>
            <xs:sequence>
                  <xs:element name="ToolbarGroup" type="ToolbarGroupDef" />
                        <xs:element name="ScrollUpImagePath" type="xs:string" 
                                               default="images/scrollup.gif" />
                  <xs:element name="ScrollDownImagePath" type="xs:string" 
                                             default="images/scrolldown.gif" />
           </xs:sequence>
      </xs:complexType>
</xs:element>
</xs:schema>

以下是一个通过验证检查的示例XML文件

<?xml version="1.0" encoding="utf-8" ?>
<Toolbar>
     <ToolbarGroup Caption="WebService">
         <ToolbarButton Caption="Upload File" ImagePath="Images/4_47.gif" 
                                                   Alt="Upload Test File" />
         <ToolbarButton Caption="Download File" ImagePath="Images/4_47.gif" 
                                                 Alt="Download Test File" />
         <ToolbarButton Caption="Update Line" ImagePath="Images/schedule.gif" 
                                                        Alt="Update Line" />
     </ToolbarGroup>

     <ToolbarGroup Caption="Group2"> 
             <ToolbarButton Caption="Button3" 
                 ImagePath="Images/test.gif" Alt="Test Button" />
             <ToolbarButton Caption="Button4" 
                 ImagePath="Images/test.gif" Alt="Test Button" />
     </ToolbarGroup>
</Toolbar>

第二个需求是通过使用CSS样式表文件，并将CSS类名绑定到各种工具栏元素来实现的，以提供运行时可配置的样式/鼠标悬停事件。对于悬停元素，在`Normal`和`Hover`CSS类之间切换状态，其中`Element`表示元素类型。

实例化工具栏

将工具栏项目解压到IIS的`wwwroot`下。为了在Web窗体上使用工具栏，请按如下方式包含CSS样式表

<LINK href="Shared/Styles/Toolbar.css" type="text/css" rel="Stylesheet">

首先，我建议使用下载中提供的示例CSS。

接下来，从`wwwroot\CustomWebControls`文件夹向Web项目添加工具栏控件的引用，并将工具栏添加到Web窗体。

<customwebcontrols:toolbar id="Toolbar1" 
       runat="server"></customwebcontrols:toolbar>

接下来，为工具栏创建一个XML配置文件，并通过`Page_Load`将其提供给工具栏控件，如下所示

private void Page_Load(object sender, System.EventArgs e)
{
    if (!IsPostBack)
    { 
        Toolbar1.ToolbarDefinitionFileName = "~/Toolbar.xml";
    }
    Toolbar1.OnToolbarButtonClicked +=new 
    CustomWebControls.ToolbarButtonClicked(Toolbar1_OnToolbarButtonClicked);
}

上面的代码将XML内容（如上所示的示例）附加到工具栏。最后一部分是从工具栏接收通知并处理它们。这是通过处理`ToolbarButtonClicked`事件完成的（我们已经在`Page_Load`事件中附加了它）。

private void Toolbar1_OnToolbarButtonClicked(int Group, int Button)
{
   // Toolbar Group
   switch (Group)
   {
    case 0:
        
        // Toolbar Button Within Group
        switch (Button)
        {
            case 0:
                       // Do Something
            break;
        }
    }
}

为了方便起见，下载中包含了`Toolbar.css`作为项目中的CSS样式表，还包含了`SampleToolbar.xml`（示例配置）。就是这样！我们完成了……随时欢迎提出建议。

Ashish Kaila