27 December 2013

What is MDI and how to use it in C#?

In this tutorial I will explain what is MDI and how to use it in C#.

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 Itembutton 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:
1 // Declare the child form as a new one.
2 Form2 childForm = new Form2();

3 // Set the main form as a parent form.
4 childForm.MdiParent = this;

5 // Show the child form.
6 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 :
1 // Set the layout to cascade.
2 this.LayoutMdi(MdiLayout.Cascade);
Screenshot:

Tile Horizontal :
1 // Set the layout to tile horizontal.
2 this.LayoutMdi(MdiLayout.TileHorizontal);
Screenshot:

Tile Vertical
1 // Set the layout to tile vertical.
2 this.LayoutMdi(MdiLayout.TileVertical);
Screenshot:

Arrange Icons
1 // Set the layout to arrange icons.
2 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 theMdiWindowListItem of the menu strip towindowToolStripMenuItem, 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.

No comments:

Post a Comment