Enable autoscroll behavior in diagrams

8 posts, 0 answers
  1. Joost
    Joost avatar
    8 posts
    Member since:
    Feb 2015

    Posted 08 Sep 2015 Link to this post

    Hi,

    When making a large diagram it's nice to have the RadDiagram scroll along when you drag a shape or a connector.
    I'm not really sure what the best approach is here though, I know how to implement it with a regular ScrollView but this is slightly different.

    I found some information here: here and here regarding autoscrolling but when I apply it to a diagram like this:

    <telerik:RadDiagram Grid.Column="1" Grid.Row="1" x:Name="diagram"
                                ScrollViewer.HorizontalScrollBarVisibility="Visible"
                                ScrollViewer.VerticalScrollBarVisibility="Visible"
                                RouteConnections="True"
                                ConnectionRoundedCorners="True"
                                telerik:ScrollingSettingsBehavior.IsEnabled="True"/>

    The following error appears in VS:
    Error Value cannot be null.
    Parameter name: scrollingService

    Can autoscroll be enabled for RadDiagrams? Or am I doing something wrong here.

     

  2. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 11 Sep 2015 Link to this post

    Hi Joost,

    The ScrollingSettingsBehavior.IsEnabled attached property does not work with RadDiagram. This is why the described exception is thrown. RadDiagram doesn't support auto scrolling out of the box. To achieve such functionality you can create a custom diagram that derives from RadDiagram and implements the IScrollingServiceCore and IScrollingInfo interfaces. You can find an example for this approach in the OrgChart demo.

    Regards,
    Martin
    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
  3. UI for WPF is Visual Studio 2017 Ready
  4. Joost
    Joost avatar
    8 posts
    Member since:
    Feb 2015

    Posted 11 Sep 2015 in reply to Martin Link to this post

    Hi Martin,

    I tried the custom "OrgChartDiagram" class with autoscrolling and that's a step in the right direction.
    Whenever I drag a new shape from the toolbox into the diagram it scrolls. Existing shapes in the diagram don't trigger the OnElementDragOver callback however, so no autoscrolling there. I suppose the diagram is performing an internal drag/drop.

    I tried to fiddle around with the RadDiagram.Drag event, but that one is only triggered after the drag. The MouseDown event could work, even ​for when you're selecting a group of shapes in the diagram. But I've not yet figured out how to make the DragDropManager respond to this.

    What would be the best approach to implement that part for both shapes and connectors?​

    Best regards

  5. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 16 Sep 2015 Link to this post

    Hi Joost,

    I will need additional time to check your case. I will contact you with more information in few hours.

    Regards,
    Martin
    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
  6. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 17 Sep 2015 Link to this post

    Hello Joost,

    Indeed, the mentioned interfaces doesn't work when you drag shapes that are already plotted in the diagram. This is because the interfaces work with DragDropManager and its events. On the other hand the dragging in RadDiagram actually doesn't use any drag events but a DraggingService that moves the items on a canvas surface.

    In this case you will need to write custom logic for the auto scrolling functionality. Basically, you can use the diagram's DraggingService and a DispatcherTimer. I prepared an example that demonstrates a possible approach for implementing this. However, this is merely a suggestion that is not finished and tested so I recommend you to use it only as a reference for your implementation. You can find the project attached in this reply.

    Regards,
    Martin
    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
  7. Joost
    Joost avatar
    8 posts
    Member since:
    Feb 2015

    Posted 24 Sep 2015 in reply to Martin Link to this post

    Hi Martin,

    Thanks for the example. I've combined your code together with the OrgChart demo code you mentioned earlier. Everything seems to work fine, I only need to solve some visual glitches when dragging a selection of items, but I can work that part out.

    The only real feature I still want is autscrolling when drawing a connection from one shape to another. The IDraggingService doesn't seem to respond to those actions. I tried the IManipulationPointService, but the events there only start triggering after the connection is drawn and something is happening to that connection.

    What service is available for that? Maybe I've overlooked it in the documentation.

    Best regards

  8. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 25 Sep 2015 Link to this post

    Hi Joost,

    Actually, the connections of the diagram are handled by the diagram tools which are exposed through the ToolService (which implements the IToolService interfrace). RadDiagram uses the ConnectionTool and the ConnectionManipulationTool to manipulate its connections. 

    For your convenience I prepared a sample project with an approach similar for the one for the shape's dragging. Please give it a try and let me know if it helps.

    Regards,
    Martin
    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
  9. Joost
    Joost avatar
    8 posts
    Member since:
    Feb 2015

    Posted 28 Sep 2015 Link to this post

    Hi Martin,

    That's a great demo. I've extended it with the RectangleSelectionTool so that selecting items also works with autoscroll.
    Thanks for all your help and samples.

    Best regards

Back to Top
UI for WPF is Visual Studio 2017 Ready