RadDoc and MVVM Pattern

10 posts, 0 answers
  1. Andy
    Andy avatar
    1 posts
    Member since:
    Mar 2014

    Posted 25 Apr 2014 Link to this post



    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?

  2. Vladi
    Admin
    Vladi avatar
    744 posts

    Posted 28 Apr 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Andy
    Andy avatar
    13 posts
    Member since:
    Apr 2014

    Posted 01 May 2014 in reply to Vladi Link to this post



    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

  5. Graeme
    Graeme avatar
    21 posts
    Member since:
    May 2012

    Posted 04 May 2014 in reply to Andy Link to this post

    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
  6. Kalin
    Admin
    Kalin avatar
    1207 posts

    Posted 05 May 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  7. Andy
    Andy avatar
    13 posts
    Member since:
    Apr 2014

    Posted 05 May 2014 in reply to Kalin Link to this post



    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?

  8. Vladi
    Admin
    Vladi avatar
    744 posts

    Posted 08 May 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  9. JackSH
    JackSH avatar
    8 posts
    Member since:
    Apr 2013

    Posted 10 May 2014 Link to this post

    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"};
            }
        }
    }
  10. JackSH
    JackSH avatar
    8 posts
    Member since:
    Apr 2013

    Posted 10 May 2014 Link to this post

    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?
  11. Vladi
    Admin
    Vladi avatar
    744 posts

    Posted 12 May 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
Back to Top
UI for WPF is Visual Studio 2017 Ready