Winform Graphical Nodes

5 Answers 140 Views
General Discussions
Michael
Top achievements
Rank 1
Veteran
Michael asked on 12 May 2021, 08:29 PM

Hello,

I have a project where I'd like to use Nodes to deliver an interface where users can link up different nodes to create something called a 'rule'. I've found several options out there with Unity's nodes being the most visually appealing. Does Telerik have anything like this? I wasn't able to find anything but thought I'd ask.

I've attached a screenshot of an open source node framework based on Unity's node system.

 

Thanks,

Michael

5 Answers, 1 is accepted

Sort by
1
Accepted
Nadya | Tech Support Engineer
Telerik team
answered on 08 Jun 2021, 01:01 PM

Hello, Michael,

Thank you for the update. I am really glad to hear that you managed to found a solution that works as you expected in reaching your custom requirements. RadShapedForm offers more flexibility when implementing drag-drop functionality since it is actually a form, not a shape. Feel free to use the approach that best fits your needs.

In case you have further difficulties or have additional questions do not hesitate to contact me. 

Regards,
Nadya
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

1
Nadya | Tech Support Engineer
Telerik team
answered on 13 May 2021, 09:09 AM

Hello, Michael,

Thank you for the provided picture.

Considering it, I can suggest using RadDiagram control. RadDiagram offers flexible and interactive diagramming layouts for your rich data visualization applications. The framework toolset enables you to design shapes and connections between them which represent data logic and might be suitable for your scenario. I could suggest referring to the following articles:
https://docs.telerik.com/devtools/winforms/controls/diagram/diagram-items/shapes 
https://docs.telerik.com/devtools/winforms/controls/diagram/diagram-items/connections/connections 
https://docs.telerik.com/devtools/winforms/controls/diagram/populating-with-data 

You can also check our Demo>>Diagram examples.

I hope this information is useful. Let me know if I can assist you further.

Regards,
Nadya
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Michael
Top achievements
Rank 1
Veteran
commented on 13 May 2021, 04:14 PM

That does look promising. I haven't seen how to go about adding other controls to shape, such as a label, textbox or a listbox. I might have nodes that look like little property panels. How would you recommend going about that?
1
Nadya | Tech Support Engineer
Telerik team
answered on 14 May 2021, 12:20 PM

Hello, Michael,

It is possible to add other controls to RadDiagramShape. You can utilize the RadHostItem class and add controls to the diagram shape elements. Below you can find a sample demonstration that hosts a RadListView control inside RadDiagramShape:

 public RadForm1()
 {
     InitializeComponent();

     RadDiagramShape shape = new RadDiagramShape()
     {
         Text = "",
         Shape = new RoundRectShape(),
         Size = new Size(200, 200),
         Position = new Telerik.Windows.Diagrams.Core.Point(100, 100)
     };

     RadListView listview = new RadListView();
     listview.Items.Add(new ListViewDataItem("Item1"));
     listview.Items.Add(new ListViewDataItem("Item2"));
     RadHostItem host = new RadHostItem(listview);
     shape.DiagramShapeElement.Children.Add(host);

     this.radDiagram1.AddShape(shape);
 }

Additional information is available here: https://docs.telerik.com/devtools/winforms/telerik-presentation-framework/elements/use-control-inside-an-element 

I hope this information is useful. Do not hesitate to contact me if you have other questions.

Regards,
Nadya
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Michael
Top achievements
Rank 1
Veteran
commented on 14 May 2021, 03:08 PM

That's really helpful. How would you recommend designing a 'node' at design time and then hosting it inside a shape? Ive tested creating a user control, filling it with my controls, and then adding it to the RadHostitem. That worked, but it seems there is a lot of work i need to do handle things like zooming and resizing. For example, after adding my user control, i can no longer click on the shape and move it at run time. I think its because my user control is too big and overlapping the shape. How would you go about this? This is really promising so far though! Thank you!
Michael
Top achievements
Rank 1
Veteran
commented on 18 May 2021, 11:19 AM

Hey Nadya, did you have any more thoughts on this? Just curious to know how you'd go about this. Thanks!
0
Nadya | Tech Support Engineer
Telerik team
answered on 18 May 2021, 01:56 PM

Hello, Michael,

Creating a user control with desired control and adding it into RadHostItem is a possible solution to achieve your scenario. In order to work correctly, the user control should be wrapped inside the shape without overlapping it. However, I am not familiar with details about the exact requirements that you have and may provide general guidance and knowledge. I would like to note that using hosted controls inside RadDiagramShape is a custom solution. Feel free to adapt it according to your specific needs.

Let me know if I can assist you further.

Regards,
Nadya
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Michael
Top achievements
Rank 1
Veteran
commented on 04 Jun 2021, 02:44 AM

Hi Nadya,

Thanks for the info, that has been really helpful. I was able to follow your instructions and add a custom user control to my shape. I'd like to be able to click on the customer usercontrol and drag it inside the raddiagram but I havent been able to wire it up correctly. I've been sending the mouse up/down/move events over to the shape but its not behaving as I would expect. I'm hoping you have a better idea of how to tackle that. The goal would be to click on an empty space in my custom user control and drag the entire shape and control around. Hope that makes sense.

Thanks again,
Michael.
0
Nadya | Tech Support Engineer
Telerik team
answered on 04 Jun 2021, 10:13 AM

Hello, Michael,

I am glad to hear that the provided information was helpful.

Using a UserControl in Winforms application and performing drag-drop operations is more like a general programming question and is not actually related to RadControls. I made research in StackOverFlow and MSDN forums and have found the following threads that might be useful in this case:
https://docs.microsoft.com/en-US/troubleshoot/dotnet/csharp/usercontrol-act-control-container-design-time 
https://stackoverflow.com/questions/29993763/how-to-drag-custom-usercontrol-on-windows-form 
https://www.codeproject.com/Articles/8177/Drag-and-Drop-in-UserControls 

Feel free to make your own research for any other ideas that would be suitable for your custom scenario.

Please let me know if you have other questions related to RadControls from Telerik UI for Winforms suite.

Regards,
Nadya
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Michael
Top achievements
Rank 1
Veteran
commented on 04 Jun 2021, 03:43 PM

Hi Nadya,

I too had researched the same articles before posting. I can drag and drop controls no problem. The issue is when the usercontrol is hosted inside of the shape. When you look at the examples, they typically involve using control.top and control.left to set x and y positions of the control. Our Shape control doesn't have a top or left property. So, thats what I'm running in to, which is specific to the shape control. Hope that helps. Thanks again for the help, it is appreciated. :)
Michael
Top achievements
Rank 1
Veteran
commented on 07 Jun 2021, 08:07 PM

I made some progress on this. I stopped using the Shape controls and ended up using Shapeforms as MDI children. The result looked way better than I expected. I was also able to easily implement my mouse up/down and mousemove events to drag the entire form when you click and drag on an empty part of the form. So now I have 'forms' that look like nodes and I'm pretty satisfied with it. Thanks Nadya!
Tags
General Discussions
Asked by
Michael
Top achievements
Rank 1
Veteran
Answers by
Nadya | Tech Support Engineer
Telerik team
Share this question
or