Questions about connectors (top-aligned, labels, binding)

[MC]

Hi,

I'm trying to make the RadDiagram behave as shown here: Mock up screenshot

Here's how far I got on my own: Actual screenshot

I need:
1. The connectors to be aligned to the top left/right, and not scaled
2. Labels for the connectors (not connection) to be inside the shape
3. To generate the connectors during run time (eg, via DataBinding)

1. The connectors to be aligned to the top left/right, and not scaled
By following the custom connector guide, I am able to generate custom connectors.
However, since connectors are placed using offsets, my connectors are stretched/shrinked as the shape resizes
How can I overcome this?

2. Labels for the connectors (not connection) to be inside the shape
I am doing this by overridding the RadDiagramConnector's ControlTemplate.
I'm using a value converter to determine the order the connector ellipse/label, and am currently stuck trying to make sure the label is within the shape.
Is there an easier way to do this?
 
3. To generate the connectors during run time (eg, via DataBinding)
I tried extending the RadDiagramShapeBase class, and provided my own DependencyProperty.
But I noticed that once the shape is loaded, any changes to the RadDiagramShapeBase.Connectors collection no longer updates the visual.
Right now, I'm working around this by passing in the data context via the constructor.
How can I do this via data binding?

public static readonly DependencyProperty ConnectorsSourceProperty =
    DependencyProperty.Register("ConnectorsSource",
    typeof(IList<Argument>),
    typeof(ActivityShape),
    new PropertyMetadata((sender, e) => ((ActivityShape)sender).BuildConnectors((IList<Argument>) e.NewValue)));

public IList<Argument> ConnectorsSource
{
    get { return (IList<Argument>)GetValue(ConnectorsSourceProperty); }
    set { SetValue(ConnectorsSourceProperty, value); }
}

private void BuildConnectors(IList<Argument> arguments)
{
    var inputs = arguments.Where(a => a.Direction == Direction.In).ToArray();
    var outputs = arguments.Where(a => a.Direction == Direction.Out).ToArray();

    var inputDelta = 1.0 / (inputs.Length + 1);
    var outputDelta = 1.0 / (outputs.Length + 1);

    Connectors.Clear();

    for (int i = 0; i < inputs.Length; i++)
    {
        var argument = inputs[i];
        Connectors.Add(new RadDiagramConnector
            {
                Name = argument.Name,
                Offset = new Point(0, inputDelta*(i + 1))
            });
    }

    for (int i = 0; i < outputs.Length; i++)
    {
        var argument = outputs[i];
        Connectors.Add(new RadDiagramConnector
            {
                Name = argument.Name,
                Offset = new Point(1, outputDelta*(i + 1))
            });
    }
}

Please help.

Thanks!
Josh

[Miro Miroslavov]

Hi MC,
Let me go through your questions. 

1.  The connector offset is always considered relative point. So aligning to the top or left is Ok by specifying Offset = (0, 1) or (0.1, 1) in your case. But the other connector that is somewhere under the top, well, you should calculate the Offset manually based on your shape's Size if you want it to be absolute positioned. However I wouldn't do that, I would still prefer to be relative, otherwise if the shape gets smaller, the connector may appear out of it.
2. This is not really supported by the connectors right now. One possible solution is to put the connectors' labels inside the Shape's Content. Check out the code below. You can also position the labels manually using a Canvas inside the Shape and using the Connector.AbsolutePosition, which will returns you the absolute position of the Connector. 
3. I tried to add a new custom connector to the Connectors collection of a Shape on button click and the new connector appeared. So you can modify the collection on the fly. I guess in your case the property changed of your ConnectorsSource is happening too early and after that we're ensuring our DefaultConnectors. Have you set UseDefaultConnectors = true? Also can you try to execute your code in the Loaded event. I think it should work. Also keep in mind that ConnectorsSource property is also in our backlog and we should implement it soon.

<telerik:RadDiagramShape x:Name="shape1" Width="150" Height="100" HorizontalContentAlignment="Stretch"
                    VerticalContentAlignment="Stretch">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height=".15*" />
                        <RowDefinition Height=".15*" />
                        <RowDefinition Height=".7*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="Input" VerticalAlignment="Bottom" />
                    <TextBlock Text="Output" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
                    <TextBlock Text="Output" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Right"
                            VerticalAlignment="Bottom" />
                </Grid>
            </telerik:RadDiagramShape>

Hope this helps. Please let us know if you have further questions. 

Greetings,
Miro Miroslavov
the Telerik team

[MC]

Hi Miro, thanks for the reply.

1 and 2:
I'll give the Connector.AbsolutePosition property a try.
However, I would still like to place the connectors arbitrarily.
For my case, I have several scenarios where I need to add connectors during runtime, and have them flow from the top to the bottom (ie, StackPanel).

I thought I could hack it to work by providing a custom ItemTemplate for the ConnectorsControl.
This gives me some control over the visual placements of the connectors (see attached screenshot).
However, it does not affect the source/target ends of the connections.

Is there any way for me to override the calculation of the connector's absolute position, other than implementing my own IConnector?
If not, any chance of making this customizable in the future (ie, virtual method? strategy or visitor?)

3:
I discarded my sample project and started anew, and got it to work.
I think I figured out my problem.

With my previous project, I was using the DiagramDragInfo to drag shapes onto the diagram.
I was creating the RadDiagramShape and setting its DataContext in the DragDropManager.AddDragInitializeHandler().
But I did not realize that when the shape gets deserialized later, the data context was not set back.
Which is why it only worked if the connectors were already built before the serialization.

I've made some changes, and it's now working fine.

[Miro Miroslavov]

Hello MC,

 Unfortunately right now the RadDiagramConnector is not easily customizable. That is why I created work item for you and we'll try to implement it as soon as possible. You can vote it up to make it stand out. Till we implement it, possible solution for you is to implement your own IConnector class, even though this is not really easy is a lot of work. 
Let us know if you need more help.

Kind regards,
Miro Miroslavov
the Telerik team

[Sungwoo]

Hi,

Do you have any update on this ?  I also am looking for a way to put a label on a connector and isn't brave enough to reinvent IConnector. 

Regards,

Sungwoo

[Petar Mladenov]

Hi Sungwoo,

Currently there is no progress on this feature request. You need to edit the default ControlTemplate of RadDiagramConnector in order to put a label next to the connector point (ellipse).
If you need something different, you can open a new support thread with more details about the requirement and we will try to advice you with some possible approach.

Regards,
Petar Mladenov
Telerik