Home

Document-Based Applications: Toolbars

 

Fundamentals of Toolbars

 

Introduction

A toolbar is a bar that displays in the top section under the main menu. Here is an example:

Toolbar

A toolbar is a classic control container. It can host text, buttons, etc. It is up to you to decide whether your application needs a toolbar and what you want to position on it.

Creating a Toolbar

To support toolbars, the .NET Framework provides a class named ToolStrip. The ToolStrip class is derived from the ScrollableControl class and implements both the IComponent and the IDisposable interfaces:

type ToolStrip =  
    class 
        inherit ScrollableControl 
        interface IComponent 
        interface IDisposable 
    end
Author Note

The previous versions of the .NET Framework, included a class named Toolbar used to create a toolbar. That class is still available and you can use it if you want. The ToolStrip class is preferred because it provides some additional functionality. In all our lessons, unless specified otherwise, whenever we refer to a toolbar, it always means the ToolStrip class.

Therefore, to start a toolbar, declare a variable of this class. Because a toolbar is hosted by a container, namely a form, if you want to display it, you should (must) add it to the Controls collection of its host. Here is an example:

open System
open System.Drawing
open System.Windows.Forms

let exercise = new Form()

let toolbar = new ToolStrip()

exercise.Controls.Add toolbar |> ignore

do Application.Run exercise

This would produce:

Toolbar

In the same way, you can create as many toolbars as you want.

Characteristics of a Toolbar

 

Introduction

A toolbar is primarily a container, which itself means nothing and doesn't even do anything. The controls you position on it give it meaning. Still, because of its position, it enjoys some visual characteristics but also imposes some restrictions to its objects. Although it is a container, a toolbar must be hosted by another container. For this reason, the dimensions, namely the width, of a toolbar are restricted to those of its host. When you add a toolbar to a form, it automatically positions itself in the top section of the form and uses the same width as the form. This means that the default Dock value of a toolbar is Top.

Introduction to the Items of a Toolbar

By default, just after you have added a toolbar to your form, it is empty, waiting for you to add objects to it. To hold its collection of objects, the ToolStrip class is equipped with a property named Items. The ToolStrip.Items property is an object of type ToolStripItemCollection, which itself is a collection class:

abstract Items : ToolStripItemCollection with get 
override Items : ToolStripItemCollection with get

Each member of the ToolStripItemCollection class is of type ToolStripItem.

The Buttons of a Toolbar

The most common object of a toolbar is a button. A button of a toolbar is based on a class named ToolStripButton. The ToolStripButton clas is derived from the ToolStripItem class which, as mentioned before, is represented by the Items property that is a member of the ToolStrip class:

type ToolStripButton =  
    class 
        inherit ToolStripItem 
    end

To create a toolbar button, declare a variable of this class. The ToolStripButton class is equipped with 6 constructors. You can use the default constructor if you are not ready to provide the other pieces of information a button may need. After declaring the variable, add it to the Items property of its container. Here is an example:

open System
open System.Drawing
open System.Windows.Forms

let exercise = new Form()

let toolbar = new ToolStrip()

let btnCreate = new ToolStripButton()
toolbar.Items.Add btnCreate |> ignore

exercise.Controls.Add toolbar |> ignore

do Application.Run exercise

By default, a button of a toolbar displays an icon on top. To specify or change the icon of a button, you have many options. The ToolStripButton class is equipped with a property named Image. Assign an icon to this property. Here is an example:

open System
open System.Drawing
open System.Windows.Forms

let exercise = new Form()

let toolbar = new ToolStrip()

let btnCreate = new ToolStripButton()
btnCreate.Image <- Image.FromFile(@"C:\Resources\new.ico")
toolbar.Items.Add btnCreate |> ignore

exercise.Controls.Add toolbar |> ignore

do Application.Run exercise

The ToolStripButton class provides another constructor whose syntax is:

new : 
        image:Image -> ToolStripButton

When creating a button, you can use this constructor to directly specify its icon. Here is an example:

open System
open System.Drawing
open System.Windows.Forms

let exercise = new Form()

let toolbar = new ToolStrip()

let btnCreate = new ToolStripButton(Image.FromFile(@"C:\Resources\new.ico"))

toolbar.Items.Add btnCreate |> ignore

exercise.Controls.Add toolbar |> ignore

do Application.Run exercise

 If an icon is not explicit enough, you can make it display text or a combination of an icon and text. To support this, the ToolStripItem class provides a property named DisplayStyle:

abstract DisplayStyle : ToolStripItemDisplayStyle with get, set 
override DisplayStyle : ToolStripItemDisplayStyle with get, set

This property is of type ToolStripItemDisplayStyle, which is an enumeration. The members of the ToolStripItemDisplayStyle are:

  • None: The button will display neither an icon nor text
  • Text: The button will display text only
  • Image: The button will display an icon only
  • ImageAndText: The button will display an icon and text

To configure this behavior, access the DisplayStyle property and assign the desired value to it. If you want a button to display text, you have various options. You can assign a string to the Text property of the button. Here is an example:

open System
open System.Drawing
open System.Windows.Forms

let exercise = new Form()

let toolbar = new ToolStrip()

let btnCreate = new ToolStripButton()
btnCreate.DisplayStyle <- ToolStripItemDisplayStyle.Text;
btnCreate.Text <- "Create"

toolbar.Items.Add btnCreate |> ignore

exercise.Controls.Add toolbar |> ignore

do Application.Run exercise

This would produce:

Toolbar

The ToolStripButton class is equipped with another constructor whose signature is:

new : 
        text:string -> ToolStripButton

You can use this constructor to create a toolbar and specify its text. Of course, you must specify an appropriate value for the DisplayStyle property. Here is an example:

open System
open System.Drawing
open System.Windows.Forms

let exercise = new Form()

let toolbar = new ToolStrip()

let btnCreate = new ToolStripButton("Create")
btnCreate.DisplayStyle <- ToolStripItemDisplayStyle.Text

toolbar.Items.Add btnCreate |> ignore

exercise.Controls.Add toolbar |> ignore

do Application.Run exercise

To display both an icon and text, set the appropriate value of the DisplayStyle property. The ToolStripButton class provides another constructor whose signature is:

new : 
        text:string * 
        image:Image -> ToolStripButton

If you decide to use this version, pass the appropriate arguments.

Using a Toolbar Button

To use a button, the user can click it. Therefore, you should create an event handler for the button. Here is an example:

open System
open System.Drawing
open System.Windows.Forms

let exercise = new Form()

let toolbar = new ToolStrip()

let btnCreate = new ToolStripButton("Create")
btnCreate.DisplayStyle <- ToolStripItemDisplayStyle.Text;

let btnCreateClick e =
    MessageBox.Show "The document will be created" |> ignore

btnCreate.Click.Add btnCreateClick
toolbar.Items.Add btnCreate |> ignore

exercise.Controls.Add toolbar |> ignore

do Application.Run exercise

Otherwise, the ToolStripButton class supports all the normal events of a button.

   
 

Menu Items on a Toolbar

Instead of a classic button, you can create a type of menu on a toolbar so that, when the user clicks the button, a menu would come up. To get it, the button that is equipped with a menu is available through a class named ToolStripDropDownButton. This class inherits from a class named ToolStripDropDownItem:

type ToolStripDropDownButton =  
    class 
        inherit ToolStripDropDownItem 
    end

The ToolStripDropDownButton class has seven constructors. To create a drop down button, you can declare a variable of type ToolStripDropDownButton using its default constructor, allocate memory for it using the new operator, and add it to the Items collection of the ToolStrip variable. Here is an example:

open System
open System.Drawing
open System.Windows.Forms

let exercise = new Form()

let toolbar = new ToolStrip()

let ddRecentlyUsed = new ToolStripDropDownButton()
toolbar.Items.Add ddRecentlyUsed |> ignore

exercise.Controls.Add toolbar |> ignore

do Application.Run exercise

The primary characteristic of a drop down button is that it is equipped with a menu. To create the menu items of a drop down button like those of regular menu items. Here is an example:

open System
open System.Drawing
open System.Windows.Forms

let exercise = new Form()

let toolbar = new ToolStrip()

let ddRecentlyUsed = new ToolStripDropDownButton()
ddRecentlyUsed.Image <- Image.FromFile(@"C:\Resources\book.ico")
ddRecentlyUsed.DisplayStyle <- ToolStripItemDisplayStyle.Image

let ddiFirst = new ToolStripMenuItem("First")
let ddiSecond = new ToolStripMenuItem("Second")
let ddiThird = new ToolStripMenuItem("Third")
let ddiFourth = new ToolStripMenuItem("Fourth")

ddRecentlyUsed.DropDownItems.Add ddiFirst |> ignore
ddRecentlyUsed.DropDownItems.Add ddiSecond |> ignore
ddRecentlyUsed.DropDownItems.Add ddiThird |> ignore
ddRecentlyUsed.DropDownItems.Add ddiFourth |> ignore

toolbar.Items.Add ddRecentlyUsed |> ignore

exercise.Controls.Add toolbar |> ignore

do Application.Run exercise

This would produce:

Toolbar

Separators on a Tool Bar

A separator is a vertical bar that is used to create sections or groups of items on a toolbar. There is no strict rule as to where to put a separator. Only your experience and needs will guide you.

The Split Button on a Toolbar

When the user clicks a drop down button, its menu automatically displays. As an alternative, you can create a button split by a bar, showing a normal button on the left and a menu on the right. To support this, the .NET Framework provides the ToolStripSplitButton class:

type ToolStripSplitButton =  
    class 
        inherit ToolStripDropDownItem 
    end

To create a split button, declare a variable of type ToolStripSplitButton and add it to the Items property of the toolbar. Here is an example:

open System
open System.Drawing
open System.Windows.Forms

let exercise = new Form()

let toolbar = new ToolStrip()

let btnTypesOfApplications : ToolStripSplitButton = new ToolStripSplitButton()

toolbar.Items.Add btnTypesOfApplications |> ignore

exercise.Controls.Add toolbar |> ignore

do Application.Run exercise

The Split Button on a Toolbar

There are two ways a user can use a split button, by clicking the button itself on the left or the arrow on the right. When the arrow button is clicked, a menu displays. The menu items that display are of type ToolStripItem. This means that you create them using the same descriptions we saw for menus. Here is an example:

open System
open System.Drawing
open System.Windows.Forms

let exercise = new Form(Text = "Exercise")

let toolbar = new ToolStrip()

let btnTypesOfApplications = new ToolStripSplitButton();
btnTypesOfApplications.Image <- Image.FromFile(@"C:\Exercise\file.ico")

btnTypesOfApplications.DropDownItems.Add(new ToolStripMenuItem("Work Processing")) |> ignore
btnTypesOfApplications.DropDownItems.Add(new ToolStripMenuItem("Spreadsheet")) |> ignore
btnTypesOfApplications.DropDownItems.Add(new ToolStripMenuItem("Databases")) |> ignore
btnTypesOfApplications.DropDownItems.Add(new ToolStripMenuItem("Presentation")) |> ignore

toolbar.Items.Add btnTypesOfApplications |> ignore
exercise.Controls.Add toolbar |> ignore

do Application.Run exercise

The Split Button on a Toolbar

Labels on a Toolbar

You can create a section on a toolbar to display text. To support this, the .NET Framework provides the ToolStripLabel class, which is derived from the ToolStripItem class:

type ToolStripLabel =  
    class 
        inherit ToolStripItem 
    end

As its name indicates, a label is meant to display text. After adding it to a toolbar, assign a string to its Text property.

Instead of simple text, you can make a label behave like a link. To support this, the ToolStripLabel class is equipped with a Boolean property named IsLink:

member IsLink : bool with get, set

If you set this property to true, the label would follow the standard description of a web link (without the link itself; you must find a way to make it activate the desired link).

A Text Box on a Toolbar

You can add a text box to a toolbar so the user can type something in it or read text from it. To make this possible, the .NET Framework provides a class named ToolStripTextBox:

type ToolStripTextBox =  
    class 
        inherit ToolStripControlHost 
    end

To add a textbox to a toolbar, declare a variable of type ToolStripTextBox. The ToolStripTextBox class is equipped with 3 constructors. The default constructor is used to create a normal and simple text box. After declaring and initializing the variable, add it to the Items property of the toolstrip. Here is an example:

open System
open System.Drawing
open System.Windows.Forms

let exercise = new Form()

let toolbar = new ToolStrip()

let txtFullName = new ToolStripTextBox()
toolbar.Items.Add txtFullName |> ignore
exercise.Controls.Add toolbar |> ignore

do Application.Run exercise

This would produce:

Toolbar

Most of the time, you create an empty text box in which a user can enter text. At any time, if you want to display text in the text box, assign a string to the Text property of the button. This can be done as follows:

open System
open System.Drawing
open System.Windows.Forms

let exercise = new Form()

let toolbar = new ToolStrip()

let txtFullName = new ToolStripTextBox()
txtFullName.Text <- "John Doe"
toolbar.Items.Add txtFullName |> ignore
exercise.Controls.Add toolbar |> ignore

do Application.Run exercise

The text box of a toolbar uses the normal features of a Microsoft Windows text box.

A Combo Box on a Toolbar

You can add a combo box to a toolbar to provide a list from which the user can select an item. To support the combo box on a toolbar, the .NET Framework provides a class named ToolStripComboBox:

type ToolStripComboBox =  
    class 
        inherit ToolStripControlHost 
    end

To create a combo box, declare a variable of type ToolStripComboBox. The ToolStripComboBox class has 3 constructors. Use the default constructor to create a combo box. Initialize the variable and add it to the Items property of the toolbar. Here is an example:

open System
open System.Drawing
open System.Windows.Forms

let exercise = new Form()

let toolbar = new ToolStrip()

let cbxCategories = new ToolStripComboBox()
toolbar.Items.Add cbxCategories |> ignore
exercise.Controls.Add toolbar |> ignore

do Application.Run exercise

This would produce:

Combo Box on a Toolbar

One of the properties of the combo box of a toolbar is named ComboBox. This property is of type ComboBox. This property can be assigned a predefined object that has all the desired and necessary characteristics of a Microsoft Windows combo box.

A Progress Bar on a Tool Bar

A progress bar is used to show the evolution of something by drawing continuous rectangles, usually blue. To support them on a toolbar, the .NET Framework provides the ToolStripProgressBar class. This class inherits from the ToolStripControlHost class:

type ToolStripProgressBar =  
    class 
        inherit ToolStripControlHost 
    end

To create a progress bar to be hosted by a toolbar, declare a variable of type ToolStripProgressBar. The ToolStripProgressBar class has two constructors. You can use the default constructor to declare the variable, initialize it using the new operator, and add it to the Items property of a ToolStrip variable. Here is an example:

open System
open System.Drawing
open System.Windows.Forms

let exercise = new Form()

let toolbar = new ToolStrip()

let pgrEvolution = new ToolStripProgressBar()
toolbar.Items.Add pgrEvolution |> ignore
exercise.Controls.Add toolbar |> ignore

do Application.Run exercise

This would produce:

Progress Bar on a Toolbar

After creating a progress bar, you must find a way to make it display its rectangle (and why).

 
   
 

Home Copyright © 2004-2015, FunctionX, Inc. Home