We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Image Node with Caption

Thread ID:





94969 Jun 15,2010 09:39 AM UTC Jun 17,2010 06:29 AM UTC WinForms 1
Tags: Diagram
Genu Smith
Asked On June 15, 2010 09:39 AM UTC

What I need is a simple workflow diagram that has image nodes with its caption/label/legend below of the image.what node type should I create?


Melba Winshia [Syncfusion]
Replied On June 17, 2010 06:29 AM UTC

Hi Genu,

Thank you for contacting Syncfusion Support.

You can have caption below the image by grouping BitmapNode and TextNode. Please refer to the following code snippet:

private static Node CreateIcon1()
Group group = new Group( );
group.Name = "ABC";
group.Tag = 123;
group.EditStyle.AllowRotate = false;
group.EditStyle.AllowVertexEdit = false;
group.EditStyle.AspectRatio = true;
group.EditStyle.AllowChangeHeight = group.EditStyle.AllowChangeWidth = true;

Bitmap bmp = new Bitmap( 32, 32 );
Graphics grfx = Graphics.FromImage( bmp );
grfx.FillRectangle( new SolidBrush( Color.SlateBlue ), 0, 0, bmp.Width, bmp.Height );
grfx.FillEllipse( new SolidBrush( Color.Turquoise ), 0, 0, bmp.Width, bmp.Height );
grfx.Dispose( );

BitmapNode main2 = new BitmapNode(bmp);
main2.Name = "DEF";
main2.PinPoint = new PointF(100, 100);
group.InsertChild(main2, 0);

TextNode label2 = new TextNode( group.Name + " ." );
label2.Name = "GHI";
label2.LineStyle.LineColor = Color.White;
label2.HorizontalAlignment = StringAlignment.Center;
label2.FontStyle.Family = "Arial";
label2.BackgroundStyle.ColorAlphaFactor = 255; // make background opaque
label2.WrapText = true;

label2.PinPoint =
new PointF( main2.PinPoint.X, main2.PinPoint.Y + 0.6f*( bmp.Height + label2.BoundingRectangle.Height-5 ) );
group.AppendChild( label2 );

Syncfusion.Windows.Forms.Diagram.Rectangle rec = new Syncfusion.Windows.Forms.Diagram.Rectangle(main2.PinPoint.X-20, main2.PinPoint.Y-20, 40,50);
rec.FillStyle.Color = Color.Transparent;
rec.LineStyle.LineColor = Color.Black;

BitmapNode icon = new BitmapNode("..\\..\\ShortCutIcon.png");
icon.PinPoint = new PointF(main2.PinPoint.X - main2.Size.Width / 2, main2.PinPoint.Y - main2.Size.Height / 2+30);

return group;

Please refer to the sample in the following link which illustrates this:


Please let me know if this helps.



This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon