Breadcrumb arrow Back to Code Examples

Working With WPF Dockingmanager And Multiple Docked Views

Sample date Updated on Apr 21, 2026
Browse Code Git logo Download
arrange docking dockingmanager grid layout syncfusion tools wpf

This sample demonstrates how to use the Syncfusion WPF DockingManager to create an IDE-like interface with multiple docked panes. It shows how different views such as Solution Explorer, Property Grid, TreeView, and a PDF Viewer can be arranged and docked relative to one another within a single window.

Overview

This example illustrates how DockingManager can be used to build a flexible docking layout by hosting multiple ContentControl elements and configuring their docking behavior through attached properties. Each docked pane is positioned using properties such as docking side and target pane, allowing the layout to resemble a development environment or tool-based workspace.

The layout is fully managed by DockingManager, enabling automatic arrangement, resizing, and docking behavior without manual layout calculations.

What This Sample Demonstrates

  • How to host multiple docked panes using DockingManager
  • How to position docked windows on different sides (Top, Right)
  • How to dock panes relative to other panes using target names
  • How to combine different Syncfusion controls within docked views
  • How to create an IDE-style layout using pure XAML configuration

Key Controls Used

  • DockingManager: Manages docking layout, resizing, and pane relationships
  • ContentControl: Acts as a container for individual docked views
  • PropertyGrid: Displays editable property information
  • TreeViewAdv: Shows hierarchical data within a docked pane
  • PdfViewerControl: Displays PDF documents inside a docked window

How It Works

  1. Each docked pane is defined as a ContentControl inside the DockingManager.
  2. Docking headers are set using DockingManager.Header.
  3. Pane positions are controlled using SideInDockedMode.
  4. Relative docking is achieved through TargetNameInDockedMode.
  5. DockingManager automatically handles layout arrangement and resizing.

Benefits

  • Creates professional, IDE-style docking interfaces
  • Eliminates the need for manual layout management
  • Supports complex pane relationships using declarative XAML
  • Easily extensible with additional docked views
  • Suitable for development tools, dashboards, and document-based applications

This approach is ideal for WPF applications that require flexible docking layouts with multiple interactive tool windows. ``

Up arrow