Custom shape drag / select events

3 posts, 0 answers
  1. Terry
    Terry avatar
    17 posts
    Member since:
    Mar 2013

    Posted 23 Apr 2015 Link to this post

    I have a custom usercontrol that is replacing the ContentTemplate for a RadDiagramShape. This usercontrol has a listbox containing other usercontrols.

    I'm wondering how I can have the RadDiagram drag and selection events captured for the parent shape when clicking on items in the inner listbox?



  2. Martin
    Martin avatar
    1052 posts

    Posted 28 Apr 2015 Link to this post

    Hello Terry,

    The described requirement is not supported out of the box and it requires customization in order to be achieved - which is not very straightforward task. However, I can give you couple ideas on how to achieve the desired functionality.
    • To sync the selection you can use the UIElement.AddHandler() method to subscribe for the SelectionChanged event of all ListBox elements in the diagram and inside the event handler use the SelectionService of the diagram to select the parent shape that holds the list box. Here is an example:
      public MainWindow()
          // other code
          this.diagram.AddHandler(ListBox.SelectionChangedEvent, new SelectionChangedEventHandler(listBox_SelectionChanged));

      private void listBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
          var listBox = (ListBox)e.OriginalSource;
          var service = this.diagram.ServiceLocator.GetService<ISelectionService<IDiagramItem>>() as SelectionService;
          var shape = listBox.ParentOfType<RadDiagramShape>();
    • On the other hand the dragging will require some additional implementation. For example you can subscribe for the MouseMove event of the diagram and implement custom drag when the mouse is over the ListBox element.
      void diagram_MouseMove(object sender, MouseEventArgs e)
          var draggingService = this.diagram.ServiceLocator.GetService<IDraggingService>() as DraggingService;       
          if (e.LeftButton == MouseButtonState.Pressed && !draggingService.IsDragging)
              var shape = this.diagram.SelectedItem as RadDiagramShapeBase;
              if (shape != null && shape.IsMouseOver)
                  // get the mouse position and translate it to diagram position using the diagram's GetTransformedPoint() method
                  // calculate the shape's new position based on the mouse's new and the old coordinates         
                  // set the new position to on the shape's Position property - shape.Position = newPosition
    Please try those approaches and let me know if they work for you.


    See What's Next in App Development. Register for TelerikNEXT.

  3. DevCraft banner
  4. Terry
    Terry avatar
    17 posts
    Member since:
    Mar 2013

    Posted 30 Apr 2015 in reply to Martin Link to this post

    Thank you. This does give me some ideas on how to move forward
Back to Top