Drop shape into container shape

[Rahul]

Hi,

I am trying to drop shape into a container shape, but the shape is not displaying inside the container. Could anyone help me solve it? Here is my code.

 

EventManager.RegisterClassHandler(typeof(RadDiagramContainerShape), RadDiagramShape.DropEvent, new System.Windows.DragEventHandler(OnDrop));

 

 

private void OnDrop(object sender, System.Windows.DragEventArgs e)
        {
            e.Handled = true;
            if ((e.Data as DataObject)?.GetData(typeof(DragObject)) is DragObject dragObject)
            {
                var itemBase = (ActivityBase)Activator.CreateInstance(dragObject.ContentType);
                var p = e.GetPosition(MainDiagram);
                var shape= createDiagramShape(itemBase);

                RadDiagramContainerShape target = (sender as RadDiagramContainerShape);
                target.Items.Add(shape);
            }
        }



private RadDiagramShape createDiagramShape(ActivityBase activity)
        {
            var shape = new RadDiagramShape
            {
                Content = activity,
                BorderThickness = new Thickness(1),
                UseGlidingConnector = true,
                HorizontalContentAlignment = HorizontalAlignment.Stretch,
                VerticalContentAlignment = VerticalAlignment.Stretch,
                DataContext = activity,
                UseDefaultConnectors = false,
                IsRotationEnabled = false,

                Background = new SolidColorBrush(Color.FromArgb(255, 255, 255, 255)),
                GlidingStyle = GlidingStyle.Rectangle
            };

            var outconnector = new InOutConnector
            {
                Offset = new Point(1, 0.2),
                Direction = eDirection.drOut,
                Name = "out" + DateTime.Now.Millisecond
            };
            shape.Connectors.Add(outconnector);

            var inconnector = new InOutConnector
            {
                Offset = new Point(0, 0.2),
                Direction = eDirection.drIn,
                Name = "in" + DateTime.Now.Millisecond,
            };
            shape.Connectors.Add(inconnector);
            return shape;
        }

 

 

The following function to drop shape inside the diagram works.

private void OnDropShape(object sender, DragEventArgs e)
        {
            e.Handled = true;
            if ((e.Data as DataObject)?.GetData(typeof(DragObject)) is DragObject dragObject)
            {
                var itemBase = (ActivityBase) Activator.CreateInstance(dragObject.ContentType);
                var p = e.GetPosition(MainDiagram);
                var shape = createDiagramShape(itemBase);

                MainDiagram.AddShape(shape, MainDiagram.GetTransformedPoint(p));
                _mainViewModel.ShapeCollection = MainDiagram.Shapes;
                _mainViewModel.SelectedActivity = calendar.DataContext as ActivityBase;

            }
        }

 

 

Thanks,

Rahul

[Rahul]

This is my container shape I am using, same as the shapes.

<UserControl x:Class="Activities.Resources.DesignerItems.ContainerDesign"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:Activities.Resources.DesignerItems"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             mc:Ignorable="d" >
    <Grid>
        <telerik:RadDiagramContainerShape IsDropEnabled="True"
                                          Height="300"
                                          Width="300"
                                          IsCollapsible="False"
                                          ItemsSource="{Binding}">

        </telerik:RadDiagramContainerShape>
</Grid>
</UserControl>

 

 

 

[Martin Ivanov]

Hello Rahul,

RadDiagramContainerShape and RadDiagramShape are designed to work with the RadDiagram control. In other words, to make them work properly you will need to host them inside a RadDiagram control. 

The posted code doesn't work because adding a shape in the RadDiagramContainerShape's Items collection triggers an action that adds the visual element in the diagram surface. However, because there is no diagram, the shape cannot be added and therefore it is not presented in the visual tree. 

In order to make this work, you will need to wrap the container shape into RadDiagram.

Regards,
Martin Ivanov
Progress Telerik

[Rahul]

Sorry martin, I did not understand. Do I need to add another diagram inside the containershape for it to display the items I drop inside the container?

[Rahul]

I changed the code to this.

<telerik:RadDiagram Height="300"
                            Width="300">
        <telerik:RadDiagramContainerShape IsDropEnabled="True"
                                          Height="300"
                                          IsDraggingEnabled="False"
                                          Width="300"
                                          IsCollapsible="True">

            </telerik:RadDiagramContainerShape>
        </telerik:RadDiagram>

 

Now I am able to drag and drop other items inside the container but there are some issues. Please refer to the attached image.

 

When I drop the container it looks like the leftmost container in the attached image. It looks like the second, when I add an item inside. When i do that I lose the ability to collapse the container, and when I am able to collapse it, it is not changing the height of its parent diagram. How do I go about solving these issues? 

 

 

 

[Rahul]

Sorry, forgot to attach image.

[Martin Ivanov]

Hello Rahul,

The RadDiagramContainerShape elements are meaningful in the context of RadDiagram. This means that they will behave properly, accordingly to the RadDiagram behavior. For example, you can move a container around by dragging it and changing its size won't change the diagram size. Basically, the diagram have a virtually infinite surface and you can manipulate the shapes in it by moving them or changing some properties. To achieve your requirement you will need to implement custom code that manually handles all the default interactions of the shape with the diagram. This said, if you tell me what exactly is your idea and why do you want to use RadDiagramContainerShape I can think of a more suitable control for your case.

Regards,
Martin Ivanov
Progress Telerik

[Rahul]

Hi Martin.

I would like the container to behave like it does in the swimlanes demo. I have many types of items in a toolbox with a container item. I would like to drop the container on the diagram like I do other items, and also I want to drop the items inside the container. When there are a lot of items in the diagram I want to collapse the container shape. I have everything working but I am not able to make the container work like I want. 

[Martin Ivanov]

Hello Rahul,

Thank you for the additional description. Can you tell me why the Swimlane demo implementation doesn't work for you? In any case, to achieve this type of visualization, you will need to use RadDiagram as a host for the RadDiagramContainerShape elements. However, keep in mind that you will need to manually resize the diagram in order to avoid the behavior described in your previous reply.

Another approach that you can consider is to use the RadExpander control with an ItemsControl (like RadListBox or similar) and implement custom drag/drop that adds/removes items from the expander's Content. 

Regards,
Martin Ivanov
Progress Telerik