How to DragDrop Custom Controlshape to RadDiagram in UI for WPF

[mickey0109]

Hello.

I am now customizing the demo source for "DiagramDesignToolBox", a diagram program for WPF.
Here I am trying to customize the shape controls in the ToolBox to suit my needs and drag and drop them to display on the interface.
In my ToolBox of the program, I want to display only the shape controls as shown in the picture.
So, I added custom shape controls to the toolbox by referring to https://docs.telerik.com/devtools/wpf/controls/raddiagram/features/raddiagrams-drag-drop.
But here, all others can perform draw drop, but only one shape control (end shape) cannot accurately perform draw drop.
This is my code follow as:

- XAML:

<ListBox x:Name="xListBox" Grid.RowSpan="2" Grid.Column="2">
                    <ListBox.Resources>
                        <Style x:Key="DraggableContainerShape" TargetType="telerik:RadDiagramContainerShape">
                            <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" />
                        </Style>
                        <Style x:Key="DraggableShapeStyle" TargetType="telerik:RadDiagramShape">
                            <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" />
                        </Style>
                    </ListBox.Resources>
                    <telerik:RadDiagramShape Width="100"
                         Height="100"
                         Content="Start"
                         Geometry="{telerik:FlowChartShape ShapeType=StartShape}"
                         Style="{StaticResource DraggableShapeStyle}" />
                    <telerik:RadDiagramShape Width="100"
                         Height="100"
                         Content="Task"
                         Style="{StaticResource DraggableShapeStyle}" />
                    <telerik:RadDiagramShape Width="100"
                         Height="100"
                         Content="Gateway"
                         Geometry="{telerik:FlowChartShape ShapeType=DecisionShape}"
                         Style="{StaticResource DraggableShapeStyle}" />
                    <telerik:RadDiagramShape
                                Width="100" 
                                Height="100" 
                                Geometry="{telerik:CommonShape ShapeType=EllipseShape}" 
                                Style="{StaticResource DraggableShapeStyle}">
                        <telerik:RadDiagramShape.ContentTemplate>
                            <DataTemplate>
                                <Ellipse Width="50" 
                                        Height="50" 
                                        Fill="#FF333333"
                                        />
                            </DataTemplate>
                        </telerik:RadDiagramShape.ContentTemplate>
                    </telerik:RadDiagramShape>
                </ListBox>

- C#:

public Example()
{
            InitializeComponent();

            DragDropManager.AddDragInitializeHandler(xListBox, OnDragInitialize);
            service = diagram.ServiceLocator.GetService<ISerializationService>();
}

        private void OnDragInitialize(object sender, DragInitializeEventArgs args)
        {
            args.AllowedEffects = DragDropEffects.All;
            SerializationInfo serializaedInfo;
            if (args.OriginalSource is RadDiagramShape)
            {
                RadDiagramShape draggedShape = args.OriginalSource as RadDiagramShape;
                List<RadDiagramShape> shapes = new List<RadDiagramShape>();
                shapes.Add(draggedShape);
                serializaedInfo = SerializationService.Default.SerializeItems(shapes);

            }
            else
            {
                RadDiagramContainerShape draggedShape = args.OriginalSource as RadDiagramContainerShape;
                List<RadDiagramContainerShape> shapes = new List<RadDiagramContainerShape>();
                shapes.Add(draggedShape);
                serializaedInfo = SerializationService.Default.SerializeItems(shapes);

            }
            args.Data = serializaedInfo;
        }

Please help me.

[Petar Mladenov]

Hi Vladimir,

The ContentTemplate property of the RadDiagramShape is not in the list of automatically saved/loaded properties in the diagram serialization process. List can be found here. Also please note , even if you add the Ellipse as a Content, Content is only saved / loaded as a string. UI elements are not recreated as this is a very complex and hard to define scenario (especially if bindings, styles, commands are involved).

The way to include such UI elements in the save/load process is to use the SerializationInfo dictionary. In the attached project you will find I save the EllipseTemplate key in the serialization info via the Tag property of the shape. On Deserialize (which is invoked on drop) I use the key to set the ContentTemplate. I hope this solution is applicable in your scenario.

Regards,
Petar Mladenov
Progress Telerik

[mickey0109]

Hi, Petar Mladenov.

 

Thank you for taking the time to solve the problem.
I admire your skills.
We would appreciate your continued cooperation in the future.
I want you to get good results in business.