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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Is it possible to have an image inside ExpanderSymbol Nodes?

Platform: WinForms |
Control: Diagram


Yes. It is possible to have an image inside ExpanderSymbol Nodes. We can achieve this in two ways.

  • 1.Having Bitmap Nodes inside the ExpanderSymbol Nodes
  • 2.Having a property called image for each symbol

1.Having Bitmap Nodes inside the ExpanderSymbol Nodes:

The ExpanderSymbol class should inherits from Rectangle,and in its constructor we have to define a Bitmapnode and Append into it.


public EmployeeSymbol(float x, float y, float width, float height, float fCurveRadius, string path)
PointF pt = new PointF(x, y);
node = new BitmapNode(path);
node.PinPoint = pt;
node.Size = new System.Drawing.SizeF(120, 80);
node.LineStyle.LineColor = Color.Transparent;



Public Sub New(ByVal x As Single, ByVal y As Single, ByVal width As Single, ByVal height As Single, ByVal fCurveRadius As Single, ByVal path As String)
 Dim pt As PointF = New PointF(x, y)
node = New BitmapNode(path)
node.PinPoint = pt
node.Size = New System.Drawing.SizeF(120, 80)
node.LineStyle.LineColor = Color.Transparent
 End Sub


The above code snippet is used to append the Bitmap node inside an ExpanderSymbol. Here "path" denotes the path of the image, "pt" denotes the location of the image inside the symbol. It will be invoked using the following code,


int x = (int)Session["X"];
int y = (int)Session["Y"];
string path = Server.MapPath(String.Empty);
path = path + @"\App_Data\Image.png";
EmployeeSymbol emplysymbol = new EmployeeSymbol(x, y, 110, 40, 12, path);



Dim x As Integer = CInt(Session("X"))
Dim y As Integer = CInt(Session("Y"))
Dim path As String = Server.MapPath(String.Empty)
path = path & "\App_Data\Image.png"
Dim emplysymbol As EmployeeSymbol = New EmployeeSymbol(x, y, 110, 40, 12, path)


Here "x" and "y" values represents the position of the image on the node.

2.Having a property called image for each symbol:

Here we have to create a property called image for each symbol. when each symbol has drawn we have to set the proerty . And the image has been drawn on the symbol by overriding the Render using the property value. The below code snippet is used to set the image property of each symbol.


emplysymbol.Image = System.Drawing.Image.FromFile(datasrcpath + (string.Format(@"\Icons\image{0}.png", n)));



Private emplysymbol.Image = System.Drawing.Image.FromFile(datasrcpath & (String.Format("\Icons\image{0}.png", n)))


The below Code snippet illustrate overriding the Render,


protected override void Render(Graphics gfx)
    gfx.DrawImage(this._Image, 20,10);



Protected Overrides Sub Render(ByVal gfx As Graphics)
 gfx.DrawImage(Me._Image, 20,10)
End Sub

2X faster development

The ultimate WinForms UI toolkit to boost your development speed.
You must log in to leave a comment

Please sign in to access our KB

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

Up arrow icon

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

Live Chat Icon For mobile