Web Design that taps into the haromny and vision of your dreams.

Menus, Popups and Toolbars in .Net Forms and C#

Adding menus and navigation to applications

Written By on in C#

1,518 words, estimated reading time 7 minutes.

In this tutorial, we will create a demo application where we will have a look at some different types of menus.

Windows Forms Applications Series
  1. Basics of C# Windows Forms Applications
  2. Menus, Popups and Toolbars in .Net Forms and C#
  3. Using Common Dialogue Boxes in C#
  4. List Boxes and Tree Views in C#
  5. List Box Data Binding in C# Windows Forms Application
  6. Using Multiple Forms in C# Applications with MDI
  7. Creating Controls for Windows Forms and C#
  8. Saving User Preferences and Settings within your C# Application

The two most common types of menu are the standard drop down menu and the pop-up context menu. These are both found within the Menus & Toolbars tab of the toolbox.

This tutorial is specific to .Net 2.0 and above. In previous versions a completely different set of components were used which did not have any support for OS visualisations (skins) and they were based on old Win32 technology. The .Net 2.0 versions of these controls are skinnable, dragable, storable and in line with the modern XP/Vista user interface theme.

The Menu Strip and Context Menu Strip

Both controls can be dragged onto a form, and since they are 'non visual' components they will appear in a grey area below the form designer. By clicking on the menuStrip or contextMenuStrip the form designer will show a menu that you can click and type values into, both controls behave in the same manner. The designer will automatically expand to show sub menus.

Visual Studio Menu Designer
Visual Studio Menu Designer

Add a menuStrip component to your form, and create a File menu with two sub items called New and Exit, making the n and x hotkeys.

When you give a menu item a title, you can use the & symbol to define a hotkey, for example &File will allow the Alt followed by the F key to open the file menu. We will also provide a shortcut key to the new document item by selecting it and changing the ShortcutKeys property of the item. Shortcut keys are usually actioned with the control key, for example (Ctrl+N) for a new document. Finally, we should give the menu item a meaningful name such as evtNewDocument and evtExitProgram. We suggest using the evt prefix as we are dealing with an event (not a C# event, but a user event such as open file, save file, make selection bold etc...), but you could also use mnuNewDocument if you wish.

Toolbars

Toolbars are another method for program navigation. They are commonly a series of buttons along the top of the application, just below the menu. They should be the most common features, or most often used.

Let's create a toolbar on our form by dragging a ToolStrip onto the form. This will allow us to create some buttons and link them to actions. You can create a button on the tool strip by clicking on the down arrow that appears and from there you can select any of the controls on the list. Alternatively you can right click on the tool strip and select insert from the menu, and add button from the sub menu. This is going to become our New Document button.

You should now give your new button a name, such as btnNewDocument, and give it a meaningful Title and ToolTipText. The title is the text that appears when icons are not shown, and the ToolTipText should be changed to reflect the function that button performs. The ToolTipText will appear when your mouse is hovered above the button and is usually shown in a yellow pop-up box.

It would be a good idea to give the button a meaningful icon. Visual Studio 2005 gives you a large icon library to choose from, which is located in C:Program FilesMicrosoftVisual Studio 8Common7VS2005ImageLibrary. There is a ZIP archive that you can extract to obtain all the icons; alternatively you can use any image from the web or hard drive. I used the new document image located in the bitmaps/commands/32bitcolor folder. You may have to change the transparent colour if the image does not look correct. This is a property in the properties and events window. When adding icons to your program, select Project Resource File rather than Local recourse, so that the icon can be reused throughout the project.

Adding a Rich Text Editor

In order to make our sample program a little more functional, we are going to add a rich text editor to the form. A rich text editor will provide an area we can type text into, and at a later date, format it.

Drag a RichTextBox control onto the form and you will see that the control is small, and does not resize when you maximise the window. What we need to do is tell the control to fill the form, a process known as docking. Back in the editor, select the RichTextBox and click on the little arrow in the top right, then select "Dock in parent container". Now try maximising the form or resizing it and notice how the RichTextBox always fills the entire form.

Expand the common format settings window.
Expand the common format settings window.

Adding Some Events

In order to be useful, a menu or toolbar must have an event associated with it. This is done in exactly the same way as adding an event to a button or form: by double clicking it, or by double clicking the Click event in the properties window. This will open up the code editor with a new method already declared. All you have to do is type in the code for the action it should perform.

Double click on the exit menu item to launch the code editor and type in the following code to close the program.

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

Next, double click on the New menu item and add the following code:

private void evtNewDocument_Click(object sender, EventArgs e)
{
  richTextBox1.Clear();
}

Delegate Events in Action

If you followed the C# tutorials all the way through you will have seen delegate methods and events. Well, now we will see a real world example of how a delegate event (Click) can be used to call the same code from two different controls.

When we created the New Document menu item, we also created a method called evtNewDocument_Click to handle the click event. We can use that same method on our toolbar button Click event. Click on the toolbar button for New Document that we created and on the properties windows, press the lightning symbol to change to events and find the Click event. On the right hand side you will see a drop-down arrow, which expands a list of events that match a click event signature. You should see our evtNewDocument_Click listed and you can select it.

We now have a menu item and a button calling the same method. This not only saves coding time, but reduces maintenance overheads and code duplication.

Testing

Run the program and type some text into the RichTextBox, try out the toolbar button and it will clear the contents of the text box. Type some more text into the box and try the new documents menu item. It will also clear the contents of the text box. Now exit the program using File ยป Exit.

Popup Context Menus

A context menu is typically the "right click" menu in Windows. These behave in exactly the same way as a regular menu strip, except that they are not visible at design time. To add a context menu simply add a context menu strip from the toolbox to the form and it will be added in the grey area at the bottom of the form designer. Click on it to edit the context menu, and add items for Bold, Italic and Underline. Also give the items correct names, and optionally apply a font style to the menu items using the Font property in the properties window.

Next we need to assign the Context Menu Strip to the RichTextBox, so click on the RichTextBox and in the properties window, locate the property called ContextMenuStrip and drop it down and select the new context menu strip. You can test this by running the program and right clicking on the rich text box. The popup menu will appear each time next to the mouse pointer.

Back in the editor, we will now add some events to the context menu. Double click on each of the items in turn and add in the code below as appropriate.

private void btnFormatBold_Click(object sender, EventArgs e)
{
  richTextBox1.SelectionFont = new Font(richTextBox1.SelectionFont, 
    richTextBox1.SelectionFont.Style ^ FontStyle.Bold);
}
 
private void btnFormatItalic_Click(object sender, EventArgs e)
{
  richTextBox1.SelectionFont = new Font(richTextBox1.SelectionFont, 
    richTextBox1.SelectionFont.Style ^ FontStyle.Italic);
}
 
private void btnFormatUnderline_Click(object sender, EventArgs e)
{
  richTextBox1.SelectionFont = new Font(richTextBox1.SelectionFont, 
    richTextBox1.SelectionFont.Style ^ FontStyle.Underline);
}

Now you can run the program and test the popup context menu, changing the font styles with the popup menus.

Here is an extra task for you to do yourself. Can you add in three buttons to the toolbar and enable them to change the font style? Can you also create a Format menu with these items on as well?

Hint: You may wish to use a separator item to space out the new document and the formatting buttons.

Notepad Lite Application
Notepad Lite Application

And there is your first Windows application - Notepad Lite!

In the next tutorial we will look at some common dialogue boxes, and see how we can save data to disk and how to load it back into our program.

Last updated on: Friday 23rd June 2017

 

Comments

There are no comments for this post. Be the first!

 

Leave a Reply

Your email address will not be published.





If you find something abusive or that does not comply with our terms or guidelines please flag it as inappropriate.

Copyright © 2001-2018 Tim Trott, all rights reserved. Web Design by Azulia Designs

This web page is licensed for your personal, private, non-commercial use only.

Disclaimer, Privacy & LegalSitemapContact Me