使用 MultiView 控件模仿 Outlook 边栏的外观

• 下载源文件 - 4.82 Kb

引言

本文介绍了一种在 ASP.NET 2.0 Web 应用程序中模拟 Microsoft Outlook 侧边栏外观的简单方法。该方法基于使用标准 ASP.NET 2.0 工具箱中现有的 MultiView 控件，无需花费太多时间或精力即可实现。

本文包含一个示例 Web 应用程序，展示了该方法的使用示例。

入门

首先，解压下载的文件并打开提供的项目。在项目中，您将找到一个用 VB.NET 编写的简单 ASP.NET 2.0 应用程序；该 Web 应用程序包含一个网页（Default.aspx）。

default.aspx 页面由一个包含侧边栏、页眉和主显示区域的模板表构成。要向项目添加类似的表，请创建一个新网页，打开“布局”菜单选项，然后从该选项中选择“插入表格”。然后会出现“插入表格”对话框（图 1）。在此对话框中，选择对话框顶部的“模板”选项，然后打开组合框以显示表格选项。选择显示“页眉和侧边栏”的选项。当您单击“确定”时，将以指定格式的表格添加到打开的网页中。您可能希望在添加任何其他控件之前设置表格每个区域的大小属性；通常，在表格范围内尚未放置任何控件时，设置表格的比例会更容易。此时您可能需要做的一件事是将侧边栏区域的垂直对齐属性设置为 Bottom。您可以根据需要设置横幅和主显示区域。

表格放置好并满意其排列后，就可以添加支持 Microsoft Outlook 外观所需的控件了。

图 1：Visual Studio 2005 中的插入表格对话框

看看 Outlook（图 2），注意侧边栏实际上非常简单。侧边栏底部有一组按钮，按钮上方是用于显示与所选按钮相关的控件的显示区域。每当从侧边栏底部单击新按钮时，侧边栏显示区域的内容都会更新以显示所选内容的控件选项。

侧边栏顶部有一个标签，显示侧边栏的内容。每当通过单击侧边栏底部的按钮之一选择新选项时，该标签都会更新以反映所选内容。

在侧边栏的显示区域内，可以有额外的可折叠面板，可以展开或折叠以显示或隐藏面板的内容。这些也可以从 Microsoft 多视图面板中非常简单地构建，并且演示中包含一个此类面板的简单示例。

图 2：显示侧边栏的 Microsoft Outlook（左侧）

配置好表格后，从工具箱中拖动一个 Label 并将其放置在表格的侧边栏区域中。接下来，在 Label 下方拖动一个 MultiView 控件，然后在 MultiView 控件内部拖动三个 View 控件。最后，将三个 Button 控件拖到侧边栏区域的底部。

您可以在每个视图面板内部拖动一些其他控件；我只是为了演示目的在视图中放置了一些复选框和单选按钮列表。但是，View 控件是一个容器控件，您可以在 View 控件内部放置您希望的任何其他控件。

为了演示可折叠面板，我构建了一个简单的用户控件，您将在演示项目中找到它。该用户控件名为“CollapsePanel.vb”；如果您打开它查看，您会看到它包含一个 Panel，其宽度设置为 100%。在面板内部，您会找到一个包含三行的小表格，第二行包含两个表格单元格；左侧单元格中是一个 Label，右侧单元格中是两个图像按钮控件。左侧按钮控件名为“btnOpen”，右侧按钮控件名为“btnClose”。每个图像按钮都分配了一个箭头图标，一个向下指向，一个向右指向。“btnClose”图像按钮的可见性设置为 False。

我在第 1 行和第 3 行放置了一个 Label 控件，并将 Text 属性设置为 “<hr/>” 以在标题上方和下方绘制一条水平线。在表格下方，有一个 MultiView 控件，在 MultiView 控件内部是一个 View 控件。当页面加载此控件时，View 控件将默认不显示任何面板。如果您希望控件加载时 Panel 可见，则需要将 MultiView 控件的活动视图索引属性设置为“0”或“View1”（我们的单个面板），并交换两个图像按钮控件之间的可见性。

“btnClose”单击事件处理程序会将 MultiView 控件的活动索引属性设置为“-1”以隐藏 View 控件。事件处理程序还将把“btnClose”按钮的可见性交换为 False，并将“btnOpen”按钮的可见性交换为 True。整个用户控件的代码隐藏页面如下

Partial Class CollapsePanel
    Inherits System.Web.UI.UserControl

    Protected Sub btnOpen_Click(ByVal sender As Object, _
              ByVal e As System.Web.UI.ImageClickEventArgs) _
              Handles btnOpen.Click
        MultiView1.ActiveViewIndex = 0
        btnOpen.Visible = False
        btnClose.Visible = True
    End Sub

    Protected Sub btnClose_Click(ByVal sender As Object, _
              ByVal e As System.Web.UI.ImageClickEventArgs) _
              Handles btnClose.Click
        MultiView1.ActiveViewIndex = -1
        btnOpen.Visible = True
        btnClose.Visible = False
    End Sub

End Class

构建此用户控件后，将其添加到 default.aspx 页面中的一个视图中。

主页面的代码与用户控件的代码几乎一样简单。同样，这里的目标仅仅是响应来自 MultiView 控件下方的三个按钮的按钮点击事件来交换可见面板。考虑到在页面加载时打开其中一个面板会很好，页面加载事件包含一些代码来处理该任务。在这种情况下，页面加载看起来像这样

Protected Sub Page_Load(ByVal sender As Object, _
          ByVal e As System.EventArgs) Handles Me.Load

    If Not Page.IsPostBack Then
        Me.MultiView1.SetActiveView(View1)
    End If

End Sub

在这里，如果页面不是回发，MultiView 控件将配置为显示三个可用视图中的视图 1。如果您愿意，可以使用整数设置此值。如果您不希望在初始页面加载时显示任何面板，请将值设置为“-1”，或者不执行任何操作，因为默认情况下，MultiView 控件将隐藏所有视图。

剩下的唯一任务是为用于选择 MultiView 控件中包含的三个单独视图的三个按钮控件设置事件处理程序。这是通过以下代码实现的

Protected Sub Button1_Click(ByVal sender As Object, _
          ByVal e As System.EventArgs) Handles Button1.Click
    Me.MultiView1.SetActiveView(Me.View1)
    Button1.Font.Bold = True
    Button2.Font.Bold = False
    Button3.Font.Bold = False
    txtHeader.Text = "Days"
End Sub


Protected Sub Button2_Click(ByVal sender As Object, _
          ByVal e As System.EventArgs) Handles Button2.Click
    Me.MultiView1.SetActiveView(Me.View2)
    Button1.Font.Bold = False
    Button2.Font.Bold = True
    Button3.Font.Bold = False
    txtHeader.Text = "Tools"
End Sub


Protected Sub Button3_Click(ByVal sender As Object, _
          ByVal e As System.EventArgs) Handles Button3.Click
    Me.MultiView1.SetActiveView(Me.View3)
    Button1.Font.Bold = False
    Button2.Font.Bold = False
    Button3.Font.Bold = True
    txtHeader.Text = "Cars"
End Sub

这也很简单。在每个事件处理程序中，MultiView 控件的活动 View 都传递了要显示的 View；MultiView 控件一次只能显示一个 View 控件，因此您无需编写任何额外的代码来隐藏其他 View，而如果您要使用 Panel 控件实现类似的项目，则必须这样做。

设置当前 View 后，所选按钮的文本变为粗体，未选中的按钮取消粗体显示，最后，包含侧边栏标题文本的文本框会更新以反映当前选择。

就是这样。如果您构建并运行 Web 应用程序，您应该在浏览器中看到以下内容：（图 3）

图 3：演示 Web 应用程序

如果您单击每个按钮，您应该会看到侧边栏内容更新。如果您选择“Cars”按钮，您应该会看到可折叠面板用户控件，如果您单击其图标，您应该会看到它显示和隐藏其 MultiView 控件的内容：（图 4 和图 5）

图 4：可折叠面板关闭

图 5：可折叠面板打开