How to position RadDiagramContainerShape

[John]

How do i position RadDiagramContainerShape? I tried setting Position in code behind but it does not work.

thanks,
John

[Tina Stancheva]

Hi John,

The RadDiagramContainerShape is designed to position and size itself accordingly to both its Position and Size properties and the position and size of its children. This means that if the Position of the container and its size allows the container to properly wrap its children taking into account their Positions and sizes, then all properties will be applied. In this case the container will be displayed to reflect its position and size as expected.

However, if you have a case where the children cannot be wrapped using the initial Position of the container, then the container will be resized to wrap its children. In this case the Position of the child shapes is with higher priority. The container tries to layout in its initial Position and only then it tries to stretch and wrap its children. This is why you get a container that is enhanced beyond its initial bounds.

I am not sure if this information will help you in your case but if you can further elaborate on your scenario, we can take a closer look at it and discuss why the Position property in your particular scenario is disregarded.

Regards,
Tina Stancheva
Telerik

[John]

Given the following code...not the position. What i get is shown in posset.png. Without that line, what i see is posnotset.png. what i want is to place them side by side with some space between them.

 

 

 

ColumnMappingSourceViewModel columnMappingsourceVM = new ColumnMappingSourceViewModel();

 

 

 

RadDiagramContainerShape cc = new RadDiagramContainerShape();

 

cc.IsCollapsible =

 

true;

 

cc.Padding =

 

new Thickness(5, 5, 5, 5);

 

cc.Content =

 

"Extract Columns";

 

cc.UseDefaultConnectors =

 

false;

 

cc.ItemsSource = columnMappingsourceVM.TreeItems;

cc.Name =

 

"SourceContainer";

 

cc.ZIndex = 1;

diagram.AddShape(cc);

 

 

ColumnMappingDestinationViewModel columnMappingDestinationVM = new ColumnMappingDestinationViewModel();

 

 

 

RadDiagramContainerShape cc2 = new RadDiagramContainerShape();

 

cc2.Name =

 

"DestinationContainer";

 

cc2.IsCollapsible =

 

true;

 

cc2.Padding =

 

new Thickness(5, 5, 5, 5);

 

cc2.Content =

 

"Maps To Columns";

 

-----------> cc2.Position =

 

new Point(300, 0);

 

cc2.ItemsSource = columnMappingDestinationVM.TreeItems;

cc2.UseDefaultConnectors =

 

false;

 

cc2.ZIndex = 1;

diagram.AddShape(cc2);

[Zarko]

Hello John,
If you want to set position to a RadDiagramContainerShape you should also set positions to its children otherwise they will be on 0, 0 and the container will stretch in order to wrap them (this is happens in posset.png).
I've attached a sample project with parts of your code so could you please examine it and see if it help you?
We're looking forward to hearing from you.

Regards,
Zarko
Telerik

[John]

Thanks Zarko.
Your example does work. However it looks as though I forgot to include something important...

You are adding shapes directly to the container. What i'm doing is setting the ItemsSource of the container to a collection of nodes from an instance of a class. The nodes are added and their positions appear as they should. However the Position of the container does not work. It remains at position 0,0 and therefore on top of the first container, but its size is set to something incorrect.

Is this a bug?


My latest code is shown below.
If you use this code instead of yours with the LoadChildren, you will see i am setting the position of all of the children.

 

 

ColumnMappingDestinationContainerViewModel columnMappingDestinationVM = new ColumnMappingDestinationContainerViewModel();

 

 

 

RadDiagramContainerShape cc2 = new RadDiagramContainerShape();

 

cc2.Name =

 

"DestinationContainer";

 

cc2.IsCollapsible =

 

true;

 

cc2.Padding =

 

new Thickness(5, 5, 5, 5);

 

cc2.Content =

 

"Maps To Columns";

 

cc2.Position =

 

new Point(300, 0);

 

//LoadChildren(cc2);

 

 

cc2.ItemsSource = columnMappingDestinationVM.Items;

 

cc2.UseDefaultConnectors =

 

false;

 

cc2.ZIndex = 1;

diagram.AddShape(cc2);

 

 

public class ColumnMappingDestinationContainerViewModel
{

 

 

 

    public ColumnMappingDestinationContainerViewModel()

 

    {

        Items =

 

new ObservableCollection<NodeViewModelBase>();

 

 

 

        for (int i = 1; i < 20; i++)

 

        {

 

 

            NodeViewModelBase fakeItem = new NodeViewModelBase();

 

            fakeItem.Position =

 

new Point(0, 30 * i);

 

            fakeItem.Content =

 

"DestinationColumn" + i.ToString();

 

            fakeItem.Visibility = System.Windows.

 

Visibility.Visible;

 

            Items.Add(fakeItem);

        }

    }

 

 

    public ObservableCollection<NodeViewModelBase> Items

 

    {

 

 

        get;

 

 

 

        set;

 

    }

}

[Zarko]

Hello John,
The problem in your code is that the position of your inner items is on 0, 30*i and that's why the container shape starts from 0,0 (so that it could wrap its inner shapes). If you change this line in your code:
 

fakeItem.Position = new Point(0, 30 * i);

to

fakeItem.Position = new Point(300, 30 * i);

The position of the container shape will be correct.
Also I'd like to point out that when you're using RadDiagramContainerShape with ItemsSource you won't be able to drag an item in or out of the container(that's why in my previous example I used the Items property). If you want to use ItemsSouce you'd better also use business objects for your containers:

public class MyContainer : NodeViewModelBase, IContainerItem
{
 ...
}

and
 

ColumnMappingDestinationContainerViewModel columnMappingDestinationVM = new ColumnMappingDestinationContainerViewModel();
var cc2 = new MyContainer();
cc2.IsCollapsible = true;
cc2.Padding = new Thickness(5, 5, 5, 5);
cc2.Content = "Maps To Columns";
cc2.Position = new Point(300, 0);
cc2.InnerItems = columnMappingDestinationVM.Items;
cc2.UseDefaultConnectors = false;
cc2.ZIndex = 1;

diagram.Items.Add(cc2);

I've attached an updated version of my previous project so could you please take a look at it and if you have more questions feel free to ask.

Regards,
Zarko
Telerik

[Sammy]

Hello,

I am facing quite the same problem. As you can see in the attached screenshot, for the second container item I do the following operations in order;

1. Change the position of the container object.
2. Change the positions of the shapes inside the container object.

But the result is as you see, the Position X of the container does not change but the shapes move as I like to.  Even if I do the operations in reverse order it is the same.
 
Any idea why this happens?

[Sammy]

By the way I use MVVM pattern...

[quote]Sammy said:Hello,

I am facing quite the same problem. As you can see in the attached screenshot, for the second container item I do the following operations in order;

1. Change the position of the container object.
2. Change the positions of the shapes inside the container object.

But the result is as you see, the Position X of the container does not change but the shapes move as I like to.  Even if I do the operations in reverse order it is the same.
 
Any idea why this happens?

[/quote]

[Zarko]

Hello Sammy,
Could you please send us a sample project or at lease some code snippets so that we could investigate the issue on our side ? Also I'd like to ask you for your specific dll version.
I've attached my test project so that you could examine it and tell us what you're doing differently.

Regards,
Zarko
Telerik

 

 

[Sammy]

Hello Zarko,

Thanks for the code, that helped me to fix the problem.

[Bouaicha]

Hi, How can i customize shapes as BPMN shapes can you give me help, thx Zarko for the app

[Pavel R. Pavlov]

Hi,

According to Wikipedia, Business Process Model Notation (BPMN) is a graphical representation for specifying business processes in a business process model. I can see the shapes of the example are looking very much like the shapes from our default ToolBox. In combination with our SettingsPane you can easily create the same diagram.

Could you please confirm if you can use the suggested tools to accomplish your scenario?

Regards,
Pavel R. Pavlov
Telerik

 

 

[Bouaicha]

Hi R. Pavel Pavlov , I am new to the telerik controls, it is difficult for me to modifiy diagramtoolbox to put the shapes that I want. can you give example in "ContainerShapes.zip"
I appreciate your help.

[Pavel R. Pavlov]

Hello Bouaicha,

I am not sure that I fully understand your requirements for customization. Could you please be more specific what you need to change and how exactly you need it to look like? This is the only way for me to understand exactly what you are up to and point you in the right direction.

As I mentioned the example diagram in Wikipedia can be easily created using our RadDiagram. Moreover, you can create it using our online SDK demos. Attached is a swift sample that looks almost like the example. All the details that are not created in this demonstration picture should be implemented with little more customizations. Such customization is creating a picture that looks like the message inside the start node and the clock inside the second node. By setting such pictures as content of the first two nodes the diagram will look even closer to the example.

To demonstrate how this diagram was created I captured the creation process. You can see the steps here. Please note that everything about the RadDiagarmItems can be customized. 

Regards,
Pavel R. Pavlov
Telerik