Port Visibility

8 posts, 0 answers
  1. Federico
    Federico avatar
    3 posts
    Member since:
    Jan 2017

    Posted 03 Jan Link to this post

    Hi,

    We have a few classes that inherits from our CustomShape class that inherits from RadDiagramShape, we also have a CustomConnector (inherits from RadDiagramConnector) class and we would like to have our ports always visible, we did try to edit the default template of RadDiagramShape and change the visibility to visible but it is not working.

    Would you be able to tell us to change the visibility of the ports to make them visible even when the shape is not clicked?

    Thanks!

  2. Shawn
    Shawn avatar
    48 posts
    Member since:
    Jul 2012

    Posted 03 Jan in reply to Federico Link to this post

    The easiest way is to override the UpdateVisualStates() in your CustomShape.cs file with the following code:

    protected override void UpdateVisualStates()
    {
        base.UpdateVisualStates();
        var isConnectorsAdornerVisibleResult = this.Diagram != null;
        VisualStateManager.GoToState(this, isConnectorsAdornerVisibleResult ? "ConnectorsAdornerVisible" : "ConnectorsAdornerCollapsed", false);
    }

     

    The other approach is to create your own style template for your shapes and set the ConnectorsControl Visibility to Visible.

    Hope this helps,

    Shawn

     

  3. Fede
    Fede avatar
    4 posts
    Member since:
    Jul 2016

    Posted 05 Jan Link to this post

    Hi Shawn,

    Thanks for your quick reply, It worked fine!!!

    We have another issue with the diagram, bezier connections are not working well. I will try to explain what we tried,

    - As you know we have the following classes : CustomDiagram , CustomConnector, CustomConnection and CustomShape.

    - The problem that we are facing is related to CustomConnector because the bezier does not know where they start or end (that's what we guess), we tried to implement the solutions available in the documentation (ConnectionPoints, IsModified...) but it is not working.

    - We also try to use the SetBezierHandles without success.

    Our implementation of the ports

    private void AddOutputConnector()
         {
             var outConnector = new CustomConnector() { Offset = new Point(1, 0.5), Direction = ConnectorDirection.Out };
             outConnector.Margin = new Thickness(-10, 0, 0, 0);
             outConnector.Name = "out";
             Connectors.Add(outConnector);
     
         }
     
         private void AddInputConnector()
         {
             var inConnector = new CustomConnector() { Offset = new Point(0, 0.5), Direction = ConnectorDirection.In };
             inConnector.Margin = new Thickness(0, 0, -10, 0);
             inConnector.Name = "in";
             Connectors.Add(inConnector);
         }

     

    public CustomConnection()
           {
               IsEnabled = false;
               LinearGradientBrush gradientBrush = new LinearGradientBrush(Color.FromRgb(0, 115, 255), Color.FromRgb(0, 197, 255), new Point(0, 0), new Point(1, 1));
               Stroke = gradientBrush;
               StrokeThickness = 6.0;
               ConnectionType = ConnectionType.Bezier;
               BezierTension = 0.8;
               IsManipulationAdornerVisible = false;
               InitMap();
           }

    We also try to use a style for the connections, stroke color  and thickness are working, however we have issues with how the diagram handles the bezier.

    Here you can find and attached example of the problem we have.

    Would you be able to help us?

    Thanks!

     

  4. Shawn
    Shawn avatar
    48 posts
    Member since:
    Jul 2012

    Posted 05 Jan in reply to Fede Link to this post

    Without seeing the source code of your example, it's difficult to pinpoint the exact problem but somethings you can try:

    • Make sure that IsConnectorsManipulationEnabled is set to True on your RadDiagram .
    • Since you are overriding the Connection style, you have to make sure the Path named "GeometryPath" otherwise the connection will not set any points properly
    • The SourceConnectorPosition and TargetConnectorPositions of your connection have to be set to match the name of your connectors. By default, they are set to "Auto".
    • On your Connection, set Route = false;

    Give these a try and hopefully one will help.

    Shawn

  5. Shawn
    Shawn avatar
    48 posts
    Member since:
    Jul 2012

    Posted 05 Jan in reply to Fede Link to this post

    Hi Fede,

    Without seeing your source code, it's difficult to pinpoint the exact cause but here are a few things you can check:

    • Make sure your Connection has Route set to False
    • Make sure your Diagram object has IsConnectorsManipulationEnabled set to True
    • Make sure your SourceConnectorPosition and TargetConnectorPositions are set to the Connector name and not Auto.
    • Since you are overriding the Style for your connector, make sure the Path has the name set to "GeometryPath" otherwise the logic can't set any points for the path to follow.

    Hope this helps,

    Shawn

                     

  6. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2991 posts

    Posted 06 Jan Link to this post

    Hi Fede,

    Can you post your CustomConnection code, the code which creates new connections and the part when you attach them to shapes and add them in RadDiagram ? Also, is it possible to test your scenario with the latest telerik binaries from R3 2016 ? 

    Regards,
    Petar Mladenov
    Telerik by Progress
    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.
  7. Fede
    Fede avatar
    4 posts
    Member since:
    Jul 2016

    Posted 10 Jan in reply to Petar Mladenov Link to this post

    Hi Petar,

    Here is the code of our custom connection and customconnector

    public class CustomConnector : RadDiagramConnector
      {
          private ConnectorDirection direction;
          private IConnection connection = null;
     
     
          //Empty Constructor
          public CustomConnector()
          {
              Background = Brushes.White;
              Height = 15;
              Width = 15;
          }
     
          public ConnectorDirection Direction
          {
              get { return direction; }
              set { direction = value; }
          }
     
          public IConnection Connection
          {
              get { return connection; }
              set { connection = value; }
          }
     
          protected override void OnMouseDown(MouseButtonEventArgs e)
          {
             
          }
     
          protected override void OnMouseEnter(MouseEventArgs e)
          {
              base.OnMouseEnter(e);
          }

     

        class CustomConnection : RadDiagramConnection
        {
            #region Properties Definitions
            CustomDiagram diagram = ((((MainWindow)Application.Current.MainWindow).mainGrid
                    .Children[((MainWindow)Application.Current.MainWindow).mainGrid.Children.Count - 1]) as NodeEditor).diagram;
            private static MultiValueDictionary<System.Type, System.Type> connectionMapping = new MultiValueDictionary<System.Type, System.Type>();
            private bool isReverse = false;
     
            public bool IsReverse
            {
                get { return isReverse; }
                set { isReverse = value; }
            }
            #endregion
     
            #region Constructors
            public CustomConnection()
            {
                IsEnabled = false;
                LinearGradientBrush gradientBrush = new LinearGradientBrush(Color.FromRgb(0, 115, 255), Color.FromRgb(0, 197, 255), new Point(0, 0), new Point(1, 1));
                Stroke = gradientBrush;
                StrokeThickness = 6.0;
                ConnectionType = ConnectionType.Bezier;
                BezierTension = 0.8;
                IsManipulationAdornerVisible = false;
                InitMap();
            }
            #endregion
     
            #region Compatibility
             
            private static void InitMap()
            {
                connectionMapping.Clear();
                connectionMapping.Add(typeof(Product), typeof(StationConveyor));
                connectionMapping.Add(typeof(StationConveyor), typeof(EndEffector));
                connectionMapping.Add(typeof(EndEffector), typeof(Robot));
                connectionMapping.Add(typeof(Robot), typeof(PalletStation));
                connectionMapping.Add(typeof(PalletStation), typeof(Pallet));
            }
     
             
            public static void ConnectionManipulationCompleted(object sender, ManipulationRoutedEventArgs e)
            {
                var diagram = ((((MainWindow)Application.Current.MainWindow).mainGrid
                   .Children[((MainWindow)Application.Current.MainWindow).mainGrid.Children.Count - 1]) as NodeEditor).diagram;
     
                if (e.ManipulationStatus == ManipulationStatus.Attaching)
                {
     
                    CheckCompatibility(e.Connector as CustomConnector, e.Connection as CustomConnection, e);
                }
                else if (e.ManipulationStatus == ManipulationStatus.Detaching)
                {
                    Console.WriteLine("Detaching");
                }
                else if (e.ManipulationStatus == ManipulationStatus.Moving)
                {
     
                    Console.WriteLine(e.Shape.Position);
                }
                else if (e.ManipulationStatus == ManipulationStatus.Moved)
                {
                    Console.WriteLine("Moved");
                    e.Handled = true;
                    return;
                }
                else
                {
                    Console.WriteLine("Else");
                }
                Mouse.OverrideCursor = Cursors.Arrow;
            }
     
             
            private static void CheckCompatibility(CustomConnector connector, CustomConnection connection, ManipulationRoutedEventArgs e)
            {
                IReadOnlyCollection<System.Type> value;
     
                if (!connection.Source.Equals(connector.Shape))
                {
                    if ((connector != null) && (connector.Direction == ConnectorDirection.In))
                    {
                        if (connection.Source.GetType().BaseType.Name.Equals(typeof(EndEffector).Name))
                            connectionMapping.TryGetValue(connection.Source.GetType().BaseType, out value);
                        else
                            connectionMapping.TryGetValue(connection.Source.GetType(), out value);
     
                        foreach (Type type in value)
                        {
                            if (type.Equals(connector.Shape.GetType()) || type.Name.Equals(connector.Shape.GetType().BaseType.Name))
                            {
                                Console.WriteLine("Esto es Compatible");
                            }
                            else
                            {
                                e.Handled = true;
                                break;
                            }
                        }
                    }
                    else if ((connector != null) && (connector.Direction == ConnectorDirection.Out))
                    {
                        if (connector.Shape.GetType().BaseType.Name.Equals(typeof(EndEffector).Name))
                            connectionMapping.TryGetValue(connector.Shape.GetType().BaseType, out value);
                        else
                            connectionMapping.TryGetValue(connector.Shape.GetType(), out value);
                        foreach (Type type in value)
                        {
                            if (type.Equals(connection.Source.GetType()) || type.Name.Equals(connection.Source.GetType().BaseType.Name))
                            {
                                connection.isReverse = true;
                                Console.WriteLine("Compatible");
                            }
                            else
                            {
                                e.Handled = true;
                                break;
                            }
                        }
                    }
                }
            }
            /*
             * Método sobrescrito para eliminar las conexiones
             * que se quedan coleando en el limbo del diagrama.
             * (Recolector de basura ciberespacial).
             */
            protected override void OnPropertyChanged(DependencyPropertyChangedEventArgs e)
            {
                if (((e.Property.Equals(CustomConnection.SourceProperty)) || (e.Property.Equals(CustomConnection.TargetProperty))) &&
                    (e.NewValue == null))
                {
                    diagram.RemoveConnection(this);
                }
                base.OnPropertyChanged(e);
            }
            #endregion
        }
    }

     

    Hope this helps...non of the above solutions worked

  8. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2991 posts

    Posted 11 Jan Link to this post

    Hi Fede,

    We see nothing abnormal in this implementation (except getting the diagram, which can be replaced with this.ParentOfType<RadDiagram>()). However, we miss the code which populates the diagram with connections. We are also not sure the exact issue you are trying to solve - please point us to what you need to be different on the picture you sent us previously (is it the connectors be always visible, or the bezier curve to be more different in terms of geometry) ? 

    Ideally, we would need an isolated sample to investigate more precisely - can you open a new support thread with isolation ?

    Also, what is the version you are using and have you tried our latest release - you did not answer this but it might be crucial, cause we have several bezier curves fixes for the last several releases.

    Regards,
    Petar Mladenov
    Telerik by Progress
    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