This is a migrated thread and some comments may be shown as answers.

How to DragDrop Custom Control to RadDiagram

7 Answers 148 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Abhinav
Top achievements
Rank 1
Abhinav asked on 23 Apr 2014, 10:29 AM
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!!!


 







7 Answers, 1 is accepted

Sort by
0
Accepted
Martin Ivanov
Telerik team
answered on 28 Apr 2014, 09:29 AM
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
 
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.
 
0
Abhinav
Top achievements
Rank 1
answered on 28 Apr 2014, 12:13 PM
Thanks a lot Martin....

0
Thomas
Top achievements
Rank 1
answered on 18 Oct 2019, 01:17 PM

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

0
Dinko | Tech Support Engineer
Telerik team
answered on 23 Oct 2019, 12:34 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Thomas
Top achievements
Rank 1
answered on 25 Oct 2019, 10:31 AM

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

0
Dinko | Tech Support Engineer
Telerik team
answered on 30 Oct 2019, 08:54 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Thomas
Top achievements
Rank 1
answered on 08 Nov 2019, 11:33 AM

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

 

Tags
Diagram
Asked by
Abhinav
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Abhinav
Top achievements
Rank 1
Thomas
Top achievements
Rank 1
Dinko | Tech Support Engineer
Telerik team
Share this question
or