Custom RadDiagramShape with connectors

[Amiel]

Hello,

Can you point me to an example of a custom RadDiagramShape with connectors.  I've seen this example but I don't see the connectors.

http://docs.telerik.com/devtools/wpf/controls/raddiagram/howto/create-custom-shape

 

Thanks,

[Dinko | Tech Support Engineer]

Amiel,

Thank you for contacting us.

To show the connectors of a custom shape you need to add in the template ConnectorsControl which must be on top of the template. Then you can add a VisualState which will change the visibility of the connectors when the shape is selected. 

I have created sample project based on the example in the mentioned article. In the custom template, I have just added the ConnectorsControl and the VisualState.

<primitives:ConnectorsControl x:Name="ConnectorsControl" ItemsSource="{TemplateBinding Connectors}" Visibility="Collapsed" ItemContainerStyle="{TemplateBinding ConnectorStyle}"/>

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="ConnectorsAdornerVisibilityStates">
        <VisualState x:Name="ConnectorsAdornerCollapsed"/>
        <VisualState x:Name="ConnectorsAdornerVisible">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ConnectorsControl" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Give the attached project a try and let me know if it helps you.

Regards,
Dinko
Progress Telerik

[Amiel]

Thanks that's good, how would you add custom connectors here?

 

 

[Dinko | Tech Support Engineer]

Amiel,

To add custom connectors you can disable the default ones by setting the UseDefaultConnectors property to false. Then you can custom connectors by using the Connectors collection of the custom shape.

<local:CustomShape UseDefaultConnectors="False" x:Name="customShape"/>

public MainWindow()
{
    InitializeComponent();
    var connector1 = new RadDiagramConnector() { Offset = new Point(0,0.5),Name= "connector1" };
    var connector2 = new RadDiagramConnector() { Offset = new Point(1,0.5),Name= "connector2" };
    var connector3 = new RadDiagramConnector() { Offset = new Point(0.5,0),Name= "connector3" };
    var connector4 = new RadDiagramConnector() { Offset = new Point(0.5,1) , Name= "connector4" };
    this.customShape.Connectors.Add(connector1);
    this.customShape.Connectors.Add(connector2);
    this.customShape.Connectors.Add(connector3);
    this.customShape.Connectors.Add(connector4);
}

Check the modified version of the project attached to this reply.

Regards,
Dinko
Progress Telerik

[Amiel]

Thanks looking closer to what I need.  How can I add this shape to the tool box and be able to drag this to a diagram? I believe it has something to do with the serialize deserialize functions can you share an example of how you'd preserve this custom shape after the drag and drop?

Thanks!

[Amiel]

with the custom connectors.

[Dinko | Tech Support Engineer]

Amiel,

What I can suggest you is to check this section in the DiagramToolbox help article which describes how you can populate a RadDiagramToolbox instance with a custom collection of business items.

Give this article a try and let me know if it works for you.

Regards,
Dinko
Progress Telerik

[Dinko | Tech Support Engineer]

Hi Amiel,

I have further investigated this on my side and indeed there seems to be an issue with the serialization of the connectors. Basically, when you have declared custom connectors in XAML the connectors is not properly serialized. Therefore I have logged feedback item in our Feedback Portal where you can track its progress.

As a workaround, you can create a custom class which derives from RadDiagramConnector and override the Serialize() method. Check the following code snippet.

public class CustomConnector : RadDiagramConnector
    {
        static CustomConnector()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomConnector), new FrameworkPropertyMetadata(typeof(CustomConnector)));
        }

        public override SerializationInfo Serialize()
        {
            var info = new Telerik.Windows.Diagrams.Core.SerializationInfo(this.GetType());

            if (this.Name != null) info[Telerik.Windows.Diagrams.Core.SerializationConstants.ConnectorName] = this.Name;

            info[Telerik.Windows.Diagrams.Core.SerializationConstants.Offset] = this.Offset.ToInvariant();

            if (Telerik.Windows.Controls.DependencyObjectExtensions.IsLocalValueSet(this, RadDiagramConnector.WidthProperty)) info[Telerik.Windows.Diagrams.Core.SerializationConstants.Width] = this.Width.ToInvariant();
            if (Telerik.Windows.Controls.DependencyObjectExtensions.IsLocalValueSet(this, RadDiagramConnector.HeightProperty)) info[Telerik.Windows.Diagrams.Core.SerializationConstants.Height] = this.Height.ToInvariant();
            this.SerializePrimitives(info);

            return info;
        }
    }
}

Regards,
Dinko
Progress Telerik

[Amiel]

Hello Dinko,

This was a painful one... Thank you for this work around it does work! 

Thanks!

Amiel

[Dinko | Tech Support Engineer]

Hello Amiel,

I am happy to hear that this workaround works for you. I have updated your Telerik points in appreciation of the involvement in reproducing this behavior.

Regards,
Dinko
Progress Telerik

[Amiel]

How can I preserve the tooltip if I specify it in a style... it always shows "Connect"

I never see the word "great".

<controls:CustomConnector Background="LightBlue" BorderBrush="Blue" Offset="0.850,0.01" x:Name="n7"   ToolTip="great"/>

 

Seems like it is not one of the constants serialized.   How can I keep the tooltip???  I've 

if (Telerik.Windows.Controls.DependencyObjectExtensions.IsLocalValueSet(this, RadDiagramConnector.ToolTipProperty))

                info[Telerik.Windows.Diagrams.Core.SerializationConstants.??????????] = this.ToolTip;

 

I even hardcoded in the deserialize a tooltip and it still didn't show up and showed "Connect"...  

 

 

[Dinko | Tech Support Engineer]

Hi Amiel,

To set custom tooltip of a custom connector you need to extract and edit the default template of the connector. There is an Editing Control Templates help article which describes how you can get the default template of the controls. In the extracted template you can remove the ToolTip.

. . . . . . . .
<Grid >

    <Ellipse x:Name="DisplayElement" Fill="{TemplateBinding Background}" StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}"/>

    <Ellipse x:Name="OverElement" Visibility="Collapsed" Fill="{TemplateBinding Background}" StrokeThickness="{TemplateBinding BorderThickness}"/>

    <!--<ToolTipService.ToolTip>

        <ToolTip Content="{telerik:LocalizableResource Key=Diagram_Connector}"/>

    </ToolTipService.ToolTip>-->

</Grid>
. . . . . . .

The next step is in the Serialize() method, you can serialize the ToolTip.

public override Telerik.Windows.Diagrams.Core.SerializationInfo Serialize()
{
    var info = new Telerik.Windows.Diagrams.Core.SerializationInfo(this.GetType());
    info["ToolTip"] = this.ToolTip;
}

Then you can override the Deserialize() method and set the ToolTip property of the connector.

public override void Deserialize(SerializationInfo info)
{
    this.ToolTip = info["ToolTip"];
    base.Deserialize(info);
}

Regards,
Dinko
Progress Telerik