How to: MVVM / floating panes

[Daniel]

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

[Thorsten]

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>

[Yana]

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

 

 

[Thorsten]

Hi,

thanks for the quick response.

1. did the trick. Didn't thought about the different visual tree.

[Peter Hedley]

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.

 

[Nasko]

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

[Nathan]

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?

[Nathan]

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