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:

    Figure 1.jpg
  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.

    Figure 2.jpg
  5. Delete the "Window1.xaml" file.
  6. In the Solution Explorer, right-click on the project and choose Add -> Window..

    Figure 3.jpg

  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.

    Figure 4.jpg
  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.

    Figure 5.jpg
  10. In the Solution Explorer, right-click on the References and choose "Add Reference...".

    Figure 6.jpg
  11. Select the "WPF.MDI.dll" location from the Browse tab and click on the "Ok" button.

    Figure 7.jpg
  12. It will add a "WPF.MDI" reference to the project.

    Figure 8.jpg
  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"

    Figure 9.jpg
  14. To create a container add the following code, it works much like a grid or panel does:

    Figure 10.jpg
  15. Optionally, you could specify a theme here too.

    Figure 11.jpg
  16. To add a child to the container, add an MdiChild control inside the MdiContainer, as in:

    Figure 12.jpg
  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".

    Figure 13.jpg

    If you run the project the output window will be:

    Figure 14.jpg
  18. Now we will create a simple menu bar. The code is given below:

    Figure 15.jpg

    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:

    Figure 16.jpg
  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.

    Figure 17.jpg
  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.

    Figure 18.jpg
  3. It will add a new Customer Master control to the project.

    Figure 19.jpg
  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

    Figure 20.jpg

  5. Now open the "mainWindow.xaml " page and add the click event to menu item.

    Figure 21.jpg

    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:

    private    void 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

    Figure 22.jpg

  7. When you run the application it will open your parent window with all the menu links created.

    Figure 23.jpg
  8. Once you click on the "Customer Master" menu, it will open a child window within the parent.

    Figure 24.jpg
  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.