.Net, C#, UI, WPF

MDI in WPF via Dragablz

Dragablz is more than just a Chrome style TabControl for WPF.  Via it’s Layout control it provides docking and tool windows.  Taking the tool windows a step further, they can be used to provide an MDI effect in WPF.  Even better, the MDI environment can reside inside a tab, which, when coupled with Dragablz other tear out and docking features can provide very rich UI Window management for the user.

There’s a couple of properties of the Layout control to consider:

  • FloatingItems – allows any items to be floated on top of the Layout’s content.
  • FloatingItemsSource – allows any items to be floated on top of the Layout’s content.

And a selection of RoutedCommand’s to help out with management of items floated on the Layout:

  • UnfloatItemCommand –
  • MaximiseFloatingItem
  • RestoreFloatingItem
  • TileFloatingItemsCommand
  • TileFloatingItemsVerticallyCommand
  • TileFloatingItemsHorizontallyCommand

Here’s a snippet of an MDI layout from the Dragablz demo on GitHub:

<DockPanel>
    <StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
        <Button Command="{x:Static dockablz:Layout.TileFloatingItemsCommand}"
                CommandTarget="{Binding ElementName=MdiLayout}">Tile Grid</Button>
        <Button Command="{x:Static dockablz:Layout.TileFloatingItemsVerticallyCommand}"
                CommandTarget="{Binding ElementName=MdiLayout}">Tile Horizontal</Button>
        <Button Command="{x:Static dockablz:Layout.TileFloatingItemsHorizontallyCommand}"
                CommandTarget="{Binding ElementName=MdiLayout}">Tile Vertical</Button>
    </StackPanel>
    <dockablz:Layout x:Name="MdiLayout" 
                     FloatingItemHeaderMemberPath="Name"
                     FloatingItemDisplayMemberPath="SimpleContent">            
        <dockablz:Layout.FloatingItems>                
            <dragablzDemo:SimpleViewModel Name="One" SimpleContent="MDI Child One" />                
            <dragablzDemo:SimpleViewModel Name="Two" SimpleContent="MDI Child Two" />                
            <dragablzDemo:SimpleViewModel Name="Three" SimpleContent="MDI Child Three" />
        </dockablz:Layout.FloatingItems>
    </dockablz:Layout>
</DockPanel>

And to illustrate what’s achievable, here’s an MDI layout, inside a tear-able tab:

MDI, operating within a tab.
MDI, operating within a tab.

Links to Dragablz:

Advertisement

4 thoughts on “MDI in WPF via Dragablz

  1. How

    //* dragablzDemo:SimpleViewModel Name=”One” SimpleContent=”MDI Child One” />

    add property width height canvas.left

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s