This is a migrated thread and some comments may be shown as answers.

RadPane Default as Tabbed Document

4 Answers 183 Views
Docking
This is a migrated thread and some comments may be shown as answers.
Craig
Top achievements
Rank 1
Craig asked on 27 Oct 2016, 07:58 PM

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>

4 Answers, 1 is accepted

Sort by
0
Nasko
Telerik team
answered on 31 Oct 2016, 08:45 AM
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!
0
Craig
Top achievements
Rank 1
answered on 31 Oct 2016, 02:08 PM

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

0
Craig
Top achievements
Rank 1
answered on 31 Oct 2016, 03:10 PM

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

0
Craig
Top achievements
Rank 1
answered on 31 Oct 2016, 04:24 PM

Hi Nasko,

I figured it out, thanks again for your guidance,

Craig

Tags
Docking
Asked by
Craig
Top achievements
Rank 1
Answers by
Nasko
Telerik team
Craig
Top achievements
Rank 1
Share this question
or