MDI (Multiple Document Interface) is a type of GUI (Graphical User Interface), which presents a single parent (container) window for other windows in a specific application. The opposites of MDI are SDI (Single Document Interface) and TDI (Tabbed Document Interface).
The main advantages of MDI are:
- Child windows are easily managed from a single parent (container) form.
- A single menu and toolbar can be shared for other windows.
- The possibility to work with multiple documents in one window of the same application.
- Closing the parent (container) window, the user closes other child windows.
Special Tutorial Requirements:
- C# IDE (Visual Studio 2008 used in this tutorial)
- .NET Framework 1.0
So, let's start creating an MDI application.
1. Create a standard C# Windows Forms Application:
2. First of all I have to create a container form. The first form that was created by default can become a container just by changing the IsMdiContainer property to True:
Now, the form should look like this:
3. Now, I will add a new form to the project. It will be a child form. To add a new form, use the Add New Item button on the IDE toolbar (if you use Visual Studio). Select the Add Windows Form... option from the dropdown menu:
4. Now, when a new form is created, I need to call it from the parent form, so I will create a menu on the first form, using the MenuStrip control:
5. To the newly created menu I will add a root element (I will call it "Container") and a child element (called "New Child..."):
6. Now, to open a new child in the parent form, add this code to the "New Child..." menu item:
csharp
// Declare the child form as a new one.
Form2 childForm = new Form2();
// Set the main form as a parent form.
childForm.MdiParent = this;
// Show the child form.
childForm.Show();
Now, if you compile the application and click several times on the "New Child..." menu item, you will get new child forms inside the parent form:
7. Now, I will add some additional menu items, that will have the functionality needed to arrange the child forms inside the parent form.
Basically, there are four types of arrangement:
- Cascade
- Tile Horizontal
- Tile Vertical
- Arrange Icons
So, add the new menu items (as in the image below):
Here goes the code for all the types of arrangements (add this code to the corresponding menu items):
Cascade
csharp
// Set the layout to cascade.
this.LayoutMdi(MdiLayout.Cascade);
Screenshot:
Tile Horizontal
csharp
// Set the layout to tile horizontal.
this.LayoutMdi(MdiLayout.TileHorizontal);
Screenshot:
Tile Vertical
csharp
// Set the layout to tile vertical.
this.LayoutMdi(MdiLayout.TileVertical);
Screenshot:
Arrange Icons
csharp
// Set the layout to arrange icons.
this.LayoutMdi(MdiLayout.ArrangeIcons);
Screenshot:
Note: the ArrangeIcons layout is available only for minimized child forms.
8. Now, if the user opens many child forms, it becomes harder to navigate between them, so I will set the MdiWindowListItem of the menu strip to windowToolStripMenuItem, so all opened child windows will be listed in the Window menu:
As the application starts and child windows are open, these are listed in the Window menu:
Now I can easily switch between all opened child windows.
This tutorial shows only the basics of creating a MDI application, but it also shows some fundamental MDI ideas and implementations.