Hello Alan A,

My team and I have done an initial review of this thread, and while the XamDiagram wasn’t exactly designed for this purpose as it was designed to be more of a “workflow diagram”, I believe it is the closest thing in the Infragistics for WPF toolset that would help you to create the behavior you are seeing. Below I will address each of the points that you have provided with an explanation of how I think you might be able to achieve it:

Drag & drop controls to canvas (like button, input, dropdown, image...): This may be possible if you add a custom toolbox item to the existing XamDiagramToolbox control. You can read about the XamDiagramToolbox at the following documentation article: https://www.infragistics.com/help/wpf/xamdiagram-configuring-the-toolbox. In the sample code-snippet, there is an example of how to add a DiagramToolboxItem that contains a DiagramNode that is then given a path. Instead of giving this a path, you would need to modify the DiagramNode’s Template property such that it looks like a Button, Input, DropDown, or other control as the nodes will not look this way by default. This would most easily be done by modifying the default template of the DiagramNode, which exists in the generic.xaml file commonly found at the following directory when Infragistics controls are installed:

C:\Program Files (x86)\Infragistics\<version>\WPF\DefaultStyles\XamDiagram

Move, resize, copy... controls in canvas: This is built-in to the XamDiagram control. You can move, resize, and copy nodes within the canvas of the XamDiagram.

Configure controls: This could potentially be difficult, but if you could somehow have your node have a reference to the control that it is displaying, you could utilize the XamPropertyGrid to modify the properties of that node, much like the Properties window in the Visual Studio designer. You can read further about the XamPropertyGrid here: https://www.infragistics.com/help/wpf/xampropertygrid.

Then, you could utilize the SelectionChanged event of the XamDiagram to find out which item (or items) you have selected and push the item to the SelectedObject property of the XamPropertyGrid for modification.

Export my designed UI / Load exported data parse them and generate real UI on runtime: Regarding these pieces, there is nothing built-in to the XamDiagram that would allow you to do this. The best way I can recommend to do this would be to loop through the XamDiagram.Items collection, as this would return you the nodes that are placed in the XamDiagram and you could use the information that you provide about those nodes to generate an exported UI for your database or an XML file. At that point, the loading and how this database or XML file is read would be up to you as well.

Please let me know if you have any other questions or concerns on this matter.