MVVM Adapter for WPF Docking Manager | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (173).NET Core  (29).NET MAUI  (199)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (211)BoldSign  (13)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (63)Flutter  (132)JavaScript  (219)Microsoft  (118)PDF  (80)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (892)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (50)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (127)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (62)Development  (618)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (37)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (497)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (42)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (379)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (17)Web  (582)What's new  (319)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)

MVVM Adapter for WPF Docking Manager

This article explains how to adapt the Syncfusion docking manager to an MVVM application. Since our WPF Docking Manager is not an item control, it is not possible to have a traditional item-source binding to a collection of objects in the view model. This can, however, be achieved by creating a wrapper or adapter for the docking manager.

I have used a simple text-reader application to demonstrate this approach. The sample looks like this:

clip_image001

  1. 1. Documents View: The pane that lists all the available documents. The tooltip will display the path of the document.
  2. 2. Properties View: The pane that shows the properties of a document. Our PropertyGrid control is used here.
  3. 3. Document View: The pane that uses the WPF flow-document reader to display the content of a file.
  4. 4. Command View: The view has two commands: Open Document and Exit. Executing an Open Document action will open the Open File Dialog. The document you open will be added to the existing documents list. Other commands like Close Document and New Document can also be implemented the same way.

The project structure looks like this:

clip_image002

Docking Adapter
The adapter is simply a user control that contains our docking manager as its content. The adapter has two properties—ItemsSource and ActiveDocument. Binding a collection of objects to the ItemsSource property will trigger a collection change in which the adapter will create a corresponding framework element (e.g., a Content control) in the docking manager, setting the underlying data context of the control to the business model.

<mvvm:dockingadapter itemssource="{Binding Workspaces}" activedocument="{Binding ActiveDocument,Mode=TwoWay}">
 
</mvvm:dockingadapter>

 

clip_image003

Our text-reader application maintains a collection of workspaces. A workspace can be a normal dock pane or a document pane. The adapter also maintains an interface called IDockElement, which maintains basic attributes needed for every dock element.

(The text-reader application is just for the sample and contains very basic operations. This article and sample intend to showcase the MVVM support for the docking manager.)

The adapter user control also determines the state of the element, whether it should be added to the docking manager as a dock element or document tab.

(The adapter can be further customized to add elements as floating or auto-hidden.)

The docking manager provides an ActiveWindowChanged event. Using this, the ActiveDocument property in the adapter needs to be updated every time focus changes to other panes.

Application structure

clip_image004

The view model has a collection of workspaces that is data-bond to the ItemsSource property of the docking adapter. The adapter transforms the particular view model or business object into a corresponding dock element in the docking manager.

Every dock element we see in the application is a workspace. There are three kinds of workspaces: the All Documents view, the Properties view, and the Document view. The docking adapter hooks up the “active window changed” event of the docking manager; the view model receives the message whenever the active document is changed.

Data Template
Since WPF has an implicit template approach, it is easy for us to apply visuals to the view models. In this application, the data templates are defined in App.xaml with only the DataType attribute mentioned and not key-specified. The WPF template engine will traverse the tree and find the appropriate model type and apply the templates.

            
<application.resources>
            <datatemplate datatype="{x:Type local:Document}">
                <grid>
                    <local:documentview></local:documentview>
                </grid>
            </datatemplate>
            <datatemplate datatype="{x:Type local:DocumentsViewModel}">
                <grid>
                    <local:documentsview></local:documentsview>
                </grid>
            </datatemplate>
            <datatemplate datatype="{x:Type local:PropertiesViewModel}">
                <grid>
                    <local:propertiesview></local:propertiesview>
                </grid>
            </datatemplate>
</application.resources>

 

Following this approach, the docking adapter can also be treated as a normal item control and can be used in any MVVM application.

Sample link

https://github.com/SyncfusionExamples/working-with-wpf-docking-manager-and-mvvm

Tags:

Share this post:

Comments (4)

i can not download this file, when i clicked this link,the browser response some errors like this
“This XML file does not appear to have any style information associated with it. The document tree is shown below.

AccessDenied
Access Denied
HE0EPY3MW8WJ9SG2
XRnwnXsAyP8tj5N6nkxkJjctWLPnJ5mNFSzD+org2YZ2jnS6gDImu4YIsm0VT4m8teaQjM2D6Ok=

i do not know what is going on
https://www.syncfusion.com/downloads/Support/DirectTrac/94251/DockingDemo2143110883.zip,
please give me so help ,thanks

Hi Alvin,
Please refer to the sample on GitHub: https://github.com/SyncfusionExamples/working-with-wpf-docking-manager-and-mvvm
We have also updated the link in the blog content.

Marcos Oliveira Mota
Marcos Oliveira Mota

Hello!

So, first thank you for this article. It is helping me a lot.

Two points though:

1. The pictures of this article is not loading.
2. In your code, when I move one of the tabbed documents to a new window and then drag and drop it again in the tab list (right after any tab), a System.StackOverflowException is thrown in line 40 of ViewModel.cs (code below). Any ideas on why this is happening and how to solve it? This only happens when dragging and dropping itens from the document list.

Line that throws the exception:

set { activeDocument = value; RaisePropertyChanged(“ActiveDocument”); }

Hi Marcos,
Regarding the exception, could you please report your issue through a ticket or forum?
Support: https://support.syncfusion.com/create
Forum: https://www.syncfusion.com/forums/newthread

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed