Diagram container shape padding/margin ?

8 posts, 0 answers
  1. nicolas
    nicolas avatar
    20 posts
    Member since:
    Mar 2017

    Posted 14 Aug Link to this post

    Hi,

    I try tu re-use TableShape example and specificaly styles and i have a problem when iadd a Row into Table. each element shift on the left (see capture 1) If i force width, the problem is the same.
    The row is not stretch to te container and create a resizing of the container. (i have 10px on the left and the right side, see the capture 2). How to remove this padding or margin ?

    The last problem is when i add or delete a row, the event OnItemsCollectionChanged in TableShape class is not trigged, maybe i missed a binding ?

    Can you help me please.
    Thanks a lot,
    Nicolas

  2. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1408 posts

    Posted 17 Aug Link to this post

    Hello Nicolas,

    I am not sure how you add the row shapes, but my guess the observed behavior in capture1.png is caused by the auto-resizing mechanism of RadDiagramContainerShape. Basically, the container is trying to always provide some margin between its borders and its children shapes. This is why if you position a shape withing this minimum distance (the margin), the container will be automatically resized. 

    To avoid this behavior I would suggest you couple of approaches.
    • The first one is to make sure that the shape is added outside of the minimum distance. So for example if the X position of the table shape (the container shape) is at the 20th pixel,  the child's X should be at least on the 30-40th pixel.
    • The other approach is to override  the CalculateContentBounds method in the TableShape class and return the original bounds. This way you'll avoid the auto-resizing mechanism. You can find some information about this in the following forum.
      protected override System.Windows.Rect CalculateContentBounds(System.Windows.Rect newShapeBounds)
      {
          return this.ContentBounds;
      }

    About the OnItemsCollectionChanged, I checked this with the TableShape demo, but the method is called properly when you delete or add a row. I tested this using the Delete key and also the '+' and '-' buttons which are displayed when you click on the table shape's header.

    Regards,
    Martin Ivanov
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  3. nicolas
    nicolas avatar
    20 posts
    Member since:
    Mar 2017

    Posted 17 Aug in reply to Martin Ivanov Link to this post

    Thanks for your answer.

    I found why event wasn't trigging. I was 2 problems, first in the style "tableStyle" i used as targetType "RadDiagramContainerShape" instead of "TableShape". The second one is i didn't extend RadDiagram just like SqlDiagram example to override GetShapeContainerForItemOverride and GetShapeContainerForItemOverride.

    But i still the same problem with rowShape whose shifting on left event i override CalculateContentBounds.

    if you can help me to find a solution please ? i can send you the code to understand the problem

    Thanks a lot !

    Nicolas
  4. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1408 posts

    Posted 22 Aug Link to this post

    Hello Nicolas,

    I am not sure why this happens. If you can share runnable code reproducing the described behavior I will check what is going on.

    Regards,
    Martin Ivanov
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  5. nicolas
    nicolas avatar
    20 posts
    Member since:
    Mar 2017

    Posted 22 Aug in reply to Martin Ivanov Link to this post

    Hello Martin,

    Thanks for your answer, you can find example on my github account : https://github.com/Silocan/TelerikDiagramDemo

    Thanks for your help,

    Nicolas

  6. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1408 posts

    Posted 24 Aug Link to this post

    Hello Nicolas,

    I wasn't able to reproduce the size expanding behavior when commented the CalculateContentBounds override. However, I hit another issue - the size of the container doesn't update when you add new rows. In order resolve this you will need to manually set the Height property of the container when you add new rows. 

    I updated your project to demonstrate a possible approach that you could use. Basically, I update the Height of the TableShape when a new row is added. The same way is updated when a row is removed. I also bound the Width and Height properties of the Row and Table shapes to the Width and Height of their models so that I can use them in the calculations.

    I hope this helps.

    Regards,
    Martin Ivanov
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  7. nicolas
    nicolas avatar
    20 posts
    Member since:
    Mar 2017

    Posted 28 Aug Link to this post

    thanks very much for your help,

    i still have a margin on the right of row. i working to resolve this. i'll post the final code once this problem solved
  8. nicolas
    nicolas avatar
    20 posts
    Member since:
    Mar 2017

    Posted 28 Aug in reply to nicolas Link to this post

    i changed RowShape width to 250 (same width than TableShape)

    thanks !

Back to Top