Custom RadDiagramShape with connectors

10 posts, 1 answers
  1. Amiel
    Amiel avatar
    12 posts
    Member since:
    Jul 2016

    Posted 26 Sep Link to this post

    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,

  2. Answer
    Dinko
    Admin
    Dinko avatar
    412 posts

    Posted 29 Sep Link to this post

    Hello 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
    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. Amiel
    Amiel avatar
    12 posts
    Member since:
    Jul 2016

    Posted 29 Sep in reply to Dinko Link to this post

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

     

     

  4. Dinko
    Admin
    Dinko avatar
    412 posts

    Posted 02 Oct Link to this post

    Hi 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
    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. Amiel
    Amiel avatar
    12 posts
    Member since:
    Jul 2016

    Posted 02 Oct in reply to Dinko Link to this post

    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!

  6. Amiel
    Amiel avatar
    12 posts
    Member since:
    Jul 2016

    Posted 02 Oct in reply to Amiel Link to this post

    with the custom connectors.
  7. Dinko
    Admin
    Dinko avatar
    412 posts

    Posted 05 Oct Link to this post

    Hello 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
    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.
  8. Dinko
    Admin
    Dinko avatar
    412 posts

    Posted 09 Oct Link to this post

    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
    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.
  9. Amiel
    Amiel avatar
    12 posts
    Member since:
    Jul 2016

    Posted 09 Oct in reply to Dinko Link to this post

    Hello Dinko,

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

    Thanks!

    Amiel

  10. Dinko
    Admin
    Dinko avatar
    412 posts

    Posted 5 days and 23 hours ago Link to this post

    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
    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.
Back to Top