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

How to: MVVM / floating panes

7 Answers 190 Views
Docking
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 23 Nov 2012, 03:14 PM
Hi,

I have created sample solution which uses RadDocking with MVVM approach: https://skydrive.live.com/redir?resid=51A46BBA4E9EF07E!1215

<telerik:RadDocking x:Name="dockManager"
     local:DockingExtensions.PaneSource="{Binding LayoutPanes}"
     local:DockingExtensions.ActivePane="{Binding ActivePane, Mode=TwoWay}">
     <telerik:RadDocking.Resources>
       <Style TargetType="telerik:RadPane">
         <Setter Property="Header" Value="{Binding Name}" />
         <Setter Property="Content" Value="{Binding View}" />
         <Setter Property="CanDockInDocumentHost" Value="False" />
       </Style>
 
       <Style TargetType="telerik:RadDocumentPane">
         <Setter Property="Header" Value="{Binding Name}" />
         <Setter Property="Content" Value="{Binding View}" />
         <Setter Property="CanDockInDocumentHost" Value="True" />
       </Style>
 
        
       <Style TargetType="telerik:ToolWindow">
         <Setter Property="Header" Value="{Binding Name}" />
         <Setter Property="Content" Value="{Binding View}" />
         <Setter Property="ToolTip" Value="This style is not applied when radpane is dragged. Why?" />
       </Style>
     </telerik:RadDocking.Resources>
      
     <telerik:RadSplitContainer />
   </telerik:RadDocking>


there's DockingExtensions.cs file with attached property called 'PaneSource'. This property generates RadPanes from it's value, see addRadPane method it that file.

When the RadPane is being generated, addRadPane method sets datacontext to radpane 
RadPane pane = ...

pane.DataContext = paneVM;


Works fine, until I make the pane floatable. Seems like the datacontext is not preserved when after radpane is moved to toolwindow.

My questions are:
1. How to extend DockingExtensions to support floating panes?
2. Why my style for ToolWindow isn't applied (see code above)
3. Can I disable floating functionality but allow user do reorder panes? setting CanFloat to false makes imposibble to drag&drop panes

7 Answers, 1 is accepted

Sort by
0
Thorsten
Top achievements
Rank 1
answered on 30 Aug 2014, 08:41 AM
Hi,

i'm experiencing the same issue with the newest UI Controls for WPF release, but in slightly different scenario.
I use caliburn micro for the resolution/display of the actual view.
As soon as i drag a pane out, the content template is no longer applied and the floating window only shows up the type name of the view model. 

<Style TargetType="rad:RadPane">
    <Setter  Property="ContentTemplate" >
        <Setter.Value>
            <DataTemplate>
                <ContentControl micro:View.Model="{Binding}" />
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style TargetType="rad:ToolWindow">
            <Setter  Property="ContentTemplate" >
                <Setter.Value>
                    <DataTemplate>
                        <ContentControl micro:View.Model="{Binding}" />
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>

<rad:RadDocking PanesSource="{Binding Tools}">
            <rad:RadDocking.DockingPanesFactory>
                <controls:LayoutDockingPanesFactory />
            </rad:RadDocking.DockingPanesFactory>
 
            <rad:RadSplitContainer InitialPosition="DockedLeft">
                <rad:RadPaneGroup  x:Name="LeftPaneGroup">
                </rad:RadPaneGroup>
            </rad:RadSplitContainer>
            <rad:RadSplitContainer InitialPosition="DockedRight">
                <rad:RadPaneGroup x:Name="RightPaneGroup">
                </rad:RadPaneGroup>
            </rad:RadSplitContainer>
            <rad:RadSplitContainer InitialPosition="DockedBottom">
                <rad:RadPaneGroup x:Name="BottomPaneGroup">
                </rad:RadPaneGroup>
            </rad:RadSplitContainer>
        </rad:RadDocking>
0
Yana
Telerik team
answered on 04 Sep 2014, 06:18 AM
Hello Thorsten,

We're not sure what is the reason for the issue in this case, we can only make a few suggestions that you can try:

1. Make sure that the provided Styles are defined in App.xaml (not inside the UserControl where the Docking is placed). This is needed especially for the ToolWindow Style as the ToolWindow is in a different visual tree and will not take the Style unless it is defined at a global level (App.xaml).

2. Try to set the DataContext of the Panes ( in code) to the DataContext of the Docking - when the pane is floated, it is actually taken out from the visual tree and this leads to some issues in certain scenarios. So you will need to ensure that the Pane has the DataContext correctly inherited.

If neither of these helps, please send us a sample project demonstrating the issue, so we to be able to test it at our side. You should open a support ticket and attach it there.

Regards,
Yana
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.
 
0
Thorsten
Top achievements
Rank 1
answered on 05 Sep 2014, 08:19 AM
Hi,

thanks for the quick response.

1. did the trick. Didn't thought about the different visual tree.
0
Peter Hedley
Top achievements
Rank 1
answered on 16 Jun 2015, 09:35 AM

HI, I'm another developer seemingly spending far too much time on the issue of dragging rad panes and the associated problems with DataCand/or styling. Could you please provide an example whereby if I drag a RadPane the resulting ToolWindow will have the same header template as the docked RadPane?

I have tried setting a global style for both the RadPane and ToolWindow in a resource dictionary where I am styling the HeaderTemplate (or TitleTemplate for RadPane) as described in the attached Styles document. I listen for the PaneStateChange event and explicitly the DataContext of both the ToolWindow and RadPaneGroup of the RadPane to be that expected by the Style. I've also attached two images which shows the docked and undocked versions of the RadPane. As you can see, the style appears to be picked up as the 'cog' options button is visible in both  images but the Bindings to set the header text are obviously not working.

 

Many thanks,

Peter.

 

0
Nasko
Telerik team
answered on 18 Jun 2015, 01:06 PM
Hello Peter,

We could not see any images attached. Could you please try to attached them again? Also, if you could send us a sample project that demonstrates the observed by you appearance of RadDocking will be of great help for our further investigation - thus we could be able to provide you with a prompt solution?

We are looking forward to hearing from you.

Regards,
Nasko
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Nathan
Top achievements
Rank 1
answered on 18 Jul 2018, 05:58 PM
I had this same problem and using solution #1 (App.xaml) works for me, too.  Unfortunately, I'm writing a control library and when I publish it won't have access to the client's App.xaml file.  Is there a way I can declare global resources within my control library?
0
Nathan
Top achievements
Rank 1
answered on 19 Jul 2018, 05:52 PM
I ended up using a global theme in the library, by creating a directory called "Themes" and adding a resource dictionary in "Themes/generic.xaml".
Tags
Docking
Asked by
Daniel
Top achievements
Rank 1
Answers by
Thorsten
Top achievements
Rank 1
Yana
Telerik team
Peter Hedley
Top achievements
Rank 1
Nasko
Telerik team
Nathan
Top achievements
Rank 1
Share this question
or