How to turn off selected node decoration in SfDiagram

[Andrew Ridout]

Hi,

I have recently upgraded Syncfusion from v11.3.0.33 to v12.1.0.46.  Since upgrading, I've noticed that the default behaviour when selecting a node has changed - now when you select a node, the node is decorated with Delete, Copy, Rotate etc buttons, as per the attached screenshot.

How do you turn this node decoration off? Note that I want to still be able to select a node and for the node to be surrounded by the selection square.

Furthermore, how do you customise what "buttons" surround the node and how do you control their commands in an MVVM (PRISM) app?

Thanks,

Andrew

Attachment: Decorated_node_f8f008fb.zip

[Parthiban A]

We have analyzed your query, kindly find the details below.

 

S.No	Queries	Responses
1.	How do you turn this node decoration off? Note that I want to still be able to select a node and for the node to be surrounded by the selection square.	You can collapse the quick commands by setting Visibility.Collapsed for SfDiagram.SelectedItems.QuickCommands.   Code Snippet:      SfDiagram Diagram=new SfDiagram();      (Diagram.SelectedItems as ISelector).QuickCommands = Visibility.Collapsed;
2.	Furthermore, how do you customise what "buttons" surround the node and how do you control their commands in an MVVM (PRISM) app?	We have created a sample in which we have  the customized Selector’s default template by removing existing button. And added one button, whose command is in turn bind to SelectorVM.ClickCommand.     <Button Width="50" Height="50" Content="Click" HorizontalAlignment="Center" VerticalAlignment="Bottom" Command="{Binding ClickCommand}"></Button>   We have created SelectorVM, which is derived from SelectroViewModel. And also added ClickCommand to it. By default SfDiagram.SelectedItems will act as view model for Selector.   So we have assigned SelectorVM to SFDiagram.SelectedItems,property, hence SelectorVM will be data context for Selector. For more information kindly refer the sample from attachment.

 

Regards,

Parthiban

Attachment: F116314_SelectorCommandSupress_e49610ef.zip

[Andrew Ridout]

Thanks, this has been a great help.

[Parthiban A]

Hi Andrew,

Thanks for your updated.

Please let us know, if you require any further assist on this.

Regards,

Parthiban A.

[Andrew Ridout]

Hi,

As per your previous suggestion, I am suppressing the diagram node quick commands with the following code:

(Diagram.SelectedItems as ISelector).QuickCommands =Visibility.Collapsed;

However, this still leaves the rotate icon present when the node is selected (see attached screenshot).  I have disabled rotation in NodeConstraints so the fact that the rotate icon is still present will be confusing to the user as they are unable to actually rotate the nodes.  Can you let me know how to completely remove the rotate icon from a selected node?

Thanks,

Andrew

Attachment: Diagram_Node_cba5c1c4.zip

[Saranya Chandrasekaran]

 

Hi Andrew,

 

Regarding “how to completely remove the rotate icon from a selected node?” support in Diagram WinRT, Currently we do not have a support to completely remove the rotate icon. This features is already in our feature queue. We will implement this requested feature in any of our upcoming releases.

However, we will provide support to disable (not hiding) the rotate icon using constraints. After disable the icon changes to gray color. Please refer to the attached file.

 

  

Please let us know if you have any concerns.

Regards,

Saranya C

 

Attachment: Image_11e42433.zip

[Andrew Ridout]

Saranya,

Thanks for the update. I'd be grateful if you could provide some sample code which will allow me to disable the rotate button.

Thanks,

Andrew

[Saranya Chandrasekaran]

Hi Andrew,

Regarding “To disable the rotate icon from a selected node”. Please refer to the following code snippet to disable (not hiding) rotate icon using constraints.

Code Snippet:

node.Constraints = node.Constraints & ~NodeConstraints.Rotatable;

Here, node is the name of the selected node.

 

For further details about the constraints in SfDiagram, please refer to the following online help documentation link.

Link: http://help.syncfusion.com/UG/winrt/documents/api.htm

Please let us know if you have any concerns.

Regards,

Saranya C

[Srikanth]

HI,

Have you implemented this feature yet ? Can I now override the style of selection decorator ?

[Saranya Chandrasekaran]

Hi Andrew, 

 

Your requirement can be achieved by disabling SelectorConstraints of SfDiagram. Please refer to the below code example to meet your requirement. 

Code Example: 

(diagram.SelectedItems as SelectorViewModel).SelectorConstraints & ~SelectorConstraints.QuickCommands & ~SelectorConstraints.Rotator; 

 

For further details about SfDiagram Constraints, please refer to the following online help documentation link. 

Link: 

https://help.syncfusion.com/winrt/sfdiagram/constraints 

 

Regards, 

Saranya C.