Home

Applications Menus:
Grouping Menu Items

 

Menu Separators

As we will see in later sections, there are various ways you can make a menu look good and you have many options to configure menu items. One of the ways you can manage menu items is to group them in small entities of your choice. You can do this either for the looks or for aesthetic reasons.

A menu separator is a horizontal line among some menu items to visually divide them. Here is an example:

There are two reasons you would use a separator. You can use a separator just for aesthetic reasons, to make your menu look good. Another, more valuable reason, is to create groups of menu items and show their belonging together by showing a line separating one group from another.

To visually specify a separator, when creating the menu item, set its string to a simple -.

To support menu separators, the .NET Framework provides the ToolStripSeparator class, which is derived from ToolStripItem. To programmatically create a separator, declare a handle to ToolStripSeparator, initialize it using the new operator, add it to the Items property of the ToolStripItem menu category that will hold the separator. Here is an example:

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

    public Exercise()
    {
        InitializeComponent();
    }

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

        mnuFile = new ToolStripMenuItem("&File");
        mnuFileNew = new ToolStripMenuItem("&New");
        mnuFileNew.ShortcutKeys = Keys.Control | Keys.N;

        mnuSeparator = new ToolStripSeparator();

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

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

This would produce:

Menu Separator

Practical LearningPractical Learning: Creating an Intermediary Action

  1. On the (Central) form, click File and, under New Property, click Type Here
  2. Type - and press Enter
  3. Under the new separator, click Type Here, type E&xit and press Enter
  4. On the form, click File and click Exit
  5. In the Properties window, change the (Name) to mnuFileExit
  6. On the form, click File and double-click Exit
  7. Implement the event as follows:
     
    private void mnuFileExit_Click(object sender, EventArgs e)
    {
            Close();
    }
  8. Execute the application to test it
  9. Close the form using its main menu and return to your programming environment
  10. Under the form, click cmsProperties
  11. In the Properties window, click Items and click the ellipsis button
  12. In the Select Item And Add To List Below combo box, select Separator and click Add
  13. In the Select Item And Add To List Below combo box, select MenuItem and click Add
  14. On the side, change the properties as follows:
    Text: Show
    (Name): mnuShow
  15. Click OK

Sub-Menus

If you have menu items that perform similar tasks, you can put them in a group, which you can do using line separators. Another option is to create the menu items in their own group. The group of menu items that are created as children of a parent menu is referred to as a sub-menu. Here is an example of a sub-menu in Microsoft Paint:

Sub Menu

To visually create a sub-menu, under the form, click the menu control that will hold the items. In the menu designer

  • If the sub-menu will be created for a main menu item, first click the menu category, then click the menu item that will hold the sub-menu
  • If the sub-menu will be created for a contextual menu, click the menu item that will hold the sub-menu

After selecting the eventual parent of the intended sub-menu, click the right Type Here box, type the desired caption and optionally give it a name.

To create another item for the sub-menu, you can click the Type Here box under the previous one. In the same way, you can add as many items as you judge necessary. Here is an example:

You can also create a sub-menu for a menu item that itself is a sub-menu. Here is an example:

To create a sub-menu for an item A that itself is a sub-menu, click that menu item A, click the Type Here box on the right side, and type its caption.

As another technique, after selecting the menu item that will act as the parent of the sub-menu, in the Properties window, click the ellipsis button of the DropDownItems field to open the Items Collection Editor dialog box. To create an item for the sub-menu, in the top combo box, select MenuItem and click Add. Then configure the menu item as see fit (Text, (Name), etc).

Like any menu item, each sub-menu item is an object of type ToolStripMenuItem. Therefore, to programmatically create a sub-menu, create each ToolStripMenuItem item and add it to the ToolStripMenuItem menu item that will act as its parent.

Practical LearningPractical Learning: Creating and Using Sub-Menus

  1. Under the form, click cmsProperties and, on the form, click Show
  2. On the right side of Show, click Type Here, type All and press Enter
  3. Under All, click Type Here and type Apartments
  4. Press the down arrow key and type Townhouses
  5. Press the down arrow key and type Single Families
  6. On the form, click All and, in the Properties window, change its Name to mnuShowAll
  7. On the form, click Apartments and, in the Properties window, change its Name to mnuShowApartments
  8. On the form, click Townhouses and, in the Properties window, change its Name to mnuShowTownhouses
  9. On the form, click Single Families and, in the Properties window, change its Name to mnuShowSingleFamilies
  10. On the form and in the menu designer, double-click All and implement the event as follows:
     
    private void mnuShowAll_Click(object sender, EventArgs e)
    {
        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);
            }
        }
    }
  11. Return to the form and, on the form, double-click Apartments
  12. Implement the event as follows:
     
    private void mnuShowApartments_Click(object sender, EventArgs e)
    {
        lvwRentalProperties.Items.Clear();
    
        if (lstRentalProperties.Count > 0)
        {
            foreach (RentalProperty prop in lstRentalProperties)
            {
                if (prop.PropertyType == "Apartment")
                {
                    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);
                }
            }
        }
    }
  13. Return to the form and, on the form, double-click Townhouse
  14. Implement the event as follows:
     
    private void mnuShowTownhouses_Click(object sender, EventArgs e)
    {
        lvwRentalProperties.Items.Clear();
    
        if (lstRentalProperties.Count > 0)
        {
            foreach (RentalProperty prop in lstRentalProperties)
            {
                if (prop.PropertyType == "Townhouse")
                {
                    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 form and, on the form, double-click Single Families
  16. Implement the event as follows:
     
    private void mnuShowSingleFamilies_Click(object sender, EventArgs e)
    {
        lvwRentalProperties.Items.Clear();
    
        if (lstRentalProperties.Count > 0)
        {
            foreach (RentalProperty prop in lstRentalProperties)
            {
                if (prop.PropertyType == "Single Family")
                {
                    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);
                }
            }
        }
    }
  17. Execute the application to test it
  18. Create a few properties as earlier then change the types of properties to display
  19. Close the form and return to your programming environment
 

Previous Copyright © 2007 FunctionX, Inc. Next