[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
   Reporting
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Collapse]Layout Management
   [Collapse]Dock Windows
    [Expand]Getting Started
    [Expand]Dock Items
    [Expand]Layout Items
    [Expand]Runtime Features
    [Collapse]Miscellaneous
      Saving and Restoring the Layout of Dock Panels and Controls
      Managing Dock Panels in Code
      MVVM Support - Building Dock UI
      Move Panels Between DockLayoutManager Instances
      WPF and WinForms Interoperation Limitations
    [Expand]Examples
   [Expand]Tile and Layout
   [Expand]Tab Control
   [Expand]Carousel
    Book Control
    Workspace Manager
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

MVVM Support - Building Dock UI

This topic covers two ways to building a dock UI using the MVVM design pattern.

  1. Implementing the IMVVMDockingProperties interface - the most common solution; in this approach, each ViewModel should implement the IMVVMDockingProperties interface.
  2. Using the LayoutAdapter - the approach is suitable for advanced tasks, which require dock panels to be placed in positions that cannot be addressed beforehand.

In these two solutions, you assign a collection of ViewModels, which represent dock panels, to the DockLayoutManager.ItemsSource property. For each object in this collection, a dock panel is to be created. The difference between the solutions is in specifying "targets" for dock panels. In DXDocking, "target" is a specific Layout Group or Document Group where the dock panel is placed.

A "target" also defines the type of a created dock panel. If the target refers to a DocumentGroup, the created dock panel will be a DocumentPanel object. If the target is a LayoutGroup, the dock panel will be a LayoutPanel object.

Here are the general customizations applicable in all two approaches.

  • In XAML, create a base layout of Layout Groups and Document Groups into which dock panels will be added. Specify names for these groups.
  • Assign a collection of View Models that represent dock panels to the DockLayoutManager.ItemsSource property. A dock panel will be created for each object in this collection.
  • You can specify how elements of the DockLayoutManager.ItemsSource collection are rendered using the DockLayoutManager.ItemTemplate and DockLayoutManager.ItemTemplateSelector properties.

  • You can create Styles that target the DocumentPanel and LayoutPanel classes to initialize created dock panels from information provided by View Models.

  • To initialize contents of panels, you can define DataTemplates that target dock panel View Models.

  • To properly serialize/deserialize the DockLayoutManager layout, bind the BaseLayoutItem.BindableName property to a corresponding property in the panel's View Model.

Expanded Implementing the IMVVMDockingProperties interface

In this approach, the View Models must implement the IMVVMDockingProperties interface, which is defined as follows:

The TargetName property should return the name of the target Layout Group/Document Group where the created dock panel is to be placed.

A complete example demonstrating the use of the IMVVMDockingProperties interface can be found at: How to build dock UI according to MVVM pattern using IMVVMDockingProperties interface.

Expanded Using LayoutAdapter

With this approach, the View Models (for dock panels) can be any object descendants.

Using the LayoutAdapter is appropriate for tasks that require additional customizations. For instance, in some cases, you may not be able to identify a target Layout Group/Document Group for a created dock panel beforehand (e.g. , if the target Layout Group/Document Group does not currently exist). In this case, you need to create the target Group before adding panels to it. The LayoutAdapter class provides a solution to these and other issues that require additional actions to be performed prior to dock panel lay-outing.

The following are steps needed for using the LayoutAdapter.

  1. Create a LayoutAdapter class, which is an object that implements the ILayoutAdapter interface.

    The Resolve method should return the name of a "target" Layout Group/Document Group for a specific dock panel (passed as the item parameter). When implementing the Resolve method you are able to perform any action prior to returning a target name.

  2. Assign a LayoutAdapter instance to the MVVMHelper.LayoutAdapter attached property on the DockLayoutManager.

See the following topic for an example demonstrating this approach: How to build dock UI according to MVVM pattern using LayoutAdapter.

Expanded See Also

Is this topic helpful?​​​​​​​