Implement Multiple Document Interface (MDI) With Menu Control in WPF

I am new to WPF applications and I went to develop using MDI in a WPF application. I went to many websites and did not find any articles or examples that implement MDI in WPF.
So I decided to write an article on MDI with a menu control in WPF. I hope you like this article.

I have used the open source project code DLL in my project. You can visit it at: http://wpfmdi.codeplex.com/

What is MDI in WPF?

1. MDI stands for "Multiple Document Interface" (it does not stand for "Multiple Window Interface").
2. In Windows Applications there is a MDI Parent Form. But in the case of WPF there is no Parent window.
3. You can implement MDI in two ways in WPF; they are:
   
   
   • Tab control
   • Menu control
    
4. WPF MDI includes two themes, Luna (XP) and Aero (Vista & 7) as well as support for custom themes. The themes are used depending on the operating system, although a theme can be set at compile and/or run time also.

MDI implementation in WPF using a "Tab control"

I am not explaining the "Tab Control" in this article. You can refer to the "Tab Control" in the following link:

http://www.technologymaterial.com/articles/wpftabbedmdi.aspx?cat=wpf&aid=1

MDI implementation in WPF using "Menu control"

REQUIREMENTS

For implementing the MDI in WPF, you need to download "WPF.MDI.dll". You can download "WPF.MDI.dll" from this article attachment or from the following link:

http://wpfmdi.codeplex.com/releases/view/35620

CREATE WPF APPLICATION AND PARENT WINDOW
 

1. Open Visual Studio 2008.
2. Click on "File" -> "New" -> "Project...". That will open the "New Project" window, as in:
   
   
    
3. From the "Templates", select "WPF Application" and give the Name and Location for the application. I am giving the project the name "WCF_MDI". Click on the "OK" button.
4. It will open a WCF project. The project folder structure is given below.
   
   
    
5. Delete the "Window1.xaml" file.
6. In the Solution Explorer, right-click on the project and choose Add -> Window..
   
   
   
    
7. It will open an "Add New Item - WCF_MDI" window. Rename the file from "Window1.xaml" to "mainWindow.xaml". Click on the "Add" button.
   
   
    
8. It will add a new window to the project.
9. Open the "App.xaml" file and change the StartupUri from "Window1.xaml" to mainWindow.xaml.
   
   
    
10. In the Solution Explorer, right-click on the References and choose "Add Reference...".
    
    
     
11. Select the "WPF.MDI.dll" location from the Browse tab and click on the "Ok" button.
    
    
     
12. It will add a "WPF.MDI" reference to the project.
    
    
     
13. To use the control in XAML, add the DLL as a reference in the project and add the following line to the top of your XAML file underneath the xmlns declarations. (In other words open the "mainWindow.xaml" file and add the following code.:
    
    xmlns:mdi="clr-namespace:WPF.MDI;assembly=WPF.MDI"
    
    
     
14. To create a container add the following code, it works much like a grid or panel does:
    
    
     
15. Optionally, you could specify a theme here too.
    
    
     
16. To add a child to the container, add an MdiChild control inside the MdiContainer, as in:
    
    
     
17. For example, the following will set the title of the window to "Child Window". To prevent the user from resizing the window, disable the minimize button and make the background of the window "Green".
    
    
    
    If you run the project the output window will be:
    
    
     
18. Now we will create a simple menu bar. The code is given below:
    
    
    
    Or
     

    <Window x:Class="WCF_MDI.mainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:mdi="clr-namespace:WPF.MDI;assembly=WPF.MDI"
       Title="mainWindow" Height="400" Width="400">
        <Grid>
            <DockPanel>
                <Menu Name="MainMenu" VerticalAlignment="Top" DockPanel.Dock="Top" >
                    <MenuItem Name="menuHome" Header="Home">
                    </MenuItem>
                    <MenuItem Name="menuMaster" Header="Master">
                        <MenuItem Name="submenuCustomer" Header="Customer Master" Click="submenuCustomer_Click"/>
                    </MenuItem>
                </Menu>
            </DockPanel>
            <DockPanel>
                <mdi:MdiContainer Theme="Aero" DockPanel.Dock="Top" Margin="0 20 0 0" Name="MainMdiContainer">
                </mdi:MdiContainer>
            </DockPanel>
        </Grid>
    </Window>
     

19. If you run the application, you will get the following output window:
    
    
     
20. You have successfully added the MDI parent window with a menu on it in a WPF application.

CREATE A CHILD WINDOW

1. In the Solution Explorer, right-click on the project and choose Add -> User Control.
   
   
    
2. It will open an "Add New Item - WCF_MDI" window. Select the User Control (WPF) and give the name as "CustomerMaster.xaml" and click on the "Add" button.
   
   
    
3. It will add a new Customer Master control to the project.
   
   
    
4. Design the Customer Master Page as needed. I have added the test "".
    

         <UserControl x:Class="WCF_MDI.CustomerMaster"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Height="300" Width="300">
             <Grid>
               <Label Height="28" Margin="10,10,22,0" Name="label1" VerticalAlignment="Top">
               This is Customer Maste Page.
               </Label>
             </Grid>
   </UserControl>
    

   Or
   

    

5. Now open the "mainWindow.xaml " page and add the click event to menu item.
   
   
   
   Or
   
   <Window x:Class="WCF_MDI.mainWindow"
   

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mdi="clr-namespace:WPF.MDI;assembly=WPF.MDI"
      Title="mainWindow" Height="400" Width="400">
       <Grid>
           <DockPanel>
               <Menu Name="MainMenu" VerticalAlignment="Top" DockPanel.Dock="Top" >
                   <MenuItem Name="menuHome" Header="Home">
                   </MenuItem>
                   <MenuItem Name="menuMaster" Header="Master">
                       <MenuItem Name="submenuCustomer" Header="Customer Master" Click="submenuCustomer_Click"/>
                   </MenuItem>
               </Menu>
           </DockPanel>
           <DockPanel>
               <mdi:MdiContainer Theme="Aero" DockPanel.Dock="Top" Margin="0 20 0 0" Name="MainMdiContainer">
               </mdi:MdiContainer>
           </DockPanel>
       </Grid>

   </Window>
    

6. Now open the "mainWindow.xaml .cs" page and add the following code to the click event:
   
         privatevoid submenuCustomer_Click(object sender, RoutedEventArgs e)
   

         {
             MainMdiContainer.Children.Add(new MdiChild()
             {
                Title = " Child Window",
                Height = 300,
                Width = 300,
                //Here CustomerMaster is the class that you have created for mainWindow.xaml user control.
                Content = newCustomerMaster()
             });
   } 

   Or
   
   
    

7. When you run the application it will open your parent window with all the menu links created.
   
   
    
8. Once you click on the "Customer Master" menu, it will open a child window within the parent.
   
   
    
9. That's it. Your MDI application in WPF is ready.
   
   NOTE: You can't create "window (WPF)" as a child window. For creating child windows, you need to add "User Control (WPF)".

I hope you will enjoy the article. Thank you.