RadPane Default as Tabbed Document

[Craig]

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>

[Nasko]

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

[Craig]

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

[Craig]

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

[Craig]

Hi Nasko,

I figured it out, thanks again for your guidance,

Craig