How to: MVVM / floating panes

6 posts, 0 answers
  1. Daniel
    Daniel avatar
    23 posts
    Member since:
    May 2009

    Posted 23 Nov 2012 Link to this post

    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
  2. Thorsten
    Thorsten avatar
    26 posts
    Member since:
    Apr 2010

    Posted 30 Aug 2014 Link to this post

    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>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 04 Sep 2014 Link to this post

    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.
     
  5. Thorsten
    Thorsten avatar
    26 posts
    Member since:
    Apr 2010

    Posted 05 Sep 2014 in reply to Yana Link to this post

    Hi,

    thanks for the quick response.

    1. did the trick. Didn't thought about the different visual tree.
  6. Peter Hedley
    Peter Hedley avatar
    6 posts
    Member since:
    Dec 2009

    Posted 16 Jun 2015 Link to this post

    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.

     

  7. Nasko
    Admin
    Nasko avatar
    585 posts

    Posted 18 Jun 2015 Link to this post

    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
Back to Top
UI for WPF is Visual Studio 2017 Ready