(Print this page)

MDI-Style in a WPF application
Published date: Wednesday, January 28, 2015
On: Moer and Éric Moreau's web site

I am starting 2 new applications from scratch these days. One for my personal usage and a second one for a new client. For my own application, I wanted it to be in WPF, a technology I never used but wanted to learn for a long time (in fact it is the XAML I really want to learn). For the application, I don’t have strict guidelines to follow except…

A bit of background

I discussed architecture and UI with my new client. He didn’t really care about the technology/architecture but he had some strong ideas about the look of his new application. Like much clients, he cares more about the UI experience than everything else. Using existing applications he is using on a daily basis, he showed me examples of what he wants and what he doesn’t want to see. One thing was clear and non-arguable, he wanted a multiple document interface (a parent window and the children that cannot escape from the parent boundaries).

At that moment, I wasn’t aware that MDI was not an available (at least easily) paradigm in WPF!

What is MDI?

A multiple document interface (MDI) consist of a master window (parent) and most (if not all) children windows live inside the parent bounds. This type of UI also lets you see 2 or more screens at the same time. This kind of application was really used in the era of Windows Forms Applications. Many applications like accounting packages were built on that model.

They are sometime called Multiple Window Interface.

Figure 1: A typical MDI application

Microsoft now discourage developers to creating applications using this paradigm even when many users are comfortable with it. Microsoft is pushing developers in developing more “modern” UI like the Windows 8 style. For business applications type, the modern UI style is not always the most convenient. Users often have large desktop screen and they want (and often need) to see different parts (screens) of the application at the same time.

What are the alternatives?

So if MDI is not recommended what are the alternatives? Be warned that this list is not exhaustive but alternatives related to WPF applications.

First we have the Single Document Interface (SDI). Great examples are Notepad and the Calculator. A single form offers all the features of the application. These are usually very simple and very limited in the number of features.

Figure 2: The calculator is a SDI

You can also create Tabbed Document Interface (TDI). Each window of your application would be hosted in its own tab. You can have multiple tabs opens at once but only one is visible at a single time. Your browser is probably the best example of a TDI.

Figure 3: File properties is a TDI

Another kind of UI is like Office 2013. Office is almost a SDI. If you open 2 Word documents, you will have two distinct documents in two distinct windows on your screen and on your taskbar. Each document has its own menus and is very distinct from others. This kind of interface is great because it lets you work on different documents each having its own space. Very often, if you have 2 Excel documents open, they don’t relate one to the other.

Wikipedia has a great article if you want to dig more about the pros and cons of each: http://en.wikipedia.org/wiki/Comparison_of_document_interfaces.

Back to my client

I went back to my client with what I discovered and I explained him the different kinds of UI and pointed to those easily available to WPF, trying to find a compromise, a kind of UI that he would be interested in and still keep WPF as the technology. He told me that WPF was not important for him but MDI was. He added that if WPF doesn’t let me build that kind of UI, that he would prefer an old Windows Forms application.

My free solution

I didn’t want to write yet another Windows Forms application because I know I will want to use some of the great benefits of WPF in his application and I would prefer not to host WPF elements into a Windows Forms application like I showed in this article.

I have searched the Internet for a couple of hours trying examples from various sources until I found this one on CodePlex: WPF Multiple Document Interface. The first time I hit that page, I navigate back almost immediately because the latest revision was dated of December 2010. But after I have seen this library referenced many times, I decided to give it a try.

To my greatest surprise, it just works!

The download section on CodePlex contains the complete source code of the library so you can always modify it if you want. I even found another guy who wrote another step-by-step article on how to use the WPF MDI library.

Commercial solution

I have checked a couple of commercial solutions as well. Some providers are not offering a direct MDI old-style UI controls. But I found one which I haven’t tried yet (but surely will in the next few days).

This component provider is SyncFusion and the component is the "Document Container". Speaking of SyncFusion, I just learned that they are offering there complete suite for free to some individuals in a bundle called the "Community Licence". One more reason to give them a try!

Conclusion

I often take things for granted. I was sure that MDI-style was available to WPF in the box.

Why Microsoft makes it hard on us to create UI that have proven proficiency for a long time the way we want instead of forcing us to use the newer paradigms?


(Print this page)