UWP.MDI provides Multiple document interface (MDI) support for UWP applications.
MDI (Multiple Document Interface) was popular user interface paradigma in Windows Forms era. MDI allows one window to host multiple child windows. Each window can be resized and moved around.
When WPF was released, it didn't contain support for MDI interfaces and the situation didn't change when WinRT and UWP were released.
UWP.MDI has three targets:
Create a blank Universal Windows Application
Add UWP.MDI from NuGet https://www.nuget.org/packages/UWP.MDI/
Add MDIContainer to MainPage:
<Page
x:Class="UWP.MDI.Sample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.MDI.Sample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
xmlns:mdi="using:UWP.MDI.Controls"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<mdi:MDIContainer />
</Grid>
</Page>
Create UserControl with the content you like.
In MainApplication, create a new instance of the UserControl and use Show-method to display it:
var frm = new CustomerForm();
frm.Show();
For samples, check out the samples folder inside this repository.
Each application should have single MDIContainer. MDIContainer is used to host the windows.
Each window should be a UserControl.
Use attached properties provided by FormProperties to configure the basic settings of your child windows. For example: Title, Starting position.
See the following sample: https://github.com/mikoskinen/UWP.MDI/tree/master/samples/UWP.MDI.MVVM
To add title for your UserControl, use AttachedProperty FormProperties.Text. For example:
<UserControl x:Class="UWP.MDI.Sample.InvoiceForm" xmlns:controls="using:UWP.MDI.Controls" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWP.MDI.Sample" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" controls:FormProperties.Text="Invoices">
To set starting size for your UserControl, set UserControl's Width and Height properties.
To change the styling, use MDIChild.xaml and MDIContainer.xaml as basis.
The settings/configuration for child windows are provided using attached properties.
Title: FormProperties.Text Starting position: FormProperties.FormStartPosition Resizable or not: FormProperties.FormBorderStyle
UWP.MDI contains three built-in layouts for your child windows: TileHorizontal, TileVertical and Cascade. You can organize your current windows at any point by calling MDIContainer.LayoutMdi.
For example:
mdiContainer.LayoutMdi(MdiLayout.Cascade);
For sample see samples\UWP.MDI.Layouts
UWP.MDI doesn't have external dependencies.
UWP.MDI contains code from the following projects: