RadPane Default as Tabbed Document

5 posts, 0 answers
  1. Craig
    Craig avatar
    7 posts
    Member since:
    Sep 2016

    Posted 27 Oct Link to this post

    Hi,

    I'm trying to get my UI framework built and I'm having some difficulty getting the default state of things working correctly.  I attached two photos, one is the default view that my current XAML gives me and the second picture is how I want it to be displayed by default.  Essentially, I would like a new RadPane or RadDocumentPane to display as a Tabbed Document by default.  This means having each pane have it's own "window", not tabs stacked up in the same window.  Hopefully that makes sense.

    If you need any other information, please let me know.

    Kindest Regards,

    Craig

    My XAML:

    <TabControl.ContentTemplate>
    <DataTemplate>
    <!--<telerik:RadDocking>
    <telerik:RadDocking.DocumentHost>
    <telerik:RadSplitContainer>
    <telerikHelpers:PyrixRadPaneGroup PanesSource="{Binding DockingManagerVM.DockingWindowVMs}"
    PanesTemplateSelector="{StaticResource DockingTemplateSelector}" />
    </telerik:RadSplitContainer>
    </telerik:RadDocking.DocumentHost>
    </telerik:RadDocking>-->
        <telerik:RadDocking x:Name="radDocking1">
    <telerik:RadSplitContainer Height="200" InitialPosition="DockedTop" Orientation="Horizontal">
    <telerik:RadPaneGroup telerik:ProportionalStackPanel.RelativeSize="200, 200">
    <telerik:RadPane Header="pane" />
    </telerik:RadPaneGroup>
    <telerik:RadPaneGroup telerik:ProportionalStackPanel.RelativeSize="400, 200">
    <telerik:RadDocumentPane Header="pane" />
    </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
    </telerik:RadDocking>
    </DataTemplate>
    </TabControl.ContentTemplate>

  2. Nasko
    Admin
    Nasko avatar
    588 posts

    Posted 31 Oct Link to this post

    Hello Craig,

    In order to achieve the desired visualization of the Panes as demonstrates in the image you need to place the SplitContainer inside DocumentHost:
    <telerik:RadDocking x:Name="radDocking1">
        <telerik:RadDocking.DocumentHost>
            <telerik:RadSplitContainer Orientation="Horizontal">
                <telerik:RadPaneGroup>
                    <telerik:RadPane Header="pane" />
                </telerik:RadPaneGroup>
                <telerik:RadPaneGroup>
                    <telerik:RadDocumentPane Header="pane" />
                </telerik:RadPaneGroup>
            </telerik:RadSplitContainer>
        </telerik:RadDocking.DocumentHost>
    </telerik:RadDocking>

    Please, give it a try and let us know if it works for you.

    Hope this helps.

    Regards,
    Nasko
    Telerik by Progress
    Do you need help with upgrading your WPF project? Try the Telerik API Analyzer and share your thoughts!
  3. UI for WPF is Visual Studio 2017 Ready
  4. Craig
    Craig avatar
    7 posts
    Member since:
    Sep 2016

    Posted 31 Oct in reply to Nasko Link to this post

    Hello Nasko,

    Yes, that worked, thank you.

    Now I'm trying to integrate the solution you gave me into a MVVM solution.  Is there any documentation that can help me create the same behavior using MVVM?

    I've read the documentation on RadPanes but every time I add a RadPane, it only shows like the Default_Launch.png in my original post.  Here is what I've done so far:

    Xaml:

                        <telerik:RadDocking PanesSource="{Binding DockingManagerVM.DockingWindowVMs}">
                            <telerik:RadDocking.DockingPanesFactory>
                                <telerikHelpersFactory:MyDockingPanesFactory />
                            </telerik:RadDocking.DockingPanesFactory>
                        </telerik:RadDocking>

    Factory::AddPane(...)

            protected override void AddPane( RadDocking radDocking, RadPane pane )
            {
                DockingWindowBaseViewModel baseVM = pane.Content as DockingWindowBaseViewModel;
                pane.Header = baseVM.Model.Title;
                base.AddPane( radDocking, pane );
            }

    If I should create a new topic please let me know.

    Thanks again for your help,

    Craig

  5. Craig
    Craig avatar
    7 posts
    Member since:
    Sep 2016

    Posted 31 Oct in reply to Craig Link to this post

    Hello Nasko,

    I think I'm getting closer :).  In my Factory, I have overriden the CreatPaneForItem and in there, I create a RadDocumentPane instead of just a RadPane and it gives me tabs but all the tabs are again in the same window.  Any ideas about how to create the panes in their own DocumentHost to give me the view I desire?

    Here's my new factory method:

            protected override RadPane CreatePaneForItem( object item )
            {
                var viewModel = item as DockingWindowBaseViewModel;
                if( viewModel != null )
                {
                    var pane = new RadDocumentPane();
                    pane.DataContext = item;
                    RadDocking.SetSerializationTag( pane, viewModel.Model.Id.ToString() );
                    pane.Content = item;

                    return pane;
                }

                return base.CreatePaneForItem( item );
            }

            protected override void AddPane( RadDocking radDocking, RadPane pane )
            {
                DockingWindowBaseViewModel baseVM = pane.Content as DockingWindowBaseViewModel;
                pane.Header = baseVM.Model.Title;            
                base.AddPane( radDocking, pane );
            }

    Thanks again,

    Craig

  6. Craig
    Craig avatar
    7 posts
    Member since:
    Sep 2016

    Posted 31 Oct in reply to Craig Link to this post

    Hi Nasko,

    I figured it out, thanks again for your guidance,

    Craig

Back to Top
UI for WPF is Visual Studio 2017 Ready