Mimic the Appearance of Outlook’s Sidebar with the Multi-view Control in VB.NET

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 Multi-View 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 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 set 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 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 multi-view control under the label, and then drag three view controls inside of the multi-view 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 container control and you may place any other controls 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 multi-view control and inside the multi-view 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 multi-view 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 multi-view 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 multi-view 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, 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 multi-view control is configured to display view 1 of the three available views.  You can set this value with a 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 multi-view 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 multi-view 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 multi-view controls set active view is passed the view to be displayed; the multi-view 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 multi-view control:  (Figures 4 and 5)

 

Figure 4:  Collapsible Panel Closed

 

Figure 5:  Collapsible Panel Opened