Two containerNode questions

7 posts, 0 answers
  1. rui
    rui avatar
    33 posts
    Member since:
    May 2014

    Posted 29 Oct 2015 Link to this post

    I use group to show group data,  the group and item both can connec to other control , the design picture is as attach files "split.png"

    there are two question

    1. I set the template as follows

     <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerik:RadDiagramContainerShape">
                            <Border x:Name="ContainerBorder"
                                    Width="30"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    CornerRadius="15" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style> 

    and set the item circle position as follows

     public override bool AddItem(object item)
            {
                var viewModel = item as TransformationNode;
                if (viewModel != null)
                {
                    viewModel.Position = new Point(this.Position.X, this.InternalItems.Count * splitTransformationHeight);
                    return base.AddItem(item);
                }

                return false;
            }

    but the group show as attach files "SplitDiagramGroup.png"   the height is too big,what is the reason

    2. I wish the  item circle can not drag alone, when drag the item circle,  the whole  group move too ,   how to realize?

     

    than you 

  2. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 02 Nov 2015 Link to this post

    Hello rui,

    Without your implementation I cannot be sure why the container is bigger then expected. However, I guess this is caused by the fact that the RadDiagramContainerShape's bounds are updated automatically so there is a padding between its content and borders. If this is the case, you can create a custom container shape that derives from RadDiagramContainerShape and override its CalculateContentBounds() method. Then return the current content bounds instead of calculating the new ones. Here is an exmple:
    public class FixedContainer : RadDiagramContainerShape
    {
        protected override System.Windows.Rect CalculateContentBounds(System.Windows.Rect newShapeBounds)
        {
            return this.ContentBounds;
        }  
    }
    However, keep in mind this is custom code that might not work as expected in all possible cases. If this doesn't help you can also try to set MinHeight of the container shape to 0. 

    As for dragging the container when you click on a child shape, the easier approach which you can use is to set the IsHitTestVisible property of the shapes to False. Keep in mint this will prevent any mouse interaction with the child shapes and also the selection won't be available.

    Another possible approach for achieving the desired visualization is to use a custom shape with ellipse paths inside of it instead of container shape.

    Regards,
    Martin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
  4. rui
    rui avatar
    33 posts
    Member since:
    May 2014

    Posted 16 Nov 2015 in reply to Martin Link to this post

    Thank you very much  

    the first question is resolved by calculate the shape height when add item

    the second question, I need the childNode connect to other node ,so the both methods can not resolve,I use a transigent solution: calculate the groupNode position when drag the childNode

     

    there is another question:

    I set the group shape and the child node width both 30px, and set the margin and padding property 0px

    when add the childNode into the groupNode, the group shape width change to 50px ,

     and the connection line can not reach to the group node,there is a distance,

    the snoop picture is as attach files

    what is the reason for this ? thank you !

     

  5. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 18 Nov 2015 Link to this post

    Hello Rui,

    Thank you for the attachments. 

    The described behavior is observed because the RadDiagramContainerShape elements are recalculating their bounds automatically when you add a child shape inside them. Basically, there is always a minimum margin between the borders of the container and the child shapes. You can see this behavior in the First Look demo of RadDiagram for example. You can drag and drop a shape from the toolbox to the edge of an a container's border and see how the container's size will be expanded.

    To avoid this behavior you can create a custom container shape that derives from RadDiagramContainerShape and override its CalculateContentBounds() method - as described in my previous reply.

    I hope this information is useful.

    Regards,
    Martin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. rui
    rui avatar
    33 posts
    Member since:
    May 2014

    Posted 20 Nov 2015 in reply to Martin Link to this post

    Hi Martin

    thank you very much, I resolve the problem  by override  CalculateShapeBounds method

            protected override Rect CalculateShapeBounds(Rect contentBounds)
            {
                var temp = base.CalculateShapeBounds(contentBounds);
                return new Rect(this.ContentBounds.X, temp.Y, 30, temp.Height);
            }

    your reply is very useful thank you 

     

    there is another question:

    when set the shape's UseGlidingConnector property false  the connection line end is  drag around  by the four point(left right up down)

    when set it true   the connection line end drag around by a rectangle 

    if there any way  let the end drag around by a circle?

    thank you!

     

  7. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 24 Nov 2015 Link to this post

    Hi Rui,

    Yes, you can achieve your requirement by setting the shape's GlidingStyle property. In your case you can set it to Ellipse.
    <telerik:RadDiagramShape UseGlidingConnector="True" GlidingStyle="Ellipse" />

    Regards,
    Martin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. rui
    rui avatar
    33 posts
    Member since:
    May 2014

    Posted 24 Nov 2015 in reply to Martin Link to this post

    Hi Martin

    It resolved the problem 

    Thank you very much!

Back to Top
UI for WPF is Visual Studio 2017 Ready