Home  Contents

Menus and toolbars

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.


Simple menu
Figure: Simple menu

Each menu item can also have a submenu. This way we can group similar commnads 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.


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.


Check menu item
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.


MenuStrip
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.


ToolBar
Figure: ToolBar

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



Home ‡ Contents ‡ Top of Page
ZetCode last modified June 2, 2009 © 2007 - 2011 Jan Bodnar