Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Adding custom images like .png, .jpeg in nodelist (Read 6428 times)
ashar11
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Jun 29th, 2017
Adding custom images like .png, .jpeg in nodelist
Jun 29th, 2017 at 9:18am
Print Post  
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")
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: Adding custom images like .png, .jpeg in nodelist
Reply #1 - Jun 29th, 2017 at 9:31am
Print Post  
Hi,

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

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
ashar11
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Jun 29th, 2017
Re: Adding custom images like .png, .jpeg in nodelist
Reply #2 - Jun 29th, 2017 at 10:07am
Print Post  
https://imagebin.ca/v/3Rd0b0wwjiKr

This is what it appears ,i want to replace these two shapes from my own png images.
  
Back to top
 
IP Logged
 
ashar11
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Jun 29th, 2017
Re: Adding custom images like .png, .jpeg in nodelist
Reply #3 - Jun 29th, 2017 at 10:28am
Print Post  
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
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: Adding custom images like .png, .jpeg in nodelist
Reply #4 - Jun 29th, 2017 at 10:39am
Print Post  
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
Select All
nodeListView.AddNode(
	new ShapeNode
	{
		Transparent = true,
		Image = Image.FromFile(@"images/airplane.png")
	},
	"Airplane"); 



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
  
Back to top
 
IP Logged
 
ashar11
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Jun 29th, 2017
Re: Adding custom images like .png, .jpeg in nodelist
Reply #5 - Jun 29th, 2017 at 12:23pm
Print Post  
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");
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: Adding custom images like .png, .jpeg in nodelist
Reply #6 - Jun 29th, 2017 at 12:37pm
Print Post  
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
  
Back to top
 
IP Logged
 
ashar11
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Jun 29th, 2017
Re: Adding custom images like .png, .jpeg in nodelist
Reply #7 - Jun 29th, 2017 at 12:47pm
Print Post  
The issue is resolved now, thanks Slavcho for the quick solution.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: Adding custom images like .png, .jpeg in nodelist
Reply #8 - Jun 29th, 2017 at 1:03pm
Print Post  
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
  

FlowCharter_NLV.zip ( 47 KB | 266 Downloads )
Back to top
 
IP Logged
 
ashar11
Junior Member
**
Offline


I Love MindFusion!

Posts: 56
Joined: Jun 29th, 2017
Re: Adding custom images like .png, .jpeg in nodelist
Reply #9 - Jun 30th, 2017 at 10:10am
Print Post  
it is working now ,thanks
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint