Annotations for nodes that are not simple text

Question

I am creating a diagram and I would like there to be a simple image in the center of the node. I would like to know the best way to go about doing this? The documentation for the Annotation class within SfDiagram states that it can be used for text, image, or any view object, but I can't seem to get it to work for anything other than just simple text.

When I create an Annotation object, it is easy to set it to a simple text string by setting the Content property. I assume the same property could be set to something other than text, but I've tried setting it equal to an Image object or an ImageSource object, and in both scenarios it causes an exception to be thrown. Any advice on creating annotations that are something other than simple text? Or any advice on putting an image onto a node in some other way that bypasses the Annotation object?

Thanks!

Devaraj Sekar · Accepted Answer

Hi David, 
Thank you for the update. 
The mentioned requirement can be achieved in SfDiagram control by customizing design layout. We have prepared a sample based on the mentioned requirement, which can be downloaded from the below link. 
Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample1328398004.zip  
UG link: https://help.syncfusion.com/xamarin/diagram/layout#beginnoderender 
Kindly let us know whether the sample fulfills your requirement. 
Regards, 
Devaraj S

Devaraj Sekar · Answer

Hi David, 
  
Thank you for contacting Syncfusion support. 
  
We were able to reproduce the mentioned issue with “Node Annotation does not render image object” in SfDiagram and we suspect this to be a defect. We will update you further details on 25th June 2020. 
  
Regards, 
Devaraj S

Devaraj Sekar · Answer

Hi David, 
Thank you for the patience. 
We confirmed that the issue with “Node Annotation does not render image object” is a defect and we have logged a defect report. The fix for this issue will be included in our first weekly NuGet release on July 2020, which is estimated to be available on 7th July 2020 tentatively. 
Regards, 
Devaraj S

David Pruitt · Answer

Awesome, thank you!

Devaraj Sekar · Answer

Hi David, 
Thank you for the update. 
We will let you know when the reported issue has fixed from our end. Kindly let us know if you require any technical assistance. 
Regards,Devaraj S

Devaraj Sekar · Answer

Hi David, 
 
Regret for the inconvenience. 
 
We are having Essential Studio volume 2 main release on first week of July 2020. So, we have not released the weekly NuGet on 7th July 2020. We will include the fix in upcoming weekly NuGet which is estimated to available on July 14th, 2020.  
 
Regards, 
 
Devaraj S

Devaraj Sekar · Answer

Hi David, 
Thank you for the patience. 
The reported issue with “Node Annotation does not render image object” has been fixed and included in our latest NuGet release version (18.2.0.45), which can be downloaded from the below link. 
NuGet link: https://www.nuget.org/packages/Syncfusion.Xamarin.SfDiagram/18.2.0.45 







Syncfusion.Xamarin.SfDiagram 18.2.0.45
Syncfusion diagram control for Xamarin is used to create different types of diagrams such as flowcharts, use case diagrams, workflow process diagrams, organizational chart, mind map, and so on. Key features: • Node, connector, and port: Basic elements used to draw diagrams. • Data binding: Generate diagram with nodes and connectors based on the information provided from an external data source. • Great editing experience with zoom, pan, resize, move, and rotate operations. • Automatic layout: Arrange nodes in a tree like structure based on the relationship of nodes and allows creation of organizational charts, family-trees, and mind map diagrams. • Clipboard commands: Perform cut, copy, and paste operations. • Undo/redo: Correct recent changes. • Serialization: Save the current state of the diagram and load it back when needed. • Stencil: Contains a list of symbols that can be dropped over a diagram. • Gridlines: Gridlines are lines drawn behind diagram elements. It provides a visual guidanc
www.nuget.org
 
Kindly let us know if you require any further assistance. 
Regards,Devaraj S

David Pruitt · Answer

Devaraj,Thank you for the prompt fix. Could you provide an example as to how to get this feature to work? It seems I still can't get it to work. I currently have Syncfusion.Xamarin.SfDiagram 18.2.0.46 installed in my Visual Studio solution.Here is a snippet of my code:    //Example 1:    Node node = new Node();    node.OffsetX = offsetX;    node.OffsetY = offsetY;    node.Height = height;    node.Width = width;    node.ShapeType = shape;        Image my_img = new Image();    my_img.Source = ImageSource.FromFile("plus.png");    my_img.WidthRequest = width;    my_img.HeightRequest = height;        Annotation node_annotation = new Annotation();    node_annotation.Content = my_img;    node_annotation.TextBrush = new SolidBrush(Color.FromRgb(255, 255, 255));    node_annotation.FontSize = 14;    node.Annotations.Add(node_annotation);I have tried it a few different ways, so here is another way I tried it:    //Example 2:    Node node = new Node();    node.OffsetX = offsetX;    node.OffsetY = offsetY;    node.Height = height;    node.Width = width;    node.ShapeType = shape;        Annotation node_annotation = new Annotation();    node_annotation.Content = ImageSource.FromFile("plus.png");    node_annotation.TextBrush = new SolidBrush(Color.FromRgb(255, 255, 255));    node_annotation.FontSize = 14;    node.Annotations.Add(node_annotation);    The "plus.png" image file is a very simple 512x512 image with a "+" sign in it, and can be seen at the following link: https://www.flaticon.com/free-icon/plus_1774149Thanks for any help you can provide!