Edit

Walkthrough: Creating an MDI Form with Menu Merging and ToolStrip Controls

  • Article

The System.Windows.Forms namespace supports multiple document interface (MDI) applications, and the MenuStrip control supports menu merging. MDI forms can also ToolStrip controls.

This walkthrough demonstrates how to use ToolStripPanel controls with an MDI form. The form also supports menu merging with child menus. The following tasks are illustrated in this walkthrough:

  • Creating a Windows Forms project.

  • Creating the main menu for your form. The actual name of the menu will vary.

  • Adding the ToolStripPanel control to the Toolbox.

  • Creating a child form.

  • Arranging ToolStripPanel controls by z-order.

When you are finished, you will have an MDI form that supports menu merging and movable ToolStrip controls.

To copy the code in this topic as a single listing, see How to: Create an MDI Form with Menu Merging and ToolStrip Controls.

Prerequisites

You'll need Visual Studio to complete this walkthrough.

Create the project

  1. In Visual Studio, create a Windows Application project called MdiForm (File > New > Project > Visual C# or Visual Basic > Classic Desktop > Windows Forms Application).

  2. In the Windows Forms Designer, select the form.

  3. In the Properties window, set the value of the IsMdiContainer to true.

Create the main menu

The parent MDI form contains the main menu. The main menu has one menu item named Window. With the Window menu item, you can create child forms. Menu items from child forms are merged into the main menu.

  1. From the Toolbox, drag a MenuStrip control onto the form.

  2. Add a ToolStripMenuItem to the MenuStrip control and name it Window.

  3. Select the MenuStrip control.

  4. In the Properties window, set the value of the MdiWindowListItem property to ToolStripMenuItem1.

  5. Add a subitem to the Window menu item, and then name the subitem New.

  6. In the Properties window, click Events.

  7. Double-click the Click event.

    The Windows Forms Designer generates an event handler for the Click event.

  8. Insert the following code into the event handler.

    // This method creates a new ChildForm instance
// and attaches it to the MDI parent form.
private void newToolStripMenuItem_Click(object sender, EventArgs e)
{
    ChildForm f = new ChildForm();
    f.MdiParent = this;
    f.Text = "Form - " + this.MdiChildren.Length.ToString();
    f.Show();
}

    ' This method creates a new ChildForm instance 
' and attaches it to the MDI parent form.
 Private Sub newToolStripMenuItem_Click( _
 ByVal sender As Object, _
 ByVal e As EventArgs) _
 Handles newToolStripMenuItem.Click

     Dim f As New ChildForm()
     f.MdiParent = Me
     f.Text = "Form - " + Me.MdiChildren.Length.ToString()
     f.Show()

 End Sub

Add the ToolStripPanel control to the Toolbox

When you use MenuStrip controls with an MDI form you must have the ToolStripPanel control. You must add the ToolStripPanel control to the Toolbox to build your MDI form in the Windows Forms Designer.

  1. Open the Toolbox, and then click the All Windows Forms tab to show the available Windows Forms controls.

  2. Right-click to open the shortcut menu, and select Choose Items.

  3. In the Choose Toolbox Items dialog box, scroll down the Name column until you find ToolStripPanel.

  4. Select the check box by ToolStripPanel, and then click OK.

    The ToolStripPanel control appears in the Toolbox.

Create a child form

In this procedure, you will define a separate child form class that has its own MenuStrip control. The menu items for this form are merged with those of the parent form.

  1. Add a new form named ChildForm to the project.

    For more information, see How to: Add Windows Forms to a Project.

  2. From the Toolbox, drag a MenuStrip control onto the child form.

  3. Click the MenuStrip control's designer actions glyph (Small black arrow), and then select Edit Items.

  4. In the Items Collection Editor dialog box, add a new ToolStripMenuItem named ChildMenuItem to the child menu.

    For more information, see ToolStrip Items Collection Editor.

Test the form

  1. Press F5 to compile and run your form.

  2. Click the Window menu item to open the menu, and then click New.

    A new child form is created in the form's MDI client area. The child form's menu is merged with the main menu.

  3. Close the child form.

    The child form's menu is removed from the main menu.

  4. Click New several times.

    The child forms are automatically listed under the Window menu item because the MenuStrip control's MdiWindowListItem property is assigned.

Add ToolStrip support

In this procedure, you will add four ToolStrip controls to the MDI parent form. Each ToolStrip control is added inside a ToolStripPanel control, which is docked to the edge of the form.

  1. From the Toolbox, drag a ToolStripPanel control onto the form.

  2. With the ToolStripPanel control selected, double-click the ToolStrip control in the Toolbox.

    A ToolStrip control is created in the ToolStripPanel control.

  3. Select the ToolStripPanel control.

  4. In the Properties window, change the value of the control's Dock property to Left.

    The ToolStripPanel control docks to the left side of the form, underneath the main menu. The MDI client area resizes to fit the ToolStripPanel control.

  5. Repeat steps 1 through 4.

    Dock the new ToolStripPanel control to the top of the form.

    The ToolStripPanel control is docked underneath the main menu, but to the right of the first ToolStripPanel control. This step illustrates the importance of z-order in correctly positioning ToolStripPanel controls.

  6. Repeat steps 1 through 4 for two more ToolStripPanel controls.

    Dock the new ToolStripPanel controls to the right and bottom of the form.

Arrange ToolStripPanel controls by Z-order

The position of a docked ToolStripPanel control on your MDI form is determined by the control's position in the z-order. You can easily arrange the z-order of your controls in the Document Outline window.

  1. In the View menu, click Other Windows, and then click Document Outline.

    The arrangement of your ToolStripPanel controls from the previous procedure is nonstandard. This is because the z-order is not correct. Use the Document Outline window to change the z-order of the controls.

  2. In the Document Outline window, select ToolStripPanel4.

  3. Click the down-arrow button repeatedly, until ToolStripPanel4 is at the bottom of the list.

    The ToolStripPanel4 control is docked to the bottom of the form, underneath the other controls.

  4. Select ToolStripPanel2.

  5. Click the down-arrow button one time to position the control third in the list.

    The ToolStripPanel2 control is docked to the top of the form, underneath the main menu and above the other controls.

  6. Select various controls in the Document Outline window and move them to different positions in the z-order. Note the effect of the z-order on the placement of docked controls. Use CTRL-Z or Undo on the Edit menu to undo your changes.

Checkpoint - test your form

  1. Press F5 to compile and run your form.

  2. Click the grip of a ToolStrip control and drag the control to different positions on the form.

    You can drag a ToolStrip control from one ToolStripPanel control to another.

Next steps

In this walkthrough, you have created an MDI parent form with ToolStrip controls and menu merging. You can use the ToolStrip family of controls for many other purposes:

See also