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

RadPane Default as Tabbed Document

4 Answers 432 Views

Docking

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

Craig asked on 27 Oct 2016, 07:58 PM

default_launch.png

desired_launch.png

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 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

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!

answered on 31 Oct 2016, 02:08 PM

default_launch.png

desired_launch.png

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

answered on 31 Oct 2016, 03:10 PM

raddocumentpane.png

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