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

Drop shape into container shape

8 Answers 58 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Rahul
Top achievements
Rank 1
Rahul asked on 17 Dec 2019, 08:59 PM

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

8 Answers, 1 is accepted

Sort by
0
Rahul
Top achievements
Rank 1
answered on 17 Dec 2019, 09:02 PM

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

<UserControl x:Class="Activities.Resources.DesignerItems.ContainerDesign"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             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>

 

 

 
0
Martin Ivanov
Telerik team
answered on 20 Dec 2019, 10:22 AM

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

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
Rahul
Top achievements
Rank 1
answered on 29 Dec 2019, 06:24 AM
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?
0
Rahul
Top achievements
Rank 1
answered on 29 Dec 2019, 07:19 AM

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? 

 

 

 

0
Rahul
Top achievements
Rank 1
answered on 29 Dec 2019, 07:20 AM
Sorry, forgot to attach image.
0
Martin Ivanov
Telerik team
answered on 30 Dec 2019, 01:34 PM

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

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
Rahul
Top achievements
Rank 1
answered on 30 Dec 2019, 04:19 PM

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. 

0
Martin Ivanov
Telerik team
answered on 02 Jan 2020, 01:04 PM

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

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.
Tags
Diagram
Asked by
Rahul
Top achievements
Rank 1
Answers by
Rahul
Top achievements
Rank 1
Martin Ivanov
Telerik team
Share this question
or