RadDoc and MVVM Pattern

[Andy]

Hi Team, I am relatively new in the Telerik WPF control world.
I am starting a new project where we have decided to use RadDocking. There will be a main DocumentHost to host my main window. It is very similar to Visual Studio type experience where I need to dynamically open multiple tabs in the DocumentHost. Besides, there will be a few dockable RadSplitContainer to host RadPanes. There will be interactions between these different panes.

Given that RadDocking is part of the application main window and different panes are like child to it, how do I make the app fully modular with MVVM pattern? I of course do not want a giant ViewModel that is the datacontext of the entire RadDocking.

I rather create UserControl specific to each child pane and have separate ViewModel for each UserControl.

Do not want any code in the code behind. What are your recommendations and best practices?

[Vladi]

Hi Andy,

You can take a look at our PanesSource feature that could be used to implement the RadDocking in a MVVM friendly manner. The PanesSource feature could be used in combination with a custom DockingPanesFactory in order to better customize the way specific RadPane instances create from the PanesSource are placed inside the control. For more details information about both features please take a look at our online documentation here. Please note that some properties like the ItemsSource property is not supported in the control and it is replaced by the PanesSource property. You can find the non supported properties here.

It is worth mentioning that you can take a look at this blog post which specifically describes how to recreated an IDE application with the use of RadDocking. The blog post provides runnable project of the described approach, hope this is helpful.

Regards,
Vladi
Telerik

 

 

[Andy]

Hi Vladi,

Thanksa lot for the links and the information. I got started quickly. I have the docking layout done and am able to create
RadPane dynamically using the DockingPanesFactory. Now how do I inject a WPF User Control in the pane which I created dynamically?

That user control will have another RadDocking with 3 panes inside it. Each child pane will have other normal controls –
textbox, combo, button etc. The user control is like a template.


The bottom line is – how do we inject a UserControl in the RadPane and then bind the User control to a View Model
class?

Please point me to any sample.

Thanks, Andy

[Graeme]

Hi Andy,

I have a solution for you however it is written for Silverlight using MEF: http://www.telerik.com/forums/usercontrol-inside-radpanelbaritem#1XpuwSyXPUWxvCLEtuPr_g 

You should be able to adapt it to WPF fairly easily.

Kind Regards,

Graeme

[Kalin]

Hello Andy,

What I can suggest you is to check the VisualStudioDocking example from our online SDK repository located on the following link:
https://github.com/telerik/xaml-sdk/tree/master/Docking/VisualStudioDocking

This is the example form the blog post we have provided in the previous post - each type of Pane there has different UserControl as content. Please give it a try and let us know if you have any further questions.

Hope this helps.

Regards,
Kalin
Telerik

 

 

[Andy]

This is the requirement in my case – Outside RadDocking > DocumentHost of outside docking > RadTab > RadDocking inside each Tab Item. I need to add the Tabs dynamically with the inner RadDocking inside the tab.

When I created this arrangement in design time – it loads. The static layout is attached.

But – when I add the tab dynamically with the inner docking inside it through a UserControl, it doesn’t work. Tab gets added dynamically without the inner RadDocking though.

Error comes saying “Sorry an unexpected error occurred, error has been logged” – not sure what is the error and where it is logging. is it possible to achieve this structure with the Docking and tab control. Any other alternative way to achieve similar User Experience?

[Vladi]

Hello Andy,

There are multiple approaches that could be used in order to achieve the desired behavior. The most straight forward one is to create custom ICommand instance that modifies the collections that are bound to the specific PanesSource property of the outer and inner RadDocking controls.

I created and attached a sample project for you that shows the described approach. hope this is helpful.

Regards,
Vladi
Telerik

 

 

[JackSH]

Do I understand correctly that use RadDocking as well as with the ListView, it is impossible? For example, to get this functionality:

<telerik:RadDocking>
    <telerik:RadDocking.DocumentHost>
        <telerik:RadSplitContainer>
            <telerik:RadPaneGroup ItemsSource="{Binding ObcSecurities2}">
                <telerik:RadPaneGroup.ItemTemplate>
                    <DataTemplate>
                        <DockPanel>
                            <telerik:RadDocumentPane Header="12" telerik:RadDocking.SerializationTag="RadDocumentPane" />
                        </DockPanel>
                    </DataTemplate>
                </telerik:RadPaneGroup.ItemTemplate>
            </telerik:RadPaneGroup>
        </telerik:RadSplitContainer>
    </telerik:RadDocking.DocumentHost>
</telerik:RadDocking>

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        private readonly ViewModelMain _viewModelMain;

        public MainWindow()
        {
            InitializeComponent();

            _viewModelMain = new ViewModelMain();
            DataContext = _viewModelMain;
        }
    }

    public abstract class ViewModelBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;

            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

    public class ViewModelMain : ViewModelBase
    {

        public ObservableCollection<string> ObcSecurities2 { get; set; }

        public ViewModelMain()
        {

            ObcSecurities2 = new ObservableCollection<string>() {"qwq", "qwqqwqw", "qqwqwqwqww"};
        }
    }
}

[JackSH]

RadDocking is great, but are you proposing to create RadPanes in the ViewModel and then distribute in the code behind?

http://www.telerik.com/help/wpf/not-supported-properties.html
http://www.telerik.com/help/wpf/raddocking-features-panes-panesource.html

You think this is a suitable solution for MVVM?

[Vladi]

Hi,

Using the RadDocking control like a ListView or any control that supports ItemsSource is not supported. The ItemsSource property is present in the RadPane class because it is inherited from the framework itself. In order to help with MVVM patters we introduced the PanesSource property. This property can be bound to any type of business objects not only RadPane objects. In this help article we provided an example that uses a collection of RadPane instance in order to simplify the basics of the approach. As mentioned in the article the PanesSource property can be set to any collection of objects and with the use of a DockingPanesFactory that collection would be represented as RadPane instances in the control.

A more complex MVVM scenario using RadDocking's PanesSource could be found in this blog post.

Regards,
Vladi
Telerik