About the Toolbar WebControl

This article provides an introduction to the Toolbar control, which is one of the Windows Internet Explorer WebControls. This component facilitates the authoring of Toolbar UI elements, which have behavior and features similar to the toolbars commonly used in Windows applications. This control implements several powerful features and uses rich Dynamic HTML (DHTML) behaviors in uplevel browsers' Web pages. With WebControls, an uplevel browser is Microsoft Internet Explorer 5.5 or later.

This document includes the following sections.

• Introduction 
• Toolbar Objects 
  • ASP.NET Controls 
  • Client Behavior 
• Toolbar Elements 
• Authoring with the Toolbar 
• Formatting and Customization 
  • CSS 
• Generating Toolbars Dynamically 
• Toolbar Samples 
• Related Topics

Introduction

This overview provides practical examples illustrating how to author and use the Toolbar controls. The Toolbar is one of four WebControls; therefore, in order to author Web pages with any of these controls, a similar set of prerequisites apply. For general information on the WebControls, including download and setup instructions, see Internet Explorer WebControls and Authoring Web Forms with the WebControls.

The WebControls are ASP.NET controls that include a set of DHTML behaviors, which provide an enhanced user experience in uplevel browsers. For each of the WebControls, a DHTML behavior exposes a client-side object model that closely corresponds to the server-side object model implemented by the ASP.NET control. The component architecture in Internet Explorer 5.5 and ASP.NET has distinct differences, and so the object models exposed by the client-side and server-side objects are slightly different.

The use of both client-side and server-side components means that two modes of authoring Web pages with the Toolbar are possible. In ASP.NET, Web Forms can be written that deliver content based on the browser capabilities, using behaviors in uplevel browsers. These pages can make use of server-side script, which is written using one of the common language runtime languages. For Internet Explorer 5.5 and later versions, Web pages can be written that use the DHTML behavior with client-side script.

Toolbar Objects

This section outlines the basic similarities and differences between the client and server implementations of the Toolbar.

When authoring declaratively, the elements and attributes supported by the client-side and server-side components are very similar. Therefore, the declarative samples presented in this article work in Web Forms-based pages that use the Toolbar controls and in HTML pages that use the Toolbar behavior. The Toolbar can be authored declaratively, and it can also be programmed with script on the client or server.

However, due to differences in the programming languages supported in ASP.NET and Internet Explorer, separate reference documentation is provided for the objects exposed by client and server components.

ASP.NET Controls

The most comprehensive programming model for the Toolbar is exposed by the ASP.NET controls. Using the ASP.NET controls is the recommended approach in scenarios where Web pages must function in a wide range of browsers. This is because the WebControls detect the browser type and deliver HTML 3.2 content to the downlevel browsers. With WebControls, a downlevel browser is Internet Explorer 5.01 or earlier or a browser other than Internet Explorer.

For more information, see the ASP .NET Server Controls Reference.

Client Behavior

For those who wish to optimize the client performance in Internet Explorer 5.5 or later, there is also a Toolbar behavior. The behavior is downloaded automatically to uplevel browsers from Web Forms that use the WebControls. The Toolbar behavior can be used independently of ASP.NET when writing client-only HTML pages.

The Toolbars seen in many Windows applications often have rich features; for example, they can be dragged and positioned freely on the screen, and in many cases, toolbars dock automatically to the sides of the application window. If a Toolbar is dragged against a vertical boundary, it aligns itself automatically by rotating its orientation. The Toolbar behavior supports all of these features, and you can define the objects that can dock with the Toolbar.

Toolbar Elements

The Toolbar can be authored using a combination of one of more of the following elements, which are supported in both the client-side and server-side Toolbar components.

Client Behavior	ASP.NET	Description
Toolbar	Toolbar	The container for all other Toolbar items.
ToolbarButton	ToolbarButton	Defines a Toolbar button.
ToolbarCheckButton	ToolbarCheckButton	Defines a ToolbarCheckButton element on a Toolbar.
ToolbarCheckGroup	ToolbarCheckGroup	Defines a group of ToolbarCheckButton elements.
ToolbarDropDownList	ToolbarDropDownList	Defines a drop-down list element.
ToolbarLabel	ToolbarLabel	Defines a non-interactive label on a Toolbar.
ToolbarSeparator	ToolbarSeparator	Defines a separator element on a Toolbar.
ToolbarTextBox	ToolbarTextBox	Defines a text box element on a Toolbar.

Authoring with the Toolbar

The Toolbar element serves as a container for a collection of controls that define the UI. Building a Toolbar declaratively is straightforward and only requires some basic familiarity with the elements that can be used to build a Toolbar UI.

As shown by the previous table, the types of controls supported by the Toolbar are buttons, check buttons, drop-down lists, separators, and text boxes. The ToolbarCheckGroup element functions as a container for other ToolbarCheckButton elements.

Formatting and Customization

Even when using the simplest declarative authoring syntax to build a Toolbar, the control renders with default styles that clearly highlight the different states of each element. It is also possible to customize the appearance of the Toolbar in various ways. The Toolbar controls have three basic states.

• Default

  The default state is used when a control is not selected and the mouse is not hovering over it. The DefaultStyle property is used to define a collection of Cascading Style Sheets (CSS) styles for this state.

• Selected

  When a control is selected, the SelectedStyle property is applied.

• Hover

  When a mouse hovers over a control, the HoverStyle property is applied.

The next section explains how to customize the appearance of Toolbar controls, based on their state, using CSS.

CSS

CSS formatting properties provide an easy way to define the style of the Toolbar. Defining properties on the Toolbar elements is all that is required to customize their appearance, and no scripting is required to update the page rendering. The following examples illustrate how attributes can be used to customize the appearance of the Toolbar control.

<ie:Toolbar id="myToolbar" runat="server"

    BorderWidth="5"
    BorderColor="Gray"
    Font-Name="Tahoma"
    Font-Size="8pt"
    BackColor="#CCCCCC"

    Width="75%"

    DefaultStyle="color:black;border:solid 3px #CCCCCC;background:#CCCCCC"
    HoverStyle="border:solid 3px #FFFFFF;background:#DDDDDD"
    SelectedStyle="border:solid 3px #FFFFFF;background:#EEEEEE"

>

    <ie:ToolbarButton Text="NormalButton" ImageUrl="images/tool-calendar.gif" />
    <ie:ToolbarSeparator />
    <ie:ToolbarButton Text="<i>Rich</i><b>Content</b>" />
    <ie:ToolbarSeparator />

    <ie:ToolbarCheckButton Text="CheckButton" />
    <ie:ToolbarSeparator />

    <ie:ToolbarCheckGroup>
        <ie:ToolbarCheckButton Text="GroupA-1" />
        <ie:ToolbarCheckButton Text="GroupA-2" />
        <ie:ToolbarCheckButton Text="GroupA-3" />
    </ie:ToolbarCheckGroup>

</ie:Toolbar>

The next example shows how to define a Toolbar with vertical Orientation.

<h2>Vertical Toolbar</h2>
<br>
<ie:Toolbar id="tb3" runat="server"
    AutoPostBack="true"

    BackColor="#CCCCCC"
    Width="70"
    Orientation="Vertical"

    DefaultStyle="background:#CCCCCC;border:solid 1px #cccccc;font-size:8pt;"
    HoverStyle="background:#DDDDDD;border:solid 1px #cccccc;"
    SelectedStyle="background:#EEEEEE;border:solid 1px #cccccc;"
>
    <ie:ToolbarCheckButton Text="<b>Bold</b>" />
    <ie:ToolbarCheckButton Text="<i>Italic</i>" />
    <ie:ToolbarCheckButton Text="<u>Underline</u>" />
</ie:Toolbar>

As shown in the previous examples, several styles can be defined together. It is also possible to modify styles dynamically, as shown by the following:

<script language="C#" runat="server">
void Page_Load(Object sender, EventArgs e)
{
     myToolbar.BackColor=Color.Blue;
     myToolbar.BorderColor=Color.Black;
     myToolbar.DefaultStyle.Add("background","white");
}
</script>
<body>
    <form id="debug" runat="server" autopostback="true">
        <ie:toolbar id="myToolbar" runat="server" autopostback="false" >
            <ie:toolbarseparator />
            <ie:toolbarTextbox text="Text" id="Text2" />
            <ie:toolbardropdownlist>
                <asp:listitem>Text 1 </asp:listitem>
                <asp:listitem>Text 2 </asp:listitem>
                <asp:listitem>Text 3 </asp:listitem>
            </ie:toolbardropdownlist>
            <ie:toolbarcheckgroup>
                <ie:toolbarcheckbutton text="Button 1" />
                <ie:toolbarcheckbutton text="Button 2" />
            </ie:toolbarcheckgroup>
            </ie:toolbar>
     </form>
</body>

Graphics can also be added to Toolbar controls by setting the ImageUrl property. The following example shows a Toolbar that uses the ImageUrl property and also uses HTML formatting in the Text property to customize the UI.

<ie:Toolbar id="tb2" runat="server">
    <ie:ToolbarButton Text="NormalButton" ImageUrl="images/tool-calendar.gif" />
    <ie:ToolbarSeparator />
    <ie:ToolbarButton Text="<i>Rich</i><b>Content</b>" />
</ie:Toolbar>

Generating Toolbars Dynamically

The following sample code shows how a Toolbar control can be generated dynamically using the Page_Load event handler in ASP.NET.

<%@ Import Namespace="System.Web.UI.WebControls" %>
<%@ Import Namespace="Microsoft.Web.UI.WebControls" %>
<%@ Register TagPrefix="ie" 
Namespace="Microsoft.Web.UI.WebControls" 
Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>

<script language="C#" runat="server">
void Page_Load() 
{
    if (!Page.IsPostBack)
    {
        ToolbarButton tb = new ToolbarButton();
        tb.Text="Button1";
        myToolbar.Items.Add(tb);
        ToolbarCheckGroup ckg = new ToolbarCheckGroup();
        myToolbar.Items.Add(ckg);
        ToolbarCheckButton ckb= new ToolbarCheckButton();
        ckb.Text="TbCheckButton1";
        myToolbar.Items.Add(ckb);
    
        ckb= new ToolbarCheckButton();
        ckg.Items.Add(ckb);
        ckb.Text="CheckGroup1";
        ckb= new ToolbarCheckButton();
        ckg.Items.Add(ckb);
        ckb.Text="CheckGroup2";
    
        ckg = new ToolbarCheckGroup();
        myToolbar.Items.Add(ckg);
        ckb= new ToolbarCheckButton();
        ckg.Items.Add(ckb);
        ckb.Text="CheckGroup1";
        ckb= new ToolbarCheckButton();
        ckg.Items.Add(ckb);
        ckb.Text="CheckGroup2";
    }
}

void checkTest (Object sender, EventArgs e) 
{

    ToolbarButton tb = null;
    ToolbarCheckButton tbck = null;
    string exp="";
    
    if (sender is ToolbarButton) {
        tb=(ToolbarButton)sender;
        exp=tb.Text;
    }
    
    if (sender is ToolbarCheckButton) {
        tbck=(ToolbarCheckButton)sender;
        exp=tbck.Text + "  " + tbck.Selected;
    }

    string value="true";
    string why="'"+ exp + "'";
    HtmlGenericControl w = new HtmlGenericControl();
    w.InnerHtml="<script> LogTest(document.title,"+ value + "," + why +
    "); </" + "script>";
    myForm.Controls.Add(w);
}

</script>
<body>
    <form id="myForm" runat="server" >
        <ie:toolbar id="myToolbar" runat="server" autopostback="true"
        oncheckchange="checkTest" />
    </form>
</body>
</html>

Toolbar Samples

This section includes other samples that illustrate useful authoring and scripting methods with the Toolbar control.

The next example displays a Toolbar that uses some server-side script to process user input events. A working demonstration is also given.

<%@ Import Namespace="Microsoft.Web.UI.WebControls" %>
<%@ Register TagPrefix="mytb" 
Namespace="Microsoft.Web.UI.WebControls" 
Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<script language="C#" runat="server">
    public void ShowClick(Object sender, EventArgs e)
    {
        userinput.InnerText = "Clicked on object id='" + sender.ToString() + "'";
    }
</script>
<html>
<body>
<form runat="server">
<mytb:toolbar runat="server" id="cmtb" OnButtonClick="ShowClick"
    AutoPostBack="true">
    <mytb:ToolbarCheckButton id="modechange"
        Tooltip="Change the Toolbar mode"
        ImageUrl="images/tool-dayview.gif"
        Text="Calendar Mode" />
    <mytb:ToolbarSeparator />
    <mytb:ToolbarCheckGroup>
        <mytb:ToolbarCheckButton Text="GroupA-1" />
        <mytb:ToolbarCheckButton Text="GroupA-2" />
    </mytb:ToolbarCheckGroup>
    <mytb:ToolbarSeparator />
    <mytb:ToolbarCheckGroup>
        <mytb:ToolbarCheckButton Text="GroupB-1" Selected="True" />
        <mytb:ToolbarCheckButton Text="GroupB-2" />
        <mytb:ToolbarCheckButton Text="GroupB-3" />
    </mytb:ToolbarCheckGroup>
</mytb:toolbar>
</form>
<p>User Input Information:<br>
<div id="userinput" runat="server"
    style="border:1px solid black;background:beige;width:500px;height:50px">
</div>
</body>
</html>

The next example illustrates how a collection of Toolbar controls can be enumerated.

<script language="C#" runat="server">
void Page_Load() {
myDIV.InnerText=myToolbar.Items.Count.ToString();
     for (int i=0; i<myToolbar.Items.Count; i++)
         {
              myDIV.InnerText+=myToolbar.Items[i].ID + "  ";
          }
}

</script>
<body>
    <form id="myform" runat="server" >
        <ie:toolbar id="myToolbar" runat="server" autopostback="true"  >
            <ie:toolbarseparator id="separator" />
            <ie:toolbarbutton id="button1" text="TabIndex3" tabindex="3"  />
            <ie:toolbarbutton id="button2" Text="TabIndex1" tabindex="1"  />
            <ie:toolbarbutton id="button3" Text="TabIndex2" tabindex="2"  />
        </ie:toolbar>
        <br>
        <div id="myDIV" runat="server"></div>
    </form>
</body>

Related Topics

• Internet Explorer WebControls
• Internet Explorer WebControls Download
• About the MultiPage WebControl
• About the TabStrip WebControl
• About the TreeView WebControl
• WebService Behavior
• WebService Reference