In this post, I’ll discuss multi-document interface (MDI), single document interface (SDI), and multi-frame interface (MFI) UI construction.
Document Interfaces
It’s not an exaggeration to state that document-based interfaces are the most popular UI paradigms for desktop app development. This paradigm is seen virtually everywhere, from web browsers to professional tools like Microsoft Visual Studio and Adobe Photoshop. By "documents" I mean fully independent client areas that are incorporated into a single application frame. Document-based interfaces allow users to switch between different graphical windows while retaining constant access to the main application menu and associated navigation elements.
As you know, document-based interfaces can be placed into three broad categories:
- MDI (multi-document interface) - allows users to simultaneously view multiple documents.
- SDI (single-document interface) - unlike MDI, SDI only supports a single “active” document. A classic example of an SDI interface are static tabs.
- MFI (multi-frame interface) - the hallmark of MFI apps is that every document looks like a completely separate instance of an app – with its own button in the Windows Taskbar. This notwithstanding, MFI documents are still part of a single application. In Microsoft Word, each text document opens in a separate window, but you can use the "Switch Windows" Ribbon command to navigate between these windows (documents are interconnected).
Multi-Document Interface
For years, if you wanted to incorporate a multi-document UI in an app, your best option was to use the DevExpress XtraTabbedMdiManager component. This UI control allowed you to create floating or docked "documents," and merge parent/child BarManager or Ribbon menus.
Just like the XtraTabbedMdiManager, our WinForms Document Manager allows you to build MDI apps with ease. Unlike the XtraTabbedMdiManager, our WinForms Document Managers also allows you to:
- Create dashboard-inspired apps using its “Widget View.”
- Create modern, Windows Store-inspired apps using its “Windows UI View.”
- Use it alongside our WinForms Dock Manager. To learn more about the synergy between these two components, please review the following topic: Interaction with Dock Panels.
- Load content on-demand at runtime and increase application start-up speed.
- Use its "non-document mode" and display a single document.
If you’ve used our Document Manager, you already know that we’re constantly enhancing the control so that it can mirror Visual Studio’s UI elements. For instance, all floating documents in Tabbed and Widget Views are always drawn on top of parent forms. In our upcoming v20.2 release, you will be able to change this behavior: floating documents will be able to collapse to the Windows Taskbar and lay beneath parent forms.
Single-Document Interface
To create a tab-based UI and force users to work with a single tab, use our classic XtraTabControl, or the DevExpress TabPane.
If you’re willing to consider alternatives and looking for new design ideas, our WinForms Navigation Frame might be the right control for you. This straightforward SDI container requires that you manually implement a navigation UI (to switch between pages). If you choose this route, you can use our Pager Navigation Behavior to turn a Radio Group or a WindowsUIButtonPanel into a navigation element. Please review the following help topic for more information: Pager Navigation Behavior.
Multi-Frame Interface
If you want your apps to mimic the UI capabilities of modern web browsers, simply use the DevExpress Tab Form. With our WinForms Tab Form, users can split tabs into separate windows and merge them together as needed.
This form incorporates tab headers into its title bar. Undocked tabs are placed into windows that fully replicate parent forms.
Much like our Toolbar Forms, Tab Forms can display bar items in the title bar. In the image above, I've added two buttons to the left of the Tab: Skin and Palette selectors.
Your Feedback Matters
We’d love to hear your thoughts on single document-based interfaces vs MDI-based apps. Which do you prefer most? Are you using a different UI option to arrange application content? Let us know in the comments section below.