Home

Characteristics of Applications Menus

 

Visual Assistance With Menu Items

 

Introduction

In the previous lesson, we saw how to create a menu. Here is an example:

using System;
using System.Drawing;
using System.Windows.Forms;
public class Exercise : System.Windows.Forms.Form
{
    MenuStrip mnuMain;

    ToolStripMenuItem mnuFile;
    ToolStripMenuItem mnuFileNew;

    public Exercise()
    {
        InitializeComponent();
    }

    void InitializeComponent()
    {
        mnuMain = new MenuStrip();
        Controls.Add(mnuMain);

        mnuFile = new ToolStripMenuItem("File");
        mnuFileNew = new ToolStripMenuItem("New");

        mnuFile.DropDownItems.Add(mnuFileNew);
        mnuMain.Items.Add(mnuFile);
    }
}

public class Program
{
    static int Main()
    {
        System.Windows.Forms.Application.Run(new Exercise());
        return 0;
    }
}

This would produce:

Main Menu

After creating a menu (main menu and contextual menu), there are various actions you can perform to improve it and there are many ways you can enhance the user's experience with your application. Menus provide various features such as access keys and shortcuts. There are also other things you can do such as grouping menus. Although some of these actions are not required to make an application useful, they can be necessary to make it more professional.

Practical LearningPractical Learning: Introducing Menu Appearance

  1. Start a new Windows Forms Application named SolasPropertyRental2
  2. Change the properties of the form as follows:
    Text: Solas Property Rental
    StartPosition: CenterScreen
  3. On the main menu, click Project -> Add Class...
  4. Set the Name to RentalProperty and click Add
  5. Change the file as follows:
     
    using System;
    
    namespace SolasPropertyRental2
    {
        public class RentalProperty
        {
            public string PropertyCode;
            public string PropertyType;
            public int Bedrooms;
            public float Bathrooms;
            public decimal MonthlyRent;
            public string Status;
        }
    }
  6. In the Solution Explorer, right-click Form1.cs and click Rename
  7. Type Central.cs and press Enter twice (to display the form)
  8. Double-click an unoccupied area of the form to generate its Load event
  9. Make the following changes:
     
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Text;
    using System.Windows.Forms;
    using System.Collections;
    
    namespace SolasPropertyRental2
    {
        public partial class Central : Form
        {
            ArrayList lstRentalProperties;
    
            public Central()
            {
                InitializeComponent();
            }
    
            private void Central_Load(object sender, EventArgs e)
            {
                lstRentalProperties = new ArrayList();
            }
        }
    }
  10. Re-display the form
  11. In the Menus & Toolbars section of the Toolbox, click the MenuStrip button and click the form
  12. While the menu strip is still selected, in the Properties window, click (Name) and type mnuMain
  13. In the Common Controls section of the Toolbox, click ListView and click the form
  14. While the picture box is still selected, in the Properties window, change its characteristics as follows:
    Dock: Fill
    FullRowSelect: True
    GridLines: True
    (Name): lvwRentalProperties
    View: Details
    HeaderStyle: Nonclickable
  15. Still in the Properties window, click Columns and click its ellipsis button
  16. Create the columns as follows:
     
    (Name) Text TextAlign Width
    colPropertyCode Prop Code    
    colPropertyType Property Type Center 80
    colBedrooms Bedrooms Right  
    colBathrooms Bathrooms Right 62
    colMonthlyRent Monthly Rent Right 75
    colStatus Status    
  17. Click OK
  18. In the Menus & Toolbars section of the Toolbox, click the ContextMenuStrip button and click the form
  19. While the menu strip is still selected, in the Properties window, click (Name) and type cmsProperties
  20. On the form, click the list view
  21. In the Properties window, click ContextMenuStrip and select cmsProperties

Access Keys

You may notice that some menu items have a letter underlined. Using this letter allows the user to access the menu using a keyboard. For example, if the letter F is underline in a File menu as in File, the user can access the File menu by pressing the Alt, then the F keys. To create this functionality, choose a letter on the menu item and precede it with the & character. For example, &File would produce File. You can apply the same principle if you are programmatically creating the menu. Here are two examples:

void InitializeComponent()
{
        mnuMain = new MenuStrip();
        Controls.Add(mnuMain);

        mnuFile = new ToolStripMenuItem("&File");
        mnuFileNew = new ToolStripMenuItem("&New");

        mnuFile.DropDownItems.Add(mnuFileNew);
        mnuMain.Items.Add(mnuFile);
}

After creating the menu, to use it, the user can press Alt or F10:

Access Keys

Practical LearningPractical Learning: Using Access Keys

  1. Under the form, click mnuMain
  2. In the Properties window, click Items and click its ellipsis button
  3. In the Items Collection Editor, make sure MenuItem is selected in the Select Item And Add To List Below combo box and click Add
  4. While toolStripMenuItem1 is selected in the Members combo box, in the right list, change the following characteristics:
    Text: &File
    (Name): mnuFile
  5. Still in the right list, click DropDownItems and click its ellipsis button
  6. In the Items Collection Editor, make sure MenuItem is selected in the Select Item And Add To List Below combo box and click Add
  7. While toolStripMenuItem1 is selected in the Members combo box, in the right list, change the following characteristics:
    Text: &New Property
    (Name): mnuFileNewProperty
  8. In the Items Collection Editor (mnuFile.DropDownItems), click OK
  9. In the Items Collection Editor, click OK

Shortcuts

A shortcut is a key or a combination of keys that the user can press to perform an action that can also be performed using a menu item. When creating a menu, to specify a shortcut, use the ShortcutKeys property.

To visually specify a shortcut, in the menu designer, click the menu item. In the Properties window, click ShortcutKeys and click the arrow of the field, a window would come up:

To specify just a letter for the shortcut, you can click the arrow of the combo box on the left side of the Reset button. A list would come up from which you can select the desired letter:

You are probably more familiar with shortcuts made of combinations of keys, such as Ctrl + N, Alt + F6, or Ctrl + Alt + Delete. To visually create such a shortcut, click the check box(es) and select the desired letter.

If you have used applications like Microsoft Word or Adobe Photoshop, you may know that they don't show all of their shortcuts on the menu. If you want to hide a shortcut, after specifying it, in the Properties window, set the ShowShortcutKeys property to False.

To programmatically specify a shortcut, assign a key or a combination of keys to the ShortcutKeys property of the ToolStripMenuItem class. The ShortcutKeys property is of type Keys, which is an enumeration of the various keys of a keyboard recognized by Microsoft Windows. Here is an example:

public class Exercise : System.Windows.Forms.Form
{
    MenuStrip mnuMain;
    ToolStripMenuItem mnuFile;
    ToolStripMenuItem mnuFileNew;
    ToolStripMenuItem mnuFileExit;
    ToolStripMenuItem mnuFormat;
    ToolStripMenuItem mnuFormatFont;

    public Exercise()
    {
        InitializeComponent();
    }

    void InitializeComponent()
    {
        mnuMain = new MenuStrip();
        Controls.Add(mnuMain);

        mnuFile = new ToolStripMenuItem("&File");
        mnuFileNew = new ToolStripMenuItem("&New");

        mnuFileExit = new ToolStripMenuItem("E&xit");

        mnuFormat = new ToolStripMenuItem("For&mat");
        mnuFormatFont = new ToolStripMenuItem("Fo&nt");

        mnuFormatFont.ShortcutKeys = Keys.F4;

        mnuFile.DropDownItems.Add(mnuFileNew);
        mnuFile.DropDownItems.Add(mnuFileExit);
        mnuMain.Items.Add(mnuFile);

        mnuFormat.DropDownItems.Add(mnuFormatFont);
        mnuMain.Items.Add(mnuFormat);
    }
}

This would produce:

To create a shortcut that is a combination of keys, use the bit manipulation operator OR represented by |. Here is an example:

void InitializeComponent()
{
        mnuMain = new MenuStrip();
        Controls.Add(mnuMain);

        mnuFile = new ToolStripMenuItem("&File");
        mnuFileNew = new ToolStripMenuItem("&New");

        mnuFileNew.ShortcutKeys = Keys.Control | Keys.N;

        mnuFileExit = new ToolStripMenuItem("E&xit");

        mnuFormat = new ToolStripMenuItem("For&mat");
        mnuFormatFont = new ToolStripMenuItem("Fo&nt");
        mnuFormatFont.ShortcutKeys = Keys.F4;

        mnuFile.DropDownItems.Add(mnuFileNew);
        mnuFile.DropDownItems.Add(mnuFileExit);
        mnuMain.Items.Add(mnuFile);

        mnuFormat.DropDownItems.Add(mnuFormatFont);
        mnuMain.Items.Add(mnuFormat);
}

This would produce:

Normally, when you have associated a shortcut with a menu item, when the user displays the menu, the shortcut would appear. In some applications, you may want to hide the shortcut. To support this, the ToolStripMenuItem class is equipped with the Boolean ShowShortcutKeys property. The default value of this property is true. If you want to hide the shortcut, you can set this property to false.

Practical LearningPractical Learning: Creating Shortcuts

  1. Under the form, click mnuMain
  2. In the Properties window, click Items and click its ellipsis button
  3. In the Members list of the Items Collection Editor, click mnuFile
  4. On the right side, click DropDownItems and click its ellipsis button
  5. In the Members list, click mnuFileNewProperty
  6. In the right list, click ShortcutKeys and click the arrow of its combo box
  7. In the window that appears, click the Ctrl check box
  8. Click the arrow of the combo box next to Reset, scroll down and select N
  9. In the Items Collection Editor (mnuTools.DropDownItems), click OK
  10. In the Items Collection Editor, click OK

Three Periods

When a user has clicked a menu item, an action is supposed to occur. In some cases, an intermediary action is necessary before performing or completing the action. To indicate that an intermediary action is needed for the action related to the menu item, Microsoft standards suggest that the menu's text be followed by three periods. For example, in WordPad, if you want to display the date or the time or both on a document, you must open a dialog box that would present various options for you to choose how the date/time should be displayed. To indicate that you will perform a primary action before displaying the value, the menu that leads to it shows three periods:

The 3-periods menu

In this case, when you click the menu item, a dialog box would come up for you to select the desired value.

There is no programmatic relationship between the application and the menu item that displays three periods. It is only a suggestion to show them. Therefore, when creating a menu item, if you know that an intermediary action will be used to perform or complete the actual action, add three periods on the right side of its text. Here is an example:

public class Exercise : System.Windows.Forms.Form
{
    MenuStrip mnuMain;
    ToolStripMenuItem mnuSelect;
    ToolStripMenuItem mnuSelectColor;

    public Exercise()
    {
        InitializeComponent();
    }

    void InitializeComponent()
    {
        mnuMain = new MenuStrip();
        Controls.Add(mnuMain);

        mnuSelect = new ToolStripMenuItem("&Select");

        mnuSelectColor = new ToolStripMenuItem("Background Color...");

        mnuSelect.DropDownItems.Add(mnuSelectColor);
        mnuMain.Items.Add(mnuSelect);
    }
}

This would produce:

Because the three periods indicate to the user that an intermediary action will be performed, when implementing the code for the menu item, make sure you provide that intermediary action. Here is an example:

public class Exercise : System.Windows.Forms.Form
{
    MenuStrip mnuMain;
    ToolStripMenuItem mnuSelect;
    ToolStripMenuItem mnuSelectColor;

    public Exercise()
    {
        InitializeComponent();
    }

    void InitializeComponent()
    {
        mnuMain = new MenuStrip();
        Controls.Add(mnuMain);

        mnuSelect = new ToolStripMenuItem("&Select");
        mnuSelectColor = new ToolStripMenuItem("Background Color...");
        mnuSelectColor.Click +=
            new EventHandler(SelectBackgroundColor);

        mnuSelect.DropDownItems.Add(mnuSelectColor);
        mnuMain.Items.Add(mnuSelect);
    }

    void SelectBackgroundColor(object sender, EventArgs e)
    {
        ColorDialog dlgColor = new ColorDialog();

        if (dlgColor.ShowDialog() == DialogResult.OK)
            BackColor = dlgColor.Color;
    }
}

Practical LearningPractical Learning: Creating an Intermediary Action

  1. Under the form, click cmsProperties
  2. In the Properties window, click Items and click its ellipsis button
  3. In the Select Items And Add To List Below combo box, make sure MenuItem is selected and click Add
  4. On the right side, click Text and type New Property...
  5. Click (Name) and type mnuProperty
  6. Click Shortcut and click the arrow of its combo box
  7. Click the Ctrl check box and click the arrow of the combo box to select N
  8. In the Items Collection Editor, click OK
  9. On the main menu, click Project -> Add Windows Form
  10. Set the Name to PropertyEditor and click Add
  11. Design the form as follows:
     
    Control Text Name Other Properties
    Label Property Code:    
    TextBox   txtPropertyCode  
    Button OK btnOK DialogResult: OK
    Label   Property Type:  
    ComboBox Unknown cbxPropertyTypes Items:
    Unknown
    Apartment
    Townhouse
    Single Family
    Button Cancel btnCalncel DialogResult: Cancel
    Label Bedrooms:    
    TextBox 0 txtBedrooms  
    Label Bathrooms:    
    TextBox 0.00 txtBathrooms  
    Label Monthly Rent:    
    TextBox 0.00 txtMonthlyRent  
    Label Occupancy Status:    
    ComboBox Unknown cbxStatus Unknown
    Available
    Occupied
    Needs Repair
    Form FormBorderStyle:  FixedDialog
    Text: Solas Property Rental - Property Editor
    StartPosition: CenterScreen
    AcceptButton: btnOK
    CancelButton: btnCancel
    MaximizeBox: False
    MinimizeBox: False
    ShowInTaskbar: False
  12. On the main menu, click Window -> Central.cs [Design]
  13. Under the form, click cmsProperties and, on the form, double-click New Property
  14. Implement the event as follows:
     
    private void mnuProperty_Click(object sender, EventArgs e)
    {
        RentalProperty SampleProperty = new RentalProperty();
        PropertyEditor editor = new PropertyEditor();
    
        Random rndCode = new Random();
        string strCode1 = rndCode.Next(100, 999).ToString();
        string strCode2 = rndCode.Next(100, 999).ToString();
        editor.txtPropertyCode.Text = strCode1 + "-" + strCode2;
    
        if (editor.ShowDialog() == DialogResult.OK)
        {
            SampleProperty = new RentalProperty();
            SampleProperty.PropertyCode = editor.txtPropertyCode.Text;
            SampleProperty.PropertyType = editor.cbxPropertyTypes.Text;
            SampleProperty.Bedrooms = int.Parse(editor.txtBedrooms.Text);
            SampleProperty.Bathrooms = float.Parse(editor.txtBathrooms.Text);
            SampleProperty.MonthlyRent = decimal.Parse(editor.txtMonthlyRent.Text);
            SampleProperty.Status = editor.cbxStatus.Text;
            lstRentalProperties.Add(SampleProperty);
        }
                
        lvwRentalProperties.Items.Clear();
    
        if (lstRentalProperties.Count > 0)
        {
            foreach (RentalProperty prop in lstRentalProperties)
            {
                ListViewItem itmProperty = new ListViewItem(prop.PropertyCode);
                itmProperty.SubItems.Add(prop.PropertyType);
                itmProperty.SubItems.Add(prop.Bedrooms.ToString());
                itmProperty.SubItems.Add(prop.Bathrooms.ToString("F"));
                itmProperty.SubItems.Add(prop.MonthlyRent.ToString("F"));
                itmProperty.SubItems.Add(prop.Status);
                lvwRentalProperties.Items.Add(itmProperty);
            }
        }
    }
  15. Return to the (Central) form
  16. On the form, click File and click New Property
  17. In the Properties window, edit its Text property to display &New Property...
  18. On the form, click File and double-click New Property
  19. Implement the event as follows:
     
    private void mnuFileNewProperty_Click(object sender, EventArgs e)
    {
            mnuProperty_Click(sender, e);
    }
  20. Execute the application and try creating the following properties (let the computer generate the properties codes):
     
    Property Types Bedrooms Bathrooms Monthly Rent Status
    Apartment 1 1 925 Occupied
    Apartment 2 1 1150.50 Available
    Single Family 5 3.5 2250.85 Occupied
    Townhouse 3 2.5 1750 Occupied
    Townhouse 4 2.5 1920.50 Available
    Single Family 4 2.5 2140.50 Needs Repair
    Apartment 3 2 1250.25 Available
    Townhouse 3 1.5 1650.50 Occupied
  21. Close the form and return to your programming environment
 

Home Copyright © 2007 FunctionX, Inc. Next