How to set the position of connection points in nested containers, when they are collapsed

[Sprotty]

I need to create a container something like image target.png.

I've been looking at building this using nested containers (see 1.png)

The first issue I have is when you collapse the inner container, you still get a small body area (see 2.png), how do I get rid of this?

The other thing to note here is that collapsing the inner container also moves the connection point to the bottom of the header - which seems like a sensible place for it to move to.

The main issue occurs if you collapse the outer container (see 3.png)

Now the connection point from the inner container moves to the center of the header block. How do I make it behave like it did when only one level is collapsed (i.e. move to the bottom right of the header block?

 

 

[Dinko | Tech Support Engineer]

Hello Sprotty,

Thank you for the attached images which demonstrate the desired behavior. 

I am currently checking your scenario and need little more time for that. I will contact you later today with my observations.

Regards,
Dinko
Progress Telerik

[Dinko | Tech Support Engineer]

Hello Sprotty,

Thank you for the patience.

Let me get straight to your questions.

To remove the collapse area you could set the CollapsedContent property of the RadDiagramContainerShape to empty string for example. To remove the area at all and leave only the content of the container shape you can set the CollapsedContentTemplate property to empty DataTemplate.

<telerik:RadDiagramContainerShape.CollapsedContentTemplate>
    <DataTemplate/>
</telerik:RadDiagramContainerShape.CollapsedContentTemplate>

Regarding your second question, I think I will need a little more information about your case. I have tested this and when the container is collapsed the connection is not set to the inner connector. Looking at the picture it seems that you are using custom connectors? Have you set the UseDefaultConnectors property of the RadDiagramContainerShape to false? Attached to this reply you can find the project which I used to test your scenario. Is it possible to check it and let me know what I need to change to mimics your implementation?

Regards,
Dinko
Progress Telerik

[Sprotty]

Hi Dinko

Setting the CollapsedContentTemplate works perfectly.

The sample you provided works as well, but I need to modify the number and position of the connection points.
Its this code that seems to be causing the problem. Attached is a project that attempts to do this, I think more logic is required in my implementation of RadDiagramConnector, but it never gets called when the outer container is collapsed.

To replicate the issue

• drag a connector between the orange shape and the only connection point on the inner container.
• Collapse the inner container (still all good)
• Collapse the outer container (connection point start location is now wrong)

I can't attach .zip or .cs files so I've put them inline.

 

 

 

 

 

using System.Diagnostics;
using System.Windows;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.Diagrams;
using Telerik.Windows.Diagrams.Core;
namespace WpfApp2
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public const int ContainerHeaderHeight = 30;
        public MainWindow()
        {
            InitializeComponent();
            // we only want 1 connection point on each container (in the middle left of the header area)
            // my implementation of RadDiagramConnector puts the connector in the correct place until the outer container is collapsed.
            // CalculateRelativePosition does not appear to be called when the outer container is collaspsed.
            var connector = new MyRadDiagramConnector() { Name = "CustomConnector2" };
            cCont.Connectors.Clear();
            cCont.Connectors.Add(connector);
        }
    }
    public class MyRadDiagramConnector : RadDiagramConnector
    {
        public override Point CalculateRelativePosition(Size shapeSize)
        {
            var pt = new Point(shapeSize.Width, MainWindow.ContainerHeaderHeight / 2);
            // Attempting to gather information from the parent objects, but this method
            // does not appear to be called when the outer container is collapsed
            Debug.WriteLine($"CalculateRelativePosition({shapeSize}) = {pt}");
            IDiagramItem di = this.Shape;
            while (di != null)
            {
                if (di is ICollapsible collapsible)
                    Debug.Write($"{di.Name}.IsCollapsed = {collapsible.IsCollapsed} ");
                Debug.WriteLine($"{di.Name}.Visiblity = {di.Visibility}");
                di = di.ParentContainer;
            }
            return pt;
        }
    }
    public class CustomShape : RadDiagramContainerShape
    {
        static CustomShape()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomShape), new FrameworkPropertyMetadata(typeof(CustomShape)));
        }
        public CustomShape()
        {
            // hides content area when collapsed
            CollapsedContentTemplate = new DataTemplate();
        }
        protected override void UpdateVisualStates()
        {
            // ensures connection points are always visible
            base.UpdateVisualStates();
            VisualStateManager.GoToState(this, "ConnectorsAdornerVisible", false);
        }
    }
}

 

 

 

 

 

 

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp2"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="WpfApp2.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <telerik:RadDiagram x:Name="xDiagram">
           
            <!-- Outer container-->
            <telerik:RadDiagramContainerShape x:Name="cShape"
                                              Position="100,50"
                                              Content="Container"
                                              IsCollapsible="True">
                <!-- Ensures no content when collapsed -->
                <telerik:RadDiagramContainerShape.CollapsedContentTemplate>
                    <DataTemplate/>
                </telerik:RadDiagramContainerShape.CollapsedContentTemplate>
               
                <!-- inner container -->
                <local:CustomShape
                    x:Name="cCont" Content="Container" ContentBounds="70,116,18,5" IsCollapsible="True" CollapsedContent="dfgdfg"
                    IsDropEnabled="False" IsManipulationAdornerVisible="False" IsResizingEnabled="False" Height="25"/>
            </telerik:RadDiagramContainerShape>
            <!-- shape to test connections -->
            <telerik:RadDiagramShape>
            </telerik:RadDiagramShape>
        </telerik:RadDiagram>
    </Grid>
</Window>

[Dinko | Tech Support Engineer]

Hi Sprotty,

Thank you for the provided additional details.

This behavior could be achieved using custom code. Basically, you can subscribe to the IsCollapsedChanged event of the RadDiagramContainerShape. In the event handler, you can create your custom code which gets all the current connection when the container is collapsed and manually change the TargetConnectorPosition and Target properties of the connection. Then when the container is expanded you can change again these properties to point to the container inside. 

I have created a sample project to demonstrate this. Keep in mind that this custom code in the project only covers the case when you have one container inside and one connection. You will have to extend this code to maintained more shapes and connections. I think is a good starting point for implementing your final behavior.

Regards,
Dinko
Progress Telerik