How to DragDrop Custom Control to RadDiagram

[Abhinav]

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.

Code:

Shell (Custom Control)

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

Style
<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">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:Shell}">
                    <Grid Background="{TemplateBinding Background}">
                        <Ellipse Stroke="{TemplateBinding BorderBrush}"/>
                        <Ellipse  Margin="13" Stroke="Black" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

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;
               
                this.radDiagram.AddShape(droppedShape);
           
            }
            
        }

        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!!!


 

[Martin Ivanov]

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.

Regards,
Martin
Telerik

 

 

[Abhinav]

Thanks a lot Martin....

[Thomas]

Hello Martin.

I was wondering if you can help me with this topic in mvvm.

I`ve implemented your example "CommandDragDropBehavior" which works fine. I get the data in my viewmodel. But now my custom shape won`t be attached in the raddiagram.

At the behavior args.Data gets a payload with "DragData". But in your example here args.Data gets a DiagramDropInfo.

 

How can I handle this if i want the Drop-Command in my viewmodel and the custom shape in my raddiagram.

 

Thank you

BRGDS Thomas

[Dinko | Tech Support Engineer]

Hi Thomas,

What I can suggest to you here is to move the custom logic in a custom attached property. I have modified the project from my colleague Martin to demonstrate how you can achieve the same behavior using an attached property. 

I hope this approach will work for you.

Regards,
Dinko
Progress Telerik

[Thomas]

Hello Dinko,

thank you for your example. But I don`t know what to do with it.

My problem is actually that I have a Listbox with "CustomNodeShapes" (ViewModel) items and another Listbox with other viemodelitems. Now the CommandDragDropBehavior works fine. In my RadDiagramViewModel I receive the viewmodels of the listbox items i`ve dragged in my OnDropCommandExecute relay command.

Problem is that my CustomNodeShape isn`t created in RadDiagram after drop.

(args.OriginalSource as ListBoxItem).Content now is my ViewModel and not my CustomNodeShape control.

What I`ve to do that my CustomNodeShape will be created in RadDiagram after drop from listbox?

Telerik with MVVM is not that easy  :)

Best Regards

Thomas

[Dinko | Tech Support Engineer]

Hi Thomas,

Thank you for the provided clarifications.

May I ask you to specify which example you are referring to as I am unable to find this CommandDragDropBehavior. To avoid any misunderstanding, is it possible to modify the attached project from my previous reply to mimics your implementation. I am assuming that you have created custom attached behavior like in the example in my previous reply. Can you share the implementation of the OnDragInitialize event handler on your side?

I am looking forward to your reply.

Regards,
Dinko
Progress Telerik

[Thomas]

Hello Dinko,

I´ve solved this problem.

Over drag command I reveice the vm of my customshape. Then I add the customshape vm to GraphSource of RadDiagram with AddNode-method.

Thanks for your help.

BRGDS