Customize node's shape

[Veena]

I have a custom node called wheelNode ( 2 concentric circles with inner circle filled with white color and outer circle filled with some other color ).
I added this item into my custom SymbolPaletteGroup . But now I am not able to drag and drop this item into my diagram control view.
I programmatically added this item in the view , but am not able to do functions like resize, rotation etc.
Actually I am not able to do any function similar to the normal SymbolPaletteItem.
I have 2 other controls (circle and rectangle) in my custom SymbolPaletteGroup. I am able to do all actions using these symbolpalleteItems.

Please find the attached image of wheel node and its corresponding implementation.

How can I make the wheelnode acts similar to  other SymbolPaletteItems.

Please help with this.

Thanks in advance
Veena

Attachment: wheelnode_60a00657.zip

[Parthiban A]

Hi Veena,

We have analysed your query kindly find the responses below,

S.No	Queries	Responses
1.	I added this item into my custom SymbolPaletteGroup . But now I am not able to drag and drop this item into my diagram control view.	By default symbol palette item doesn’t support any custom object(Class derived from Node or any other UI element). It will throws xaml parse exception. Because the object you have used in sample side(WheelNode) is not accessible in source side. We have modified your sample by adding node as symbol palette items content. Its works fine, now you can set any content as node content. Otherwise you can directly set content for symbol palette item, it will be cloned to node content after drag and drop from palette.
2.	I programmatically added this item in the view , but am not able to do functions like resize, rotation etc.	You have just added the ellipse, while rendering. So while you resize the node, you need to update your layout or again need render element. You can use SizeChanged event for node or DiagramView.NodeResizing event.
3.	Also we need to give some indication of the position in wheel when mouse is over the wheel item as shown in the attached image.	We have created proof of concept sample for this. In which we have added one ellipse geometry in the grid, while mouse over the node we are just updating the ellipse size and centre position. Use MouseOver and MouseEvent framework event for node.
4.	Alternate Approach from our side.	We have provided two alternate approach for this, 1.      We have added image(two ellipse) as content of node and set its stretch as fill. So when you resize the node, it automatically resizes the content. 2.      We have added grid as node content in which we have added two separate path for ellipse. The above two approach will be support for drag and drop from symbol palette.

 

Kindly find the sample from attachment.

Sample Link:

Regards,

Parthiban

Attachment: 125568_CustomNodeShape_80721950.zip