Full Screen in WPF Tabbed MDI Form

18 Nov 20185 minutes to read

TDIFullScreenMode

TDIFullScreenMode is the property used to define the full-screen mode for TDI items. When a value is set for this property, the parent window is displayed in full-screen mode and the tab item header is visible only when the cursor passes over the top of the window. This property is an enum (Syncfusion.Windows.Tools.Controls.FullScreenMode) with the following values:

  • ControlMode — Makes the tab header visible on mouseover.
  • WindowMode — Performs the full-screen operation and makes the tab header visible on mouseover.
  • None — Default value; full-screen mode is disabled.
<syncfusion:DocumentContainer Name="documentcontainer1" Mode="TDI" TDIFullScreenMode="WindowMode" />
using Syncfusion.Windows.Tools.Controls;

documentcontainer1.TDIFullScreenMode = FullScreenMode.WindowMode;

This feature is also applicable for TabControlExt, where the equivalent property is FullScreenMode of type Syncfusion.Windows.Tools.Controls.FullScreenMode.

<syncfusion:TabControlExt Name="tabcontrol1" FullScreenMode="WindowMode"/>
tabcontrol1.FullScreenMode = FullScreenMode.WindowMode;

Adding a Toolbar to the Header Panel of TDI Items

A toolbar can be placed in the header panel of TDI items in the WPF Tabbed MDI Form; for this, the TDIToolBarTray attached property is used.

Full-Screen-in-DocumentContainer_img1

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        x:Class="DocumentContainerSample.MainWindow"
        Title="DocumentContainer Sample" Height="350" Width="525">
    <Grid>
        <syncfusion:DocumentContainer Name="documentcontainer1" Mode="TDI">
            <syncfusion:DocumentContainer.TDIToolBarTray>
                <ToolBarTray>
                    <ToolBar>
                        <Button Content="Tool" />
                    </ToolBar>
                </ToolBarTray>
            </syncfusion:DocumentContainer.TDIToolBarTray>
            <Grid syncfusion:DocumentContainer.Header="tab1" />
            <Grid syncfusion:DocumentContainer.Header="tab2" />
        </syncfusion:DocumentContainer>
    </Grid>
</Window>
using System.Windows.Controls;

ToolBarTray tooltray = new ToolBarTray();
ToolBar toolbar = new ToolBar();
toolbar.Items.Add(new Button { Content = "Tool" });
tooltray.ToolBars.Add(toolbar);
documentcontainer1.TDIToolBarTray = tooltray;

This feature is also applicable to TabControlExt, as demonstrated in the following code.

<syncfusion:TabControlExt Name="tabcontrol">
    <syncfusion:TabControlExt.ToolBarTray>
        <ToolBarTray>
            <ToolBar>
                <Button Content="Tool" />
            </ToolBar>
        </ToolBarTray>
    </syncfusion:TabControlExt.ToolBarTray>
</syncfusion:TabControlExt>
ToolBarTray tooltray = new ToolBarTray();
ToolBar toolbar = new ToolBar();
toolbar.Items.Add(new Button { Content = "Tool" });
tooltray.ToolBars.Add(toolbar);
tabcontrol.ToolBarTray = tooltray;

SizeToContent for an MDI Window

SizeToContentInMDI is used to resize an MDI window to its child size. This is an attached property and can be applied to individual children inside the WPF Tabbed MDI Form. To enable this behavior, set the Mode property to MDI.

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        x:Class="DocumentContainerSample.MainWindow"
        Title="DocumentContainer Sample" Height="350" Width="525">
    <Grid>
        <syncfusion:DocumentContainer Mode="MDI">
            <Grid x:Name="grid1" syncfusion:DocumentContainer.SizeToContentInMDI="True" Width="200" Height="200" />
        </syncfusion:DocumentContainer>
    </Grid>
</Window>
DocumentContainer.SetSizeToContentInMDI(grid1, true);