Mimic the Appearance of Outlook's Sidebar with the MultiView Control

• Download source files - 4.82 Kb

Introduction

This article describes a simple way to mimic the appearance of Microsoft’s Outlook sidebar within an ASP.NET 2.0 web application. The approach is based upon the use of the existing MultiView control contained in the standard ASP.NET 2.0 toolbox, and does not require much time or effort to implement.

This article includes a sample web application that presents an example of the approach in use.

Getting Started

In order to begin, unzip the downloaded files and open the project provided. Within the project, you will find a simple ASP.NET 2.0 application written in VB.NET; the web application contains a single web page (Default.aspx).

The default.aspx page is built from a template table containing a sidebar, a header, and a main display area. In order to add a similar table to a project, create a new web page, open the “Layout” menu option, then select “Insert Table” from that option. The Insert Table dialog will then appear (Figure 1). From this dialog, select the “Template” option at the top of the dialog, then open the combo box to reveal the table options. Select the option showing “Header and Side”. When you click “OK”, a table in the format specified will be added to the open web page. You may wish to set the size properties for each of the table’s areas before adding any additional controls; it is typically easier to set up the proportions of the table when no controls are yet placed within its bounds. One thing you might want to do at this point is to set the sidebar area’s vertical alignment property to Bottom. You can set the banner and main display area as you see fit.

Once the table is placed and you are happy with its arrangement, it is time to add the controls necessary to support the appearance of Microsoft Outlook.

Figure 1: Insert Table Dialog in Visual Studio 2005

Take a look at Outlook (figure 2) and note that the sidebar is really pretty simple. There are a set buttons at the bottom of the sidebar and, above the buttons, is a display area used to display the controls relevant to the button selected. Whenever a new button is clicked from the bottom of the sidebar, the contents of the sidebar’s display area are updated to show the selection’s control options.

At the top of the sidebar is a label that displays the contents of the sidebar. Whenever a new option is selected by clicking one of the buttons at the bottom of the sidebar, the label is updated to reflect the selection.

Inside the sidebar’s display area, there can be additional collapsible panels that may be expanded or contracted to reveal or hide the panel’s content. These are very simple to construct from the Microsoft multi-view panel as well, and a simple example of such a panel is included in the demonstration.

Figure 2: Microsoft Outlook With Sidebar Visible (on the left)

Once the table has been configured, drag a Label from the toolbox and place it in the sidebar area of the table. Next, drag a MultiView control under the Label, and then drag three View controls inside the MultiView control. Lastly, drag three Button controls into bottom of the sidebar area.

You may drag some other controls inside each of the view panels; I merely placed some checkbox and radio button lists into the views for the purposes of this demonstration. However, the View control is a container control, and you may place any other control inside a View control that you wish.

To demonstrate the collapsible panel, I constructed a simple user control that you will find in the demonstration project. The user control is entitled, “CollapsePanel.vb”; if you open it up for a look, you will see that it contains a single Panel with its width set to 100%. Inside the panel, you will find a small table with three rows, the second row contains two table cells; in the left hand cell is a Label, and in the right hand cell, there are two image button controls. The left button control is named, “btnOpen”, and the right hand button control is named “btnClose”. Each image button is assigned an arrow looking icon, one pointing down and one pointing to the right. The visibility of the “btnClose” image button is set to False.

I placed a single Label control in rows 1 and 3 and set the Text property to “<hr/>” to draw a horizontal line above and below the title. Below the table, there is a single MultiView control, and inside the MultiView control is a single View control. When a page loads this control, the View control will default to show no panels at all. If you prefer to have the control load with the Panel visible, you will need to set the active view index property of the MultiView control to “0” or “View1” (our single panel) and swap the visibility between the two image button controls.

The “btnClose” click event handler will set the MultiView control’s active index property to “-1” to hide the View control. The event handler will also swap the visibility of the “btnClose” button to False and the “btnOpen” button’s visibility to True. The entire user control’s code-behind page is as follows:

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

Once this user control has been built, add it to one of the views in the default.aspx page.

The code for the main page is just about as simple as it is for the user control. Here again, the objective is merely to swap visible panels in response to button click events originating from the three buttons beneath the MultiView control. Given it would be nice to open up one of the panels on page load, the page load event contains a little bit of code to handle that task. In this case, the page load looks like this:

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

Here, if the page is not a post back, the MultiView control is configured to display view 1 of the three available views. You can set this value with an integer if you prefer. If you don’t want any of the panels to display on the initial page load, set the value to “-1” or do nothing as, by default, the MultiView control will hide all of the views.

The only task remaining is to set the event handlers for the three button controls used to select each of the three separate views contained in the MultiView control. That is accomplished with the following bit of code:

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

This is also pretty simple. In each event handler, the MultiView control's set active View is passed the View to be displayed; the MultiView control is only capable of displaying a single View control at a time, so you need not write any additional code to hide the other Views as you would have to do if you were to implement a similar project with a Panel control.

After setting the current View, the selected button’s text is bolded and the unselected buttons have the bolding removed, and lastly, the text box containing the sidebar’s header text is updated to reflect the current selection.

That wraps it up. If you build and run the web application, you should see the following in your browser: (figure 3)

Figure 3: Demonstration Web Application

If you click on each of the buttons, you should see the content of the sidebar update. If you select the “Cars” button, you should see the collapsible panel user control, and if you click on its icon, you should see it reveal and hide the contents of its MultiView control: (figures 4 and 5)

Figure 4: Collapsible Panel Closed

Figure 5: Collapsible Panel Opened