What is Multiple Document Interface (MDI)?
In most VB.NET applications, it is using a single document interface (SDI). In this type of interface, every window is unique to aother window. But in multiple document interface, it works by having one parent window with child windows under it. See the screenshot below:
As you can see, there is one parent window (in gray color) and there are 3 child windows (in blue, violet and orange color). You can have more than 3 child windows depending on your application requirements. But you can only have one parent window.
Depending on the design of your MDI application, you can have all windows launched at once when the project is run by the user. Or you can only have a single window launched under the parent window that serves as an entry point for all other child windows in your VB.NET application.
Create your MDI VB.NET project
Let’s create the MDI example project. Follow the steps below:
1.) Launch Microsoft Visual Basic 2008 Express edition.
2.) Go to File – New Project.
3.) Under Visual Studio Installed Templates, click Windows Forms Application.
4.) Change the name from WindowsApplication1 to MultipleDocumentInterfaceExample
5.) Click OK.
6.) As usual you will see only one window named as “Form1”. Let’s change this to “MDI Parent Window” in the Text property of this Form1.vb.
7.) To enable this form as the parent window of your MDI application, set:
IsMDIContainer = True
8. Now save the project by going to File – Save all. Make sure the name and the solution name are set to MultipleDocumentInterfaceExample. Also make sure “Create Directory for this Solution” is checked. Save it to a folder in your hard drive containing your other VB.NET projects. Finally click “Save”.
You have noticed that the image of the MDI parent window has been changed to a darker gray area background that you commonly see in MDI applications. This is how it looks like:
Create your Child Windows Form
Let’s add 3 child windows under the MDI parent window. To do this:
1.) Go to Form1.vb in Design view.
2.) Click the form to select.
3.) To add the first child window. Go to Project – Add Windows Form.
4.) Under Visual Studio Installed Templates, select Windows Form.
5.) Set the name to Form2.vb
6.) Click Add.
7.) Go to the development properties of Form2.vb by going to View – Solution Explorer and then clicking Form2. In the properties, set the following for the first child window:
(Name) = Child1
Text = Child1
The above property settings will set the name of the form and the title text to Child1.
8.) To add the second child window, click Child1 in Design view to select and go to Project – Add Windows Form. Set the name to Form3.vb and click “Add”.
9.) Click Form3 in Design to select and go to properties to set:
(Name) = Child2
Text = Child2
10.) Repeat step 8 and 9 above to add the third child window. Set the filename of the form to Form4.vb and then set the following properties to:
(Name) = Child3
Text = Child3
11.) Go to File – Save all. Finally you have created 3 child windows with the following file names appearing under the Solution Explorer of your project: Form2.vb, Form3.vb and Form3.vb. Take note that Form1.vb is the MDI parent window.
Programmatically Add your Child Windows under MDI Parent
You have now created your 3 child windows form. Now it is time to write a code so that it will appear under your MDI parent window. For the sake illustrating the functionality of an MDI program, let’s make child 1 appear at default under the parent window when the application will be launched by the user. Also let child 2 appears when you click the button on child 1. Then finally let child 3 appears when you click the button on child 2. Follow the steps below:
1.) Double click Form1.vb under Solution Explorer.
2.) Double click the form in the Design view.
3.) Add the following code below between Private Sub Form1_Load and End Sub
Child1.MdiParent = Me
The first line of the code means that the parent of Child 1 is the MDI parent window being launched. The second line will show the Child1 window under the MDI parent window. Go to File – Save all after adding the code above.
4.) Try running the program by pressing F5. Resize the parent window (widen it by dragging its side) to see the child window under it. This is how it looks like:
You see that only child1 appears under MDI parent window because child2 and child3 are not yet set and added to the code.
5.) Close the parent window and then drag a button to child 1 (Form2.vb) window in design. Change the text property of the button to “Click to Show Child 2”. Widen the button design view so that you can read the text in the button.
Double click “Click to Show Child 2” and then add the code below:
Child2.MdiParent = Me.MdiParent
The first line will pass the MDI parent of Child1 to Child 2 (since all children are under the same MDI parent). Then the second line will show the child 2 form.
6.) Go to Form3.vb in the Design View for the second child. Drag a button to Child 2 and then set the text property of the button control to “Click to Show Child 3”.
Double click “Click to Show Child 3” and then add the following code below:
Child3.MdiParent = Me.MdiParent
This time the code in the first line above will pass the parent of Child 2 (which is still the parent window) to Child 3. The second line will then show the third child under the MDI parent window.
Testing your MDI Visual Basic Program
Before testing or running the program, make sure you saved everything by going to File – Save all. Follow the steps below:
1.) Under Solution Explorer, double click “My Project”.
2.) Make sure that the startup form is set to the parent form of the MDI which is Form1. This is the first form that will be shown when the program is executed.
3.) Then press F5 to run the program.
4.) At first, you will only see the MDI parent window and one child window (Child1). However child 1 has a button that says “Click to Show Child 2”. Click that button.
5.) After clicking the button, Child 2 appears under the same MDI parent window. Child 2 also has a button that says “Click to Show Child 3”. Now click that button.
6.) It will then show Child 3, thus showing all the children with the same parent. This is how it looks like: