syncfusion-wpf-docking

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion WPF DockingManager

实现Syncfusion WPF DockingManager控件

The Syncfusion WPF DockingManager control provides a comprehensive window management system similar to Visual Studio, allowing users to create sophisticated docking interfaces with multiple window states. It enables child controls to be docked, floated, auto-hidden, or displayed as documents, with full support for drag-and-drop repositioning, state persistence, and extensive customization options.

Syncfusion WPF DockingManager控件提供了类似Visual Studio的全面窗口管理系统，允许用户创建支持多种窗口状态的复杂停靠界面。它支持子控件停靠、浮动、自动隐藏或作为文档显示，同时提供完整的拖放重定位、状态持久化和丰富的自定义选项。

When to Use This Skill

何时使用该技能

Use this skill when implementing:

IDE-like Applications: Creating Visual Studio-style interfaces with tool windows and document areas
Document Management: MDI (Multiple Document Interface) or TDI (Tabbed Document Interface) applications
Complex Layouts: Applications requiring flexible window arrangements with docking, floating, and auto-hide capabilities
Dashboard Applications: Data analysis tools with repositionable panels and persistent layouts
Design Applications: CAD, image editors, or other design tools requiring customizable workspace layouts
Multi-Panel Interfaces: Any application where users need to arrange multiple views and save their layout preferences

在以下场景中使用该技能：

类IDE应用：创建带有工具窗口和文档区域的Visual Studio风格界面
文档管理：MDI（多文档界面）或TDI（选项卡式文档界面）应用
复杂布局：需要灵活窗口排列（支持停靠、浮动和自动隐藏）的应用
仪表板应用：带有可重定位面板和持久化布局的数据分析工具
设计类应用：CAD、图像编辑器或其他需要自定义工作区布局的设计工具
多面板界面：任何需要用户排列多个视图并保存布局偏好的应用

Component Overview

组件概述

DockingManager is a container control that manages child windows in four distinct states:

Dock State: Windows anchored to sides of the container (left, right, top, bottom, or tabbed)
Float State: Windows that can be positioned anywhere, including on secondary monitors
AutoHidden State: Windows collapsed to screen edges that expand on hover
Document State: Windows displayed as MDI or TDI documents in a central area

Key capabilities include interactive drag-and-drop for repositioning, layout serialization for saving/loading window arrangements, extensive theming and styling support, keyboard navigation between windows, nested and linked manager support, and comprehensive customization through properties, events, and templates.

DockingManager是一个容器控件，可将子窗口管理为四种不同状态：

停靠状态：窗口锚定在容器的侧边（左、右、上、下）或作为选项卡存在
浮动状态：窗口可放置在任意位置，包括辅助显示器
自动隐藏状态：窗口折叠到屏幕边缘，悬停时展开
文档状态：窗口在中央区域以MDI或TDI文档形式显示

核心功能包括交互式拖放重定位、布局序列化（用于保存/加载窗口排列）、丰富的主题和样式支持、窗口间键盘导航、嵌套和链接管理器支持，以及通过属性、事件和模板实现的全面自定义。

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

When you need to:

Install and configure DockingManager
Add DockingManager via Designer, XAML, or C#
Set up basic window structure with child controls
Configure headers, initial states, and sides
Create your first working docking interface

📄 阅读： references/getting-started.md

适用于以下场景：

安装和配置DockingManager
通过设计器、XAML或C#添加DockingManager
搭建包含子控件的基础窗口结构
配置标题、初始状态和停靠侧边
创建第一个可运行的停靠界面

Understanding Window States

理解窗口状态

📄 Read: references/window-states.md

When you need to:

Understand the four dock states (Dock, Float, AutoHidden, Document)
Set and change window states programmatically or in XAML
Handle state transitions and events
Configure UseDocumentContainer for Document state

📄 Read: references/autohide-windows.md

When you need to:

Implement auto-hide functionality
AutoHide all docked windows
Unpin auto-hidden windows
Customize auto-hide behavior
Retrieve auto-hidden window dimensions

📄 阅读： references/window-states.md

适用于以下场景：

理解四种停靠状态（停靠、浮动、自动隐藏、文档）
通过代码或XAML设置和更改窗口状态
处理状态转换和事件
配置UseDocumentContainer以启用文档状态

📄 阅读： references/autohide-windows.md

适用于以下场景：

实现自动隐藏功能
自动隐藏所有停靠窗口
取消固定自动隐藏窗口
自定义自动隐藏行为
获取自动隐藏窗口的尺寸

Configuring Docking Windows

配置停靠窗口

📄 Read: references/docking-windows.md

When you need to:

Position windows on different sides (Left, Right, Top, Bottom)
Dock windows relative to target windows (TargetNameInDockedMode)
Enable maximize/minimize for docked windows
Limit maximized window size
Enable full-screen maximization
Configure hot tracking and header visibility
Add custom context menus for docked windows
Control docking functionality per window

📄 阅读： references/docking-windows.md

适用于以下场景：

将窗口定位到不同侧边（左、右、上、下）
相对于目标窗口停靠（TargetNameInDockedMode）
为停靠窗口启用最大化/最小化功能
限制最大化窗口的尺寸
启用全屏最大化
配置热跟踪和标题可见性
为停靠窗口添加自定义上下文菜单
按窗口控制停靠功能

Managing Floating Windows

管理浮动窗口

📄 Read: references/floating-windows.md

When you need to:

Create and configure native float windows
Enable float windows in taskbar
Support multi-monitor scenarios
Position float windows at specific locations
Enable maximize/minimize for float windows
Configure double-click behavior (dock vs. maximize)
Implement snapping between float windows
Add custom context menus for float windows
Enable rolling up float windows

📄 阅读： references/floating-windows.md

适用于以下场景：

创建和配置原生浮动窗口
在任务栏中显示浮动窗口
支持多显示器场景
将浮动窗口定位到特定位置
为浮动窗口启用最大化/最小化功能
配置双击行为（停靠 vs 最大化）
实现浮动窗口间的吸附功能
为浮动窗口添加自定义上下文菜单
启用浮动窗口的卷起功能

MDI/TDI Document Management

MDI/TDI文档管理

📄 Read: references/mdi-tdi-functionalities.md

When you need to:

Choose between MDI and TDI modes
Configure container mode (DocumentContainerMode)
Manage MDI window states (minimized, maximized, normal)
Set MDI layouts (horizontal, vertical, cascade)
Enable TDI drag and drop for tab reordering
Create horizontal and vertical tab groups
Close tabs on middle-click
Pin and unpin document tabs
Handle document tab order events
Customize TDI headers and close menus
Add custom context menus for tabs
Control tab list context menus

📄 阅读： references/mdi-tdi-functionalities.md

适用于以下场景：

在MDI和TDI模式间选择
配置容器模式（DocumentContainerMode）
管理MDI窗口状态（最小化、最大化、正常）
设置MDI布局（水平、垂直、层叠）
启用TDI拖放以重新排列选项卡
创建水平和垂直选项卡组
中键点击关闭选项卡
固定和取消固定文档选项卡
处理文档选项卡顺序事件
自定义TDI标题和关闭菜单
为选项卡添加自定义上下文菜单
控制选项卡列表上下文菜单

Saving and Loading Layouts

保存和加载布局

📄 Read: references/state-persistence.md

When you need to:

Enable automatic layout persistence
Save dock state to XML or binary format
Load previously saved layouts
Clear persisted state entries
Handle window detection and closing events
Manage serialization for specific windows

📄 阅读： references/state-persistence.md

适用于以下场景：

启用自动布局持久化
将停靠状态保存为XML或二进制格式
加载之前保存的布局
清除持久化状态条目
处理窗口检测和关闭事件
管理特定窗口的序列化

Styling and Customization

样式与自定义

📄 Read: references/styling-and-customization.md

When you need to:

Apply visual styles and themes (VisualStudio2013, Office2016, Metro)
Use SfSkinManager for theming
Customize window appearance and headers
Set header icons for MDI windows
Configure tooltips for child windows
Customize splitter appearance
Modify context menu items
Remove specific menu items

📄 阅读： references/styling-and-customization.md

适用于以下场景：

应用视觉样式和主题（VisualStudio2013、Office2016、Metro）
使用SfSkinManager进行主题管理
自定义窗口外观和标题
为MDI窗口设置标题图标
配置子窗口的工具提示
自定义拆分器外观
修改上下文菜单项
移除特定菜单项

Advanced Features

快速入门

—

基础停靠布局

📄 Read: references/advanced-features.md

When you need to:

Create linked DockingManagers
Implement nested layouts (DockingManager within DockingManager)
Enable full-screen mode
Configure keyboard navigation modes (Immediate, List, QuickTabs, VS2005, VistaFlip)
Programmatically activate windows
Handle ActiveWindow change events
Detect window hosting in DockingManager
Customize dock hints
Configure VS2010 dragging behavior
Disable drag and drop for TDI items
Use advanced properties (FlipItems, IsDragging)

xaml

<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">
    <Grid>
        <syncfusion:DockingManager x:Name="dockingManager" 
                                   UseDocumentContainer="True">
            
            <!-- 停靠窗口 - 右侧 -->
            <ContentControl x:Name="SolutionExplorer"
                          syncfusion:DockingManager.Header="Solution Explorer"
                          syncfusion:DockingManager.SideInDockedMode="Right"
                          syncfusion:DockingManager.DesiredWidthInDockedMode="250">
                <TextBlock Text="Solution Explorer Content" />
            </ContentControl>
            
            <!-- 自动隐藏窗口 -->
            <ContentControl x:Name="Toolbox"
                          syncfusion:DockingManager.Header="Toolbox"
                          syncfusion:DockingManager.State="AutoHidden">
                <TextBlock Text="Toolbox Content" />
            </ContentControl>
            
            <!-- 浮动窗口 -->
            <ContentControl x:Name="Properties"
                          syncfusion:DockingManager.Header="Properties"
                          syncfusion:DockingManager.State="Float">
                <TextBlock Text="Properties Content" />
            </ContentControl>
            
            <!-- 文档窗口（TDI） -->
            <ContentControl x:Name="StartPage"
                          syncfusion:DockingManager.Header="Start Page"
                          syncfusion:DockingManager.State="Document">
                <TextBlock Text="Document Content" />
            </ContentControl>
        </syncfusion:DockingManager>
    </Grid>
</Window>

Quick Start

代码后置设置

Basic Docking Layout

—

xaml

<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">
    <Grid>
        <syncfusion:DockingManager x:Name="dockingManager" 
                                   UseDocumentContainer="True">
            
            <!-- Docked Window - Right Side -->
            <ContentControl x:Name="SolutionExplorer"
                          syncfusion:DockingManager.Header="Solution Explorer"
                          syncfusion:DockingManager.SideInDockedMode="Right"
                          syncfusion:DockingManager.DesiredWidthInDockedMode="250">
                <TextBlock Text="Solution Explorer Content" />
            </ContentControl>
            
            <!-- Auto-Hidden Window -->
            <ContentControl x:Name="Toolbox"
                          syncfusion:DockingManager.Header="Toolbox"
                          syncfusion:DockingManager.State="AutoHidden">
                <TextBlock Text="Toolbox Content" />
            </ContentControl>
            
            <!-- Float Window -->
            <ContentControl x:Name="Properties"
                          syncfusion:DockingManager.Header="Properties"
                          syncfusion:DockingManager.State="Float">
                <TextBlock Text="Properties Content" />
            </ContentControl>
            
            <!-- Document Window (TDI) -->
            <ContentControl x:Name="StartPage"
                          syncfusion:DockingManager.Header="Start Page"
                          syncfusion:DockingManager.State="Document">
                <TextBlock Text="Document Content" />
            </ContentControl>
        </syncfusion:DockingManager>
    </Grid>
</Window>

csharp

using Syncfusion.Windows.Tools.Controls;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        
        // 创建DockingManager
        DockingManager dockingManager = new DockingManager();
        dockingManager.UseDocumentContainer = true;
        
        // 创建窗口
        ContentControl solutionExplorer = new ContentControl();
        ContentControl toolbox = new ContentControl();
        ContentControl properties = new ContentControl();
        ContentControl startPage = new ContentControl();
        
        // 配置Solution Explorer（右侧停靠）
        DockingManager.SetHeader(solutionExplorer, "Solution Explorer");
        DockingManager.SetSideInDockedMode(solutionExplorer, DockSide.Right);
        DockingManager.SetDesiredWidthInDockedMode(solutionExplorer, 250);
        
        // 配置Toolbox（自动隐藏）
        DockingManager.SetHeader(toolbox, "Toolbox");
        DockingManager.SetState(toolbox, DockState.AutoHidden);
        
        // 配置Properties（浮动）
        DockingManager.SetHeader(properties, "Properties");
        DockingManager.SetState(properties, DockState.Float);
        
        // 配置Start Page（文档）
        DockingManager.SetHeader(startPage, "Start Page");
        DockingManager.SetState(startPage, DockState.Document);
        
        // 添加子控件
        dockingManager.Children.Add(solutionExplorer);
        dockingManager.Children.Add(toolbox);
        dockingManager.Children.Add(properties);
        dockingManager.Children.Add(startPage);
        
        this.Content = dockingManager;
    }
}

Code-Behind Setup

常见模式

—

模式1：同一容器中的选项卡式窗口

csharp

using Syncfusion.Windows.Tools.Controls;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        
        // Create DockingManager
        DockingManager dockingManager = new DockingManager();
        dockingManager.UseDocumentContainer = true;
        
        // Create windows
        ContentControl solutionExplorer = new ContentControl();
        ContentControl toolbox = new ContentControl();
        ContentControl properties = new ContentControl();
        ContentControl startPage = new ContentControl();
        
        // Configure Solution Explorer (Docked Right)
        DockingManager.SetHeader(solutionExplorer, "Solution Explorer");
        DockingManager.SetSideInDockedMode(solutionExplorer, DockSide.Right);
        DockingManager.SetDesiredWidthInDockedMode(solutionExplorer, 250);
        
        // Configure Toolbox (Auto-Hidden)
        DockingManager.SetHeader(toolbox, "Toolbox");
        DockingManager.SetState(toolbox, DockState.AutoHidden);
        
        // Configure Properties (Float)
        DockingManager.SetHeader(properties, "Properties");
        DockingManager.SetState(properties, DockState.Float);
        
        // Configure Start Page (Document)
        DockingManager.SetHeader(startPage, "Start Page");
        DockingManager.SetState(startPage, DockState.Document);
        
        // Add children
        dockingManager.Children.Add(solutionExplorer);
        dockingManager.Children.Add(toolbox);
        dockingManager.Children.Add(properties);
        dockingManager.Children.Add(startPage);
        
        this.Content = dockingManager;
    }
}

xaml

<syncfusion:DockingManager x:Name="dockingManager">
    <!-- 目标窗口 -->
    <ContentControl x:Name="MainPanel"
                    syncfusion:DockingManager.Header="Main Panel"
                    syncfusion:DockingManager.SideInDockedMode="Left"/>
    
    <!-- 与Main Panel作为选项卡共存 -->
    <ContentControl syncfusion:DockingManager.Header="Secondary Panel"
                    syncfusion:DockingManager.SideInDockedMode="Tabbed"
                    syncfusion:DockingManager.TargetNameInDockedMode="MainPanel"/>
</syncfusion:DockingManager>

Common Patterns

模式2：状态持久化

Pattern 1: Tabbed Windows in Same Container

—

xaml

<syncfusion:DockingManager x:Name="dockingManager">
    <!-- Target Window -->
    <ContentControl x:Name="MainPanel"
                    syncfusion:DockingManager.Header="Main Panel"
                    syncfusion:DockingManager.SideInDockedMode="Left"/>
    
    <!-- Tabbed with Main Panel -->
    <ContentControl syncfusion:DockingManager.Header="Secondary Panel"
                    syncfusion:DockingManager.SideInDockedMode="Tabbed"
                    syncfusion:DockingManager.TargetNameInDockedMode="MainPanel"/>
</syncfusion:DockingManager>

xaml

<syncfusion:DockingManager x:Name="dockingManager" 
                           PersistState="True">
    <!-- 窗口将自动保存/加载状态 -->
</syncfusion:DockingManager>

csharp

// 手动保存状态
dockingManager.SaveDockState();

// 手动加载状态
dockingManager.LoadDockState();

Pattern 2: State Persistence

模式3：带选项卡组的TDI

xaml

<syncfusion:DockingManager x:Name="dockingManager" 
                           PersistState="True">
    <!-- Windows will automatically save/load state -->
</syncfusion:DockingManager>

csharp

// Save state manually
dockingManager.SaveDockState();

// Load state manually
dockingManager.LoadDockState();

xaml

<syncfusion:DockingManager UseDocumentContainer="True" 
                           ContainerMode="TDI"
                           TabGroupEnabled="True">
    <ContentControl syncfusion:DockingManager.Header="Document 1"
                    syncfusion:DockingManager.State="Document"/>
    <ContentControl syncfusion:DockingManager.Header="Document 2"
                    syncfusion:DockingManager.State="Document"/>
</syncfusion:DockingManager>

csharp

// 以编程方式创建垂直选项卡组
(dockingManager.DocContainer as DocumentContainer)
    .CreateVerticalTabGroup(document1);

Pattern 3: TDI with Tab Groups

模式4：支持多显示器的原生浮动窗口

xaml

<syncfusion:DockingManager UseDocumentContainer="True" 
                           ContainerMode="TDI"
                           TabGroupEnabled="True">
    <ContentControl syncfusion:DockingManager.Header="Document 1"
                    syncfusion:DockingManager.State="Document"/>
    <ContentControl syncfusion:DockingManager.Header="Document 2"
                    syncfusion:DockingManager.State="Document"/>
</syncfusion:DockingManager>

csharp

// Create vertical tab group programmatically
(dockingManager.DocContainer as DocumentContainer)
    .CreateVerticalTabGroup(document1);

xaml

<syncfusion:DockingManager UseNativeFloatWindow="True"
                           ShowFloatWindowInTaskbar="True">
    <ContentControl syncfusion:DockingManager.Header="Float Window"
                    syncfusion:DockingManager.State="Float"
                    syncfusion:DockingManager.CanFloatMaximize="True"/>
</syncfusion:DockingManager>

Pattern 4: Native Float Windows with Multi-Monitor

模式5：应用主题

xaml

<syncfusion:DockingManager UseNativeFloatWindow="True"
                           ShowFloatWindowInTaskbar="True">
    <ContentControl syncfusion:DockingManager.Header="Float Window"
                    syncfusion:DockingManager.State="Float"
                    syncfusion:DockingManager.CanFloatMaximize="True"/>
</syncfusion:DockingManager>

xaml

<Window xmlns:syncfusionskin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF">
    <syncfusion:DockingManager 
        syncfusionskin:SfSkinManager.VisualStyle="VisualStudio2013">
        <!-- 窗口 -->
    </syncfusion:DockingManager>
</Window>

csharp

// 以代码方式应用主题
SfSkinManager.SetVisualStyle(dockingManager, VisualStyles.VisualStudio2013);

Pattern 5: Applying Themes

关键属性

—

DockingManager核心属性

xaml

<Window xmlns:syncfusionskin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF">
    <syncfusion:DockingManager 
        syncfusionskin:SfSkinManager.VisualStyle="VisualStudio2013">
        <!-- Windows -->
    </syncfusion:DockingManager>
</Window>

csharp

// Apply theme in code
SfSkinManager.SetVisualStyle(dockingManager, VisualStyles.VisualStudio2013);

属性	类型	用途	适用场景
UseDocumentContainer	bool	为窗口启用文档状态	需要MDI/TDI文档区域时
ContainerMode	DocumentContainerMode	设置MDI或TDI模式	在多文档界面（MDI）和选项卡式文档界面（TDI）间选择时
PersistState	bool	关闭时自动保存布局	用户需要在会话间保留窗口排列时
UseNativeFloatWindow	bool	使用WPF Window实现浮动窗口	获得更好的多显示器支持和调整大小体验时
MaximizeButtonEnabled	bool	在停靠窗口上显示最大化按钮	用户需要最大化停靠面板时
MinimizeButtonEnabled	bool	在停靠窗口上显示最小化按钮	用户需要最小化停靠面板时
TabGroupEnabled	bool	允许创建水平/垂直选项卡组	实现高级TDI文档分组时
IsVS2010DraggingEnabled	bool	启用VS2010风格的拖放	实现现代化拖放行为（允许TDI选项卡浮动）时

Key Properties

每个窗口的核心附加属性

Essential DockingManager Properties

—

Property	Type	Purpose	When to Use
UseDocumentContainer	bool	Enables Document state for windows	When you need MDI/TDI document areas
ContainerMode	DocumentContainerMode	Sets MDI or TDI mode	To choose between Multiple Document Interface (MDI) or Tabbed Document Interface (TDI)
PersistState	bool	Auto-saves layout on close	When users need to preserve window arrangements between sessions
UseNativeFloatWindow	bool	Uses WPF Window for float	For better multi-monitor support and resizing
MaximizeButtonEnabled	bool	Shows maximize button on docked windows	When users need to maximize docked panels
MinimizeButtonEnabled	bool	Shows minimize button on docked windows	When users need to minimize docked panels
TabGroupEnabled	bool	Allows creating horizontal/vertical tab groups	For advanced TDI document grouping
IsVS2010DraggingEnabled	bool	Enables VS2010-style dragging	For modern drag behavior where TDI tabs can float

属性	类型	用途	适用场景
Header	object	设置窗口标题	始终需要 - 用于标识窗口
State	DockState	设置窗口状态（停靠/浮动/自动隐藏/文档）	控制初始或运行时窗口状态时
SideInDockedMode	DockSide	设置停靠位置（左/右/上/下/选项卡式）	将窗口停靠到特定侧边时
TargetNameInDockedMode	string	指定相对停靠的目标窗口	实现选项卡式或并排排列时
DesiredWidthInDockedMode	double	设置停靠时的宽度	控制侧边停靠窗口的初始大小时
DesiredHeightInDockedMode	double	设置停靠时的高度	控制上下停靠窗口的初始大小时
CanDock	bool	启用/禁用停靠功能	限制某些窗口无法停靠时
CanFloat	bool	启用/禁用浮动功能	限制某些窗口无法浮动时
CanClose	bool	启用/禁用关闭功能	创建无法关闭的强制窗口时
NoHeader	bool	隐藏窗口标题	嵌入式内容不需要标题栏时

Essential Attached Properties (Per Window)

常见用例

—

用例1：IDE风格开发工具

Property	Type	Purpose	When to Use
Header	object	Sets window title	Always - required for identifying windows
State	DockState	Sets window state (Dock/Float/AutoHidden/Document)	To control initial or runtime window state
SideInDockedMode	DockSide	Sets dock position (Left/Right/Top/Bottom/Tabbed)	When docking windows to specific sides
TargetNameInDockedMode	string	Specifies target window for relative docking	For tabbed or side-by-side arrangements
DesiredWidthInDockedMode	double	Sets width when docked	To control initial size of side-docked windows
DesiredHeightInDockedMode	double	Sets height when docked	To control initial size of top/bottom-docked windows
CanDock	bool	Enables/disables docking	To restrict certain windows from being docked
CanFloat	bool	Enables/disables floating	To restrict certain windows from floating
CanClose	bool	Enables/disables closing	To create mandatory windows that can't be closed
NoHeader	bool	Hides window header	For embedded content that doesn't need a title bar

创建类似Visual Studio的界面，包含：

Solution Explorer停靠在右侧
Toolbox自动隐藏在左侧
Properties面板可浮动或停靠
代码编辑器作为TDI文档
Output窗口停靠在底部

实现方式： 使用

UseDocumentContainer="True"

并设置

ContainerMode="TDI"

作为主文档区域。为工具窗口配置合适的状态（停靠、自动隐藏），并启用

PersistState

以保存用户的布局偏好。

Common Use Cases

用例2：多文档数据分析仪表板

Use Case 1: IDE-Style Development Tool

—

Create a Visual Studio-like interface with:

Solution Explorer docked on the right
Toolbox auto-hidden on the left
Properties panel floating or docked
Code editor as TDI document
Output window docked at bottom

Approach: Use

UseDocumentContainer="True"

with

ContainerMode="TDI"

for the main document area. Configure tool windows with appropriate states (Dock, AutoHidden) and enable

PersistState

to save user's layout preferences.

创建数据分析应用，包含：

多个图表窗口以TDI模式存在
数据网格作为停靠面板
筛选面板可浮动
选项卡组用于并排比较图表

实现方式： 启用

TabGroupEnabled="True"

的TDI模式，允许用户创建水平/垂直选项卡组。启用

IsVS2010DraggingEnabled

以实现灵活的文档排列。

Use Case 2: Multi-Document Data Analysis Dashboard

用例3：带持久化工作区的设计应用

Create a data analysis application with:

Multiple chart windows in TDI mode
Data grid as a docked panel
Filter panel that can float
Tab groups for comparing charts side-by-side

Approach: Use TDI mode with

TabGroupEnabled="True"

to allow users to create horizontal/vertical tab groups. Enable

IsVS2010DraggingEnabled

for flexible document arrangement.

创建CAD或图像编辑应用，包含：

工具面板可停靠或浮动
属性面板根据选择动态调整
画布作为中央文档
布局在会话间持久化
支持多显示器

实现方式： 使用

UseNativeFloatWindow="True"

以支持多显示器，启用

ShowFloatWindowInTaskbar="True"

以获得更好的任务栏集成，并使用

PersistState="True"

结合自定义序列化来保存完整的工作区状态。

Use Case 3: Design Application with Persistent Workspace

用例4：带上下文面板的文档编辑器

Create a CAD or image editing application where:

Tools panel can be docked or floated
Properties adjust based on selection
Canvas is the central document
Layout persists between sessions
Support for multiple monitors

Approach: Use

UseNativeFloatWindow="True"

for multi-monitor support, enable

ShowFloatWindowInTaskbar="True"

for better taskbar integration, and use

PersistState="True"

with custom serialization for saving complete workspace state.

创建文档编辑器，包含：

文档区域使用带固定功能的TDI选项卡
格式面板自动隐藏
大纲/导航面板停靠
评论面板可分离

实现方式： 使用带固定/取消固定功能的TDI模式（

AllowPin="True"

、

ShowPin="True"

）。为不常用面板配置自动隐藏，允许评论面板浮动以支持协作审阅场景。

Use Case 4: Document Editor with Context Panels

用例5：复杂数据录入应用

Create a document editor with:

Document area using TDI with pinnable tabs
Formatting panel that auto-hides
Outline/navigation panel docked
Comments panel that can be detached

Approach: Use TDI mode with pin/unpin functionality (

AllowPin="True"

ShowPin="True"

). Configure auto-hide for less frequently used panels. Allow floating for collaborative review scenarios.

创建数据录入应用，包含：

多个表单以MDI窗口形式存在
参考数据作为停靠侧边面板
验证消息面板在底部
为不同用户角色自定义工作区

实现方式： 使用

ContainerMode="MDI"

的传统多文档界面。实现自定义序列化以保存角色特定的布局。使用

CanClose="False"

创建无法关闭的强制参考面板。

Use Case 5: Complex Data Entry Application

—

Create a data entry application with:

Multiple forms in MDI windows
Reference data in docked side panels
Validation messages in bottom panel
Customizable workspace per user role

Approach: Use

ContainerMode="MDI"

for traditional multiple document interface. Implement custom serialization to save role-specific layouts. Use

CanClose="False"

for mandatory reference panels.

—