Telerik Binding RadPaneGroup to an ObservableCollection in WPF MVVM

An article by Ogi Ivanov 1 Comment

I had this done in AvalonDock (read my post here) but we purchased the Telerik Controls so I decided to convert my AvalonDock solution to Telerick RadDocking control. By the way Telerik does an awesome job with their controls and excellent customer service. My requirement was to have a dynamicaly populated tab document collection in the DocumentHost. Using the MVVM pattern I have a ViewModel bound to a Window which contains the RadDocking control. Binding a RadPaneGroup to an observable collection work fine populating the tabs but they cannot be closed using the built-in controls. So I placed a button on the tab header to remove the item from the ObservableCollection. I added a cutom header template to the window resources.

It uses a custom style ImageButtonStyle to give it a compact look and it calls the command CloseTabCommand on the ViewModel which after running some checks removes the SelectedRadPane from the RadPaneList collection.

So the ViewModel has the following properties bound to the xaml

public ObservableCollection<RadDocumentPane> RadPaneList { get; private set; }   
public RadDocumentPane SelectedRadPane { get; set;}  

And in order to add a RadDocumentPane to the collection I do the following which presumes there is a property Title on the ViewModel to bind the header to. It creates a new instance of the control to be displayed in the new tab and binds it to an instance of the respective ViewModel

System.Windows.Data.Binding binding = new System.Windows.Data.Binding("Title");   
RadDocumentPane documentPane = new RadDocumentPane();   
documentPane.SetBinding(RadDocumentPane.HeaderProperty, binding);   
documentPane.SetBinding(RadDocumentPane.ToolTipProperty, binding);   
documentPane.SetResourceReference(RadDocumentPane.HeaderTemplateProperty, "HeaderTemplate");   
documentPane.CanUserClose = false;   
documentPane.CanFloat = false;   
documentPane.ContextMenuTemplate = null;   
  
MyCustomContro myControl = new MyCustomControl();   
documentPane.DataContext = new DocumentPaneViewModel();   
documentPane.Content = myControl;   
  
RadPaneList.Add(documentPane);  

Enjoy