How to position RadDiagramContainerShape

14 posts, 0 answers
  1. John
    John avatar
    3 posts
    Member since:
    Jun 2012

    Posted 17 Jul 2013 Link to this post

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

    thanks,
    John
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 22 Jul 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. John
    John avatar
    3 posts
    Member since:
    Jun 2012

    Posted 23 Jul 2013 Link to this post

    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);


  5. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 26 Jul 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  6. John
    John avatar
    3 posts
    Member since:
    Jun 2012

    Posted 26 Jul 2013 Link to this post

    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;

     

        }

    }

  7. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 29 Jul 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  8. Sammy
    Sammy avatar
    15 posts
    Member since:
    Aug 2008

    Posted 05 Aug 2014 Link to this post

    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?

  9. Sammy
    Sammy avatar
    15 posts
    Member since:
    Aug 2008

    Posted 05 Aug 2014 in reply to Sammy Link to this post

    By the way I use MVVM pattern...

    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?

  10. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 08 Aug 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  11. Sammy
    Sammy avatar
    15 posts
    Member since:
    Aug 2008

    Posted 08 Aug 2014 in reply to Zarko Link to this post

    Hello Zarko,

    Thanks for the code, that helped me to fix the problem.
  12. Bouaicha
    Bouaicha avatar
    2 posts
    Member since:
    Jun 2012

    Posted 28 Apr 2015 in reply to Zarko Link to this post

    Hi, How can i customize shapes as BPMN shapes can you give me help, thx Zarko for the app
  13. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 29 Apr 2015 Link to this post

    Hi,

    According to WikipediaBusiness 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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  14. Bouaicha
    Bouaicha avatar
    2 posts
    Member since:
    Jun 2012

    Posted 29 Apr 2015 in reply to Pavel R. Pavlov Link to this post

    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.
  15. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 30 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
UI for WPF is Visual Studio 2017 Ready