ContainerShape customization Problems

[seokhyun]

Hello,
I am trying to create custom ContainerShape which looks like the attached files.

1) Sample01.png file
In the header, I want to add the 'text' and 'collapsible' button.
For the Child area, I want to add text boxes, arrow image, and connections.
In the middle, I want to add a '+' button, where a user can drag & drop a shape into containerShape.

2) Sample02.png file
In the header, I want to add 'text' and two buttons('+' and 'collapsible').
For the Child area, I want to add two separate areas, where each area contains its child items.
'+' button for each area is for a user to drag & drop a shape into the corresponding area.


3) Sample04.png file
So my question is how can I customize the red outlined area in sample04.png
to create custom containerShape described in sample01.png and sample02.png.

Any help will be greatly appreciated.

Thanks.

[Dinko | Tech Support Engineer]

Hello Seokhyun,

Thank you for the provided images.

To achieve this customization you can use the Content property of the RadDiagramContainerShape to place text and a button in the header. The collapsed button is already supported by the shape and to show it you can set the IsCollapsible property of the RadDiagramContainerShape to true. To add a text you can use the RadDiagramTextShape and RadDiagramConnection for the link. You can set the TargetCapType property of the RadDiagramConnection to show an arrow at the end.

For the second image, you can add two container shapes inside a container shape to simulate different areas inside. I have prepared a sample project to demonstrate what I have in mind.

Regards,
Dinko
Progress Telerik

[seokhyun]

thank you for your help.

i think it has a way to customize box layout template as header template does.
so if the box template can be customized, then resizing and relocating is automatic as container shape.

 

when container shape resize, how to be located the automatic position of shapes in container shape 
currently, I try to relocate on container shape size changed event

[Dinko | Tech Support Engineer]

Hello seokhyun,

The RadDiagramContainerShape are simple wrappers for the RadDiagramShapes that are set as their children. Hence the position of the child shapes cannot be (and are not) relative to the container. They are relative to the RadDiagram. The RadDiagramContainerShape will automatically resize to wraps all its children. I am not sure that I have fully understood your question here and that is why I will ask you to elaborate more on your scenario. What is the final goal which you want to achieve? You can send me an image, videos, a project of the desired behavior.

Regards,
Dinko
Progress Telerik

[seokhyun]

oh, i solve the problems

containerShape's Doc mentioned that customizing ContainerShape control ContentTemplate.

ContentTemplate is only header template customizing. so i tried to control just ConatinerShape's Template.

i worried about if i control Template, ContainerShape's benefits are not working.

and.... it's working !!!!!!

 

This problem is solved. but other Qustion is remained............

 

Thank you, Dinko.

I really appreciate your help.

[Dinko | Tech Support Engineer]

Hello seokhyun,

If I have understood your second question correctly, you want to get the position of the shapes inside a container when the container is resized. In that case, you can subscribe to the SizeChanged event of the RadDiagramContainerShape. In the event handler, you can use the Items collection of the RadDiagramContainer to get the shapes that the container wraps.

private void RadDiagramContainerShape_SizeChanged(object sender, SizeChangedEventArgs e)
{
    var containerShape = sender as RadDiagramContainerShape;
    foreach (IDiagramItem item in containerShape.Items)
    {
        var position = item.Position;
    }
}

Give this approach a try and let me know if it works for you.

Regards,
Dinko
Progress Telerik