Question

In this part of the Mono 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.

simplemenu.cs

using System;
using System.Drawing;
using System.Windows.Forms;

class MForm : Form {
  public MForm() {
    Text = "Simple menu";

    MenuStrip ms = new MenuStrip();
    ms.Parent = this;
    
    ToolStripMenuItem file = new ToolStripMenuItem("&File");      
    ToolStripMenuItem exit = new ToolStripMenuItem("&Exit", null,
      new EventHandler(OnExit));      
    exit.ShortcutKeys = Keys.Control | Keys.X;
    file.DropDownItems.Add(exit);

    ms.Items.Add(file);
    MainMenuStrip = ms;
    Size = new Size(250, 200);

    CenterToScreen();
  }

  void OnExit(object sender, EventArgs e) {
     Close();
  }
}

class MApplication {
  public static void Main() {
    Application.Run(new MForm());
  }
}

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.

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

ToolStripMenuItem file = new ToolStripMenuItem("&File");      

Here we create a menu.

ToolStripMenuItem exit = new ToolStripMenuItem("&Exit", null,
  new EventHandler(OnExit));   

This line creates the exit menu item.

exit.ShortcutKeys = Keys.Control | Keys.X;

We provide a shortcut for the exit menu item.

file.DropDownItems.Add(exit);

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

ms.Items.Add(file);      

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.

submenu.cs

using System;
using System.Drawing;
using System.Windows.Forms;

class MForm : Form {

  public MForm() {
    Text = "Submenu";

    MenuStrip ms = new MenuStrip();
    ms.Parent = this;

    ToolStripMenuItem file = new ToolStripMenuItem("&File");   
    ToolStripMenuItem exit = new ToolStripMenuItem("&Exit", null,
      new EventHandler(OnExit));     

    ToolStripMenuItem import = new ToolStripMenuItem();
    import.Text = "Import";

    file.DropDownItems.Add(import);

    ToolStripMenuItem temp = 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);

    file.DropDownItems.Add(exit);

    ms.Items.Add(file);
    MainMenuStrip = ms;
    Size = new Size(380, 200);

    CenterToScreen();
  }

  void OnExit(object sender, EventArgs e) {
     Close();
  }
}

class MApplication {
  public static void Main() {
    Application.Run(new MForm());
  }
}

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

ToolStripMenuItem import = new ToolStripMenuItem();
import.Text = "Import";

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

ToolStripMenuItem temp = 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.

checkmenuitem.cs

using System;
using System.Drawing;
using System.Windows.Forms;

class MForm : Form {

  private StatusBar sb;
  private MenuItem viewStatusBar;

  public MForm() {
    Text = "Check menu item";

    sb = new StatusBar();
    sb.Parent = this;
    sb.Text = "Ready";

    MainMenu mainMenu = new MainMenu();

    MenuItem file = mainMenu.MenuItems.Add("&File");      
    file.MenuItems.Add(new MenuItem("E&xit", 
      new EventHandler(OnExit), Shortcut.CtrlX));

    MenuItem view = mainMenu.MenuItems.Add("&View");
    viewStatusBar = new MenuItem("View StatusBar");
    viewStatusBar.Checked = true;
    viewStatusBar.Click += new EventHandler(ToggleStatusBar);
    view.MenuItems.Add(viewStatusBar);

    Menu = mainMenu;
    Size = new Size(250, 200);

    CenterToScreen();
  }

  void OnExit(object sender, EventArgs e) {
     Close();
  }

  void ToggleStatusBar(object sender, EventArgs e) {
    bool check = viewStatusBar.Checked;
    if (check) {
      sb.Visible = false;
      viewStatusBar.Checked = false;
    } else {
      sb.Visible = true;
      viewStatusBar.Checked = true;
    }
  }

}

class MApplication {
  public static void Main() {
    Application.Run(new MForm());
  }
}

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

MainMenu mainMenu = 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.

bool check = viewStatusBar.Checked;
if (check) {
  sb.Visible = false;
  viewStatusBar.Checked = false;
} else {
  sb.Visible = true;
  viewStatusBar.Checked = true;
}

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.

menustrip.cs

using System;  
using System.Drawing;
using System.Windows.Forms;  
  
class MForm : Form { 
 
  
  public MForm() {  
  Text = "MenuStrip";  
  Size = new Size(250, 200);
  
  MenuStrip menuStrip = new MenuStrip();  
  
  ToolStripMenuItem titem1 = new ToolStripMenuItem("File");  
  menuStrip.Items.Add(titem1);  
  
  ToolStripMenuItem titem2 = new ToolStripMenuItem("Tools");  
  menuStrip.Items.Add(titem2);  
  
  ToolStripMenuItem subm1 = new ToolStripMenuItem("New");  
  subm1.Image = Image.FromFile("new.png");
  titem1.DropDownItems.Add(subm1);  
  
  ToolStripMenuItem subm2 = new ToolStripMenuItem("Open");  
  subm2.Image = Image.FromFile("open.png");
  titem1.DropDownItems.Add(subm2);  
  
  titem1.DropDownItems.Add(new ToolStripSeparator());

  ToolStripMenuItem subm3 = new ToolStripMenuItem("Exit");  
  subm3.Image = Image.FromFile("exit.png");
  titem1.DropDownItems.Add(subm3);  
  
  subm3.Click += OnExit;  
  Controls.Add(menuStrip); 
 
  MainMenuStrip = menuStrip;  

  CenterToScreen();
  }  

  public static void Main() {  
  Application.Run(new MForm());  
  }  
  
  void OnExit(object sender, EventArgs e) {
     Close();
  } 
}

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.

ToolStripMenuItem subm1 = 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 .

toolbar.cs

using System;
using System.Drawing;
using System.Windows.Forms;

public class MForm : Form
{
  private ImageList toolBarIcons;
  private ToolBarButton save;
  private ToolBarButton exit;
  private ToolBar toolBar;

  public MForm()
  {
  Size = new Size(250, 200);
  Text = "Simple toolbar";

  toolBar = new ToolBar();
  toolBar.Parent = this;
  toolBarIcons = new ImageList();
  save = new ToolBarButton();
  exit = new ToolBarButton();

  save.ImageIndex = 0;
  save.Tag = "Save";
  exit.ImageIndex = 1;
  exit.Tag = "Exit";

  toolBar.ImageList = toolBarIcons;
  toolBar.ShowToolTips = true;
  toolBar.Buttons.AddRange(new ToolBarButton[] {save, exit});
  toolBar.ButtonClick += new ToolBarButtonClickEventHandler(OnClicked);
  
  toolBarIcons.Images.Add(new Icon("new.ico"));
  toolBarIcons.Images.Add(new Icon("exit.ico"));

  CenterToScreen();
  }

  static void Main() 
  {
  Application.Run(new MForm());
  }
  
  void OnClicked(object sender, ToolBarButtonClickEventArgs e) 
  {
    if (e.Button.Tag.Equals("Exit"))
      Close();
  }
}

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

toolBar = new ToolBar();

Here we create the ToolBar control.

toolBarIcons = new ImageList();

An image list is created.

save = new ToolBarButton();
exit = new ToolBarButton();

These are two toolbar buttons.

save.ImageIndex = 0;

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

toolBar.Buttons.AddRange(new ToolBarButton[] {save, exit});

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"))
  Close();

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

Figure: ToolBar

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