How to DragDrop Custom Control to RadDiagram

3 posts, 1 answers
  1. Abhinav
    Abhinav avatar
    5 posts
    Member since:
    Apr 2014

    Posted 23 Apr 2014 Link to this post

    I am currently trying to Drag Drop Custom Control from List box to RadDiagram.

    I am able to Drag the Custom Control (Shell) but not able to Create a Shape in RadDiagram.


    Shell (Custom Control)

     public class Shell : Telerik.Windows.Controls.Diagrams.RadDiagramShapeBase
            static Shell()
                DefaultStyleKeyProperty.OverrideMetadata(typeof(Shell), new FrameworkPropertyMetadata(typeof(Shell)));

    <Style TargetType="{x:Type local:Shell}">
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="BorderBrush" Value="Black"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Height" Value="100"/>
            <Setter Property="Width" Value="100"/>
            <Setter Property="Template">
                    <ControlTemplate TargetType="{x:Type local:Shell}">
                        <Grid Background="{TemplateBinding Background}">
                            <Ellipse Stroke="{TemplateBinding BorderBrush}"/>
                            <Ellipse  Margin="13" Stroke="Black" />

    Drag And Drop Code

    Telerik.Windows.DragDrop.DragDropManager.AddDragInitializeHandler(listBox, OnDragInitialize);  (ListBox)
    Telerik.Windows.DragDrop.DragDropManager.AddDropHandler(radDiagram, OnDropShape);(RadDiagram)

     private void OnDropShape(object sender, Telerik.Windows.DragDrop.DragEventArgs e)
                e.Handled = true;
                Shell shape = new Shell();
                var rawdata= (e.Data as DataObject).GetData(typeof(Shell));
                    Shell droppedShape = rawdata as Shell;

            private void OnDragInitialize(object sender,Telerik.Windows.DragDrop.DragInitializeEventArgs e)
                e.AllowedEffects = DragDropEffects.All;
               Shell draggedshape = (e.OriginalSource as ListBoxItem).Content as Shell;
               e.Data = draggedshape;
     I am able to get the dragged Shell but i don`t know how to convert the Shell object to RadDiagramShape.

    Any help is appreciated!!!


  2. Answer
    Martin Ivanov
    Martin Ivanov avatar
    1452 posts

    Posted 28 Apr 2014 Link to this post

    Hi Abhinav,

    In order to drag your custom shape in the diagram you can handle only the DragInitialize event of the ListBox. You can pass new DiagramDropInfo object as a e.Data in the event handler. This way the diagram will be notified about that you are dragging a diagram shape and the drop will be automatic handled.
    private void OnDragInitialize(object sender, DragInitializeEventArgs args)
               args.AllowedEffects = DragDropEffects.All;
               Shell draggedShape = (args.OriginalSource as ListBoxItem).Content as Shell;
               args.Data = draggedShape;
               var shapeSize = new Size(draggedShape.ActualWidth, draggedShape.ActualHeight);
               var dropInfo = new DiagramDropInfo(shapeSize, SerializationService.Default.SerializeItems(new List<IDiagramItem> { draggedShape }));
               args.Data = dropInfo;
               args.DragVisualOffset = new Point(args.RelativeStartPoint.X - (shapeSize.Width / 2), args.RelativeStartPoint.Y - (shapeSize.Height / 2));
               var draggingImage = new System.Windows.Controls.Image
                   Source = new Telerik.Windows.Media.Imaging.RadBitmap(draggedShape).Bitmap,
                   Width = shapeSize.Width,
                   Height = shapeSize.Height
               args.DragVisual = draggingImage;
    I also prepared a sample project with this approach. Please give it a try and let me know if it helps.

    However, you can take a look at the RadDiagramToolbox control which can hold your custom shapes. You can also see the Create Custom Shape help article and the Custom Toolbox Drag and Drop SDK example. In addition I suggest using the MVVM approach which is more flexible.

    You can see all of the RadDiagram SDK examples in our GitHub repository.

    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.
  3. Abhinav
    Abhinav avatar
    5 posts
    Member since:
    Apr 2014

    Posted 28 Apr 2014 in reply to Martin Ivanov Link to this post

    Thanks a lot Martin....

Back to Top