Question

In this part of the Visual Basic Winforms tutorial, we will talk about menus and toolbars.

A menubar is one of the most visible parts of the GUI application. It is a group of commands located in various menus. While in console applications you had to remember all those arcane commands, here we have most of the commands grouped into logical parts. There are accepted standards that further reduce the amount of time spending to learn a new application.

Simple menu

In the first example, we create a simple menu.

' ZetCode Mono Visual Basic Winforms tutorial
'
' This program shows a simple
' menu. It has one action, which
' will terminate the program, when
' selected. 
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports System.Windows.Forms
Imports System.Drawing


Public Class WinVBApp
  Inherits Form

  Public Sub New

     Me.Text = "Simple menu"
     Me.Size = New Size(220, 170)
     
     Me.InitUI
     
     Me.CenterToScreen

  End Sub
  
  Private Sub InitUI
   
    Dim ms As New MenuStrip
    ms.Parent = Me
    
    Dim fileItem As New ToolStripMenuItem("&File")  
    Dim exitItem As New ToolStripMenuItem("&Exit", Nothing, _
      New EventHandler(AddressOf OnExit))
    
    exitItem.ShortcutKeys = Keys.Control Or Keys.X
    fileItem.DropDownItems.Add(exitItem)

    ms.Items.Add(fileItem)
    MainMenuStrip = ms
    
  End Sub

  Private Sub OnExit(ByVal sender As Object, ByVal e As EventArgs)
    Me.Close
  End Sub


  Public Shared Sub Main
    Application.Run(New WinVBApp)
  End Sub
   
End Class 

In our example, we have a menubar and one menu. Inside a menu there is one menu item. If we select the menu item, application is closed.

Notice the ways how we can close the application. We can close it by using the Ctrl+X shorcut or by pressing Alt, F, E keys.

Dim ms As New MenuStrip

MenuStrip creates a menu system for our form. We add ToolStripMenuItem objects to the MenuStrip that represent the individual menu commands in the menu structure. Each ToolStripMenuItem can be a command for your application or a parent menu for other submenu items.

Dim fileItem As New ToolStripMenuItem("&File")     

Here we create a file menu.

Dim exitItem As New ToolStripMenuItem("&Exit", Nothing, _
  New EventHandler(AddressOf OnExit)) 

This line creates the exit menu item.

exitItem.ShortcutKeys = Keys.Control Or Keys.X

We provide a shortcut for the exit menu item.

fileItem.DropDownItems.Add(exitItem)

The exit menu item is added to the drop down items of the menu object.

ms.Items.Add(fileItem)      

Here we add the menu object into the menu strip.

MainMenuStrip = ms

The MenuStrip is plugged into the form.

Figure: Simple menu

Submenu

Each menu item can also have a submenu. This way we can group similar commands into groups. For example we can place commands that hide/show various toolbars like personal bar, address bar, status bar or navigation bar into a submenu called toolbars.

' ZetCode Mono Visual Basic Winforms tutorial
'
' This program creates a submenu
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports System.Windows.Forms
Imports System.Drawing


Public Class WinVBApp
  Inherits Form

  Public Sub New

     Me.Text = "Submenu"
     Me.Size = New Size(380, 220)
     
     Me.InitUI
     
     Me.CenterToScreen

  End Sub
  
  Private Sub InitUI
   
    Dim ms As New MenuStrip
    ms.Parent = Me
    
    Dim fileItem As New ToolStripMenuItem("&File")  
    Dim exitItem As New ToolStripMenuItem("&Exit", Nothing, _
      New EventHandler(AddressOf OnExit))
    
    exitItem.ShortcutKeys = Keys.Control Or Keys.X
    
    Dim import As New ToolStripMenuItem
    import.Text = "Import"

    Dim temp As New ToolStripMenuItem
    temp.Text = "Import newsfeed list..."
    import.DropDownItems.Add(temp)

    temp = New ToolStripMenuItem
    temp.Text = "Import bookmarks..."
    import.DropDownItems.Add(temp)

    temp = New ToolStripMenuItem
    temp.Text = "Import mail..."
    
    import.DropDownItems.Add(temp)
    fileItem.DropDownItems.Add(import)
    fileItem.DropDownItems.Add(exitItem)

    ms.Items.Add(fileItem)
    Me.MainMenuStrip = ms
    
  End Sub

  Private Sub OnExit(ByVal sender As Object, ByVal e As EventArgs)
    Me.Close
  End Sub


  Public Shared Sub Main
    Application.Run(New WinVBApp)
  End Sub
   
End Class

In this example, we create one submenu. The submenu Import has three menu items.

Dim import As New ToolStripMenuItem
import.Text = "Import"

A ToolStripMenuItem can be a menu or a menu item. Here it will act as a submenu.

Dim temp As New ToolStripMenuItem
temp.Text = "Import newsfeed list..."
import.DropDownItems.Add(temp)

Here we create a menu item and add it to the Import submenu.

Figure: Submenu

Check menu item

The next code example demonstrates, how to create a checked menu item.

' ZetCode Mono Visual Basic Winforms tutorial
'
' This program creates a checked
' menu
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports System.Windows.Forms
Imports System.Drawing


Public Class WinVBApp
  Inherits Form

  Dim sb As Statusbar

  Public Sub New

     Me.Text = "Check menu item"
     Me.Size = New Size(380, 220)
     
     Me.InitUI
     
     Me.CenterToScreen

  End Sub
  
  Private Sub InitUI
   
    sb = New StatusBar
    sb.Parent = Me
    sb.Text = "Ready"

    Dim mainMenu As New MainMenu

    Dim file As MenuItem = mainMenu.MenuItems.Add("&File")
    file.MenuItems.Add(New MenuItem("E&xit", _
      New EventHandler(AddressOf OnExit), Shortcut.CtrlX))

    Dim view As MenuItem = mainMenu.MenuItems.Add("&View")
    Dim viewStatusBar As New MenuItem("View StatusBar")
    viewStatusBar.Checked = True
    view.MenuItems.Add(viewStatusBar)

    Me.Menu = mainMenu
    
    AddHandler viewStatusBar.Click, AddressOf Me.ToggleStatusBar

    
  End Sub
  
  Private Sub ToggleStatusBar(ByVal sender As Object, ByVal e As EventArgs) 
  
    Dim check As Boolean = sender.Checked
    
    If check 
      sb.Visible = False
      sender.Checked = False
    Else 
      sb.Visible = True
      sender.Checked = True
    End If
    
  End Sub


  Private Sub OnExit(ByVal sender As Object, ByVal e As EventArgs)
    Me.Close
  End Sub


  Public Shared Sub Main
    Application.Run(New WinVBApp)
  End Sub
   
End Class

We have two menus. File and View. The View menu has a menu item that toggles the visibility of the statusbar.

Dim mainMenu As New MainMenu

In this example, we use the MainMenu control. To create a menubar, we can use either MainMenu or MenuStrip controls. The latter has some additional functionality.

viewStatusBar.Checked = True

This menu item is checked by default, because the statusbar is visible from the start of the application.

Dim check As Boolean = sender.Checked
 
If check 
  sb.Visible = False
  sender.Checked = False
Else 
  sb.Visible = True
  sender.Checked = True
End If

We determine if the menu item is checked. We show and hide the statusbar and the check tick depending on the check value.

Figure: Check menu item

Images, separator

We will further enhance our knowledge of the MenuStrip control. We will create a menu item with an image and show how to separate them with a separator.

' ZetCode Mono Visual Basic Winforms tutorial
'
' This program shows how to add images and
' separators to menu items
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports System.Windows.Forms
Imports System.Drawing


Public Class WinVBApp
  Inherits Form

  Public Sub New

     Me.Text = "MenuStrip"
     Me.Size = New Size(250, 200)
     
     Me.InitUI
     
     Me.CenterToScreen

  End Sub
  
  Private Sub InitUI
   
    Dim menuStrip As New MenuStrip
  
    Dim titem1 As New ToolStripMenuItem("File")
    menuStrip.Items.Add(titem1)
  
    Dim titem2 As New ToolStripMenuItem("Tools")
    menuStrip.Items.Add(titem2)
  
    Dim subm1 As New ToolStripMenuItem("New")  
    subm1.Image = Image.FromFile("new.png")
    titem1.DropDownItems.Add(subm1)
  
    Dim subm2 As New ToolStripMenuItem("Open") 
    subm2.Image = Image.FromFile("open.png")
    titem1.DropDownItems.Add(subm2)
  
    titem1.DropDownItems.Add(New ToolStripSeparator)

    Dim subm3 As New ToolStripMenuItem("Exit")
    subm3.Image = Image.FromFile("exit.png")
    titem1.DropDownItems.Add(subm3)
  
    AddHandler subm3.Click, AddressOf Me.OnExit
    
    Controls.Add(menuStrip)
  
    MainMenuStrip = menuStrip
    
  End Sub

  Private Sub OnExit(ByVal sender As Object, ByVal e As EventArgs)
    Me.Close
  End Sub


  Public Shared Sub Main
    Application.Run(New WinVBApp)
  End Sub
   
End Class

We have two menus in our code example. File and Tools. In the File we have three menu items with images. We have also one separator. In this example, the PNG images must be located in the current working directory.

Dim subm1 As New ToolStripMenuItem("New")  
subm1.Image = Image.FromFile("new.png")
titem1.DropDownItems.Add(subm1)

Here we create the first menu item. To add an image to the item, we set the Image property to our image. We create an Image from the specified file using the static FromFile method.

titem1.DropDownItems.Add(New ToolStripSeparator)

Here we add a separator to the File menu.

Figure: Images and separator

ToolBar

Menus group all commands that we can use in an application. Toolbars provide a quick access to the most frequently used commands. ToolBar control is used to display ToolBarButton controls. We can assign images to the buttons by creating an ImageList . We than assign the image list to the ImageList property of the toolbar and assign the image index value to the ImageIndex property for each ToolBarButton .

' ZetCode Mono Visual Basic Winforms tutorial
'
' This program creates a toolbar
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports System.Windows.Forms
Imports System.Drawing


Public Class WinVBApp
  Inherits Form

  Dim sb As Statusbar

  Public Sub New

     Me.Text = "Toolbar"
     Me.Size = New Size(250, 220)
     
     Me.InitUI
     
     Me.CenterToScreen

  End Sub
  
  Private Sub InitUI
   
    Dim toolBar As New ToolBar
    toolBar.Parent = Me
    Dim toolBarIcons As New ImageList
    Dim saveb As New ToolBarButton
    Dim exitb As New ToolBarButton

    saveb.ImageIndex = 0
    saveb.Tag = "Save"
    exitb.ImageIndex = 1
    exitb.Tag = "Exit"
    
    toolBar.ImageList = toolBarIcons
    toolBar.ShowToolTips = True
    toolBar.Buttons.AddRange(New ToolBarButton() {saveb, exitb})
    
    toolBarIcons.Images.Add(New Icon("new.ico"))
    toolBarIcons.Images.Add(New Icon("exit.ico"))
    
    AddHandler toolBar.ButtonClick, AddressOf Me.OnClicked

  End Sub
  

  Private Sub OnClicked(ByVal sender As Object, _
    ByVal e As ToolBarButtonClickEventArgs)

    If e.Button.Tag.Equals("Exit")
      Me.Close
    End If
  End Sub


  Public Shared Sub Main
    Application.Run(New WinVBApp)
  End Sub
   
End Class

In our example, we show two buttons on the toolbar.

Dim toolBar As New ToolBar

Here we create the ToolBar control.

toolBar.ImageList = toolBarIcons

An image list is created.

Dim saveb As New ToolBarButton
Dim exitb As New ToolBarButton

These are two toolbar buttons.

saveb.ImageIndex = 0

We determine which icon from the image list will be used for the save toolbar button.

toolBar.Buttons.AddRange(New ToolBarButton() {saveb, exitb})

The ToolBarButton controls are added to the toolbar.

toolBarIcons.Images.Add(New Icon("new.ico"))
toolBarIcons.Images.Add(New Icon("exit.ico"))

Icons are added to the image list.

If e.Button.Tag.Equals("Exit")
  Me.Close
End If

If the tag of the button equals to "Exit", we close the application.

Figure: ToolBar

This part of the Visual Basic Winforms tutorial was about menus and toolbars.