Let’s assume we want to build an IDE or any other multi document application. The RadDocking control is the perfect control for covering this scenario. It has built-in support for tabbed Documents, hiding Panes, floating Windows, drag and drop, activation, save/load functionality, docking compasses etc. How can we combine all these amazing features in one working application? The next screenshot shows the final result of a possible IDE implementation:
Building the UI
The UI in the example contains two main layouts – the docking layout and a menu on top. Let’s add three main menu items on top for the main functionalities of an IDE, each of which has its own sub-menu items:
· Window – contains information for all opened documents.
We will need two kind of ViewModels – one for the MainWindow, and another one for the RadPane:
o LoadCommand – to loads the docking layout
Binding RadDocking with a Collection How to bind RadDocking control with a Collection in the ViewModel? This question was asked many times since the control was created and we didn’t have one straight answer for that, until now! With the Q3 SP1 release of RadDocking we are introducing two key properties for the control:
· IEnumerable PanesSource – dependency property (which plays a similar role to the ItemsSource in the ItemsControls). It can be bound to a collection of data items or panes. For the purpose of the example, we will bind it to the ObservableCollection in the MainWindowViewModel.
· DockingPanesFactory DockingPanesFactory – filling up the RadDocking control with panes is the easy part. Where the new panes should be positioned? The DockingPanesFactory gives the answer to this question. More information can be found in our online documentation here.
The logic for adding the newly created Pane is located in the AddPane override method. Simply reads the information from the PaneViewModel and adds it to the RadDocking control.
When saving the layout, RadDocking control generates an xml schema for its elements and their position, size and other properties. We need to set a SerializationTag for each Pane. Otherwise, each time when loading, a new Pane will be generated and we will lose the DataContext, which is not desirable. In MVVM scenario, the first thing to do is to save the ObservableCollection in the ViewModel, and after that the Docking layout itself. This is required because when reopening the application, the dynamic added items must be restored.
In most modern IDEs the Panes (floating Windows) can only be docked in specific places in the application. In order to implement this feature we can use the compasses of the RadDocking control and add some restrictions for showing them. Let’s add some restriction in order to make our brand new IDE behave as Visual Studio does. For example, the documents can be tabbed near another documents or they can go floating, but docking them in one group with “Solution Explorer” shouldn’t be possible. To do that we need to handle the PreviewShowCompass event of the control and add the restriction logic depending on the dragged item and the drop target.
The main menu items we need are:
· File – contains the main commands for creating new document, saving and loading the layout
We are really excited to present to you our vision of how the RadDocking control could and should be used when implementing the above described scenarios together in one project. The full source of the described example can be found in our online SDK repository here, you can download the entire repository as a zip file via this link.
Telerik XAML Team
Subscribe to be the first to get our expert-written articles and tutorials for developers!