Hello,
        I am working on winform and using a flowcharter from the samples in c#, i want to ask that can i use the custom images like .png(car, plane, tree etc)instead of predefined shapes from shape library.

new Node(
new AnchorPattern(new AnchorPoint[]
{
new AnchorPoint(30, 0, true, true, MarkStyle.Circle, defAnch),
new AnchorPoint(50, 0, true, true, MarkStyle.Circle, defAnch),
new AnchorPoint(100, 0, true, true, MarkStyle.Circle, defAnch),
new AnchorPoint(100, 50, true, true, MarkStyle.Circle, defAnch),
new AnchorPoint(100, 100, true, true, MarkStyle.Circle, defAnch),
new AnchorPoint(50, 100, true, true, MarkStyle.Circle, defAnch),
new AnchorPoint(0, 100, true, true, MarkStyle.Circle, defAnch),
new AnchorPoint(0, 50, true, true, MarkStyle.Circle, defAnch),
new AnchorPoint(0, 30, true, true, MarkStyle.Circle, defAnch)
}),
Shape.FromId("PunchedCard"),"Card")

Hi,

You could set the nodes' Image property to a bitmap image, and enable their Transparent property to hide the geometry.

Regards,
Slavcho
Mindfusion

https://imagebin.ca/v/3Rd0b0wwjiKr

This is what it appears ,i want to replace these two shapes from my own png images.

Slavcho thanks for the quick response, but actually i am not that expert in c# and winform can u please explain it a little more with the code if possible
thanks

This example looks outdated, now the library includes a NodeListView control you could use as a palette instead of the custom-drawn ListBox from Flowcharter. So add a NodeListView to your form, and then populate it with prototype nodes like this -

[code]
nodeListView.AddNode(
     new ShapeNode
     {
           Transparent = true,
           Image = Image.FromFile(@"images/airplane.png")
     },
     "Airplane");[/code]

Now if user drags a node from the palette, it get cloned on the diagram canvas automatically, instead of you having to create instances from DragDrop event handler.

HTH,
Slavcho

https://imagebin.ca/v/3RdtYsGdhKd3

Slavcho, I tried as u said but i am facing an issue, now image is showing in nodelistview but i cannot drag it to the diagramview even the drag properties are true,and also i think nodelist is not that old i have downloaded the latest version from mindfusion for winforms and nodelist is very flexible with having connectors functionalities as well...so is there any way to get my images in that nodelist as showing in the url i have attached above.

And below is the code i used now,

this.nodeListView1.AddNode(
new ShapeNode
{
Transparent = true,
Image = Image.FromFile(@"C:/Imgs/bitmap1.bmp")
},"Airplane");

I don't mean your installation but our example is outdated, we should update it to use NodeListView. The DiagramView won't accept drag and drop from NodeListView in Flowcharter example because of the diagramView_DragOver event handler there setting e.Effect = DragDropEffects.None; remove that line and it should work.

Regards,
Slavcho

The issue is resolved now, thanks Slavcho for the quick solution.

In attached I've replaced the custom-drawn listbox with a NodeListView. Now instead of Shape assignments there you can add Image ones to get what you need. We'll probably replace the connectors list there too for upcoming release, with a ShapeListBox control. I'm guessing Flowcharter was created before we had these controls in the library

HTH,
Slavcho

---

it is working now ,thanks