Quote:


You will have to crate two different shapes, one showing only the graphic to show in the listbox, and the second being the actual shape to use in the diagram. Then you can handle the NodeCreated event or script to change node.Shape from the icon shape to the actual shape after drag and drop.

Quote:


If you mean you need to remove the standard shapes from your library, you can either click File -> New to remove them all, or select ones you don't need in the list on the right and press Del to delete them.

I hope that helps,
Stoyan

Hi,

You could create two different shape library files, assign the one with only icon shapes to the listbox, and load the other one into the view.

I think the shape designer doesn't let you associate images with shapes at this time, but only lets you load them as  background to align your shape drawing to the bitmap graphics. If you need to show a bitmap image as part of the shape, you can add an image element manually as shown in http://mindfusion.eu/Forum/YaBB.pl?num=1346357048/1#1.

What you see by default when running the ShapeListBox without setting a filter or loading a shape library is all available shapes - both added by your code and the near 100 predefined shapes. You can find the predefined ones exposed as members of the Shapes class.

I hope that helps,
Stoyan

Ok we are are onto something but check out the attachment for the problem still persisting.

Played around with it more, it seems to do the job but see attachment, when resized the image in the shape sort of becomes detached from it.

One way I can think of is to restrict the resizing by handles by proportion or percentage. Can that be done? What I mean is if width is increased, so should height, proportionately when dragged using handles.

SHL code is:

<?xml version="1.0" encoding="utf-8"?>
<shapes version="2">
  <shape id="newShape3" fill-mode="Winding" display-name="">
    <outline>
      <round-rectangle dash-style="Custom" width="-1" x="4" y="28" w="87" h="67" r="5" />
      <round-rectangle dash-style="Custom" width="-1" x="65" y="3" w="26" h="24" r="5" />
    </outline>
    <decorations />
    <shape-decorations />
    <image x="60" y="0" width="30" height="30" src="iconFactory.jpg" />
    <enable-outline>True</enable-outline>
  </shape>
</shapes> 

However I'm still wondering how to change the icon shown in the ShapeListBox to something other than a mere preview of the shape.

Plus I'm wondering why its cut from the bottom.

Quote:


My idea was replacing the shape once the node is created, not keeping the one from the listbox. E.g. you load only the thumbnail shapes in the listbox, the actual shapes in the view, and handle NodeCreated like this:

if (node.Shape.Id = "Thumbnail_MyShape")
    node.Shape = Shape.FromId("Actual_MyShape"); 

Quote:


Shape coordinates are specified as percents of node's size, and if you have a distance of 1 between the two rectangles, it might get larger than a pixel when the node is large.

Quote:


Yes, using NodeCosntraints as you found out. Another option might be to use a simple RoundRect shape for all nodes, and attach a locked node to show the thumbnail image to the main node's top-right corner (see DiagramNode.AttachTo method). That will allow resizing the node in all directions without resizing the attached image.

Quote:


Check if there aren't any Y coordinates getting larger than 100%.

Quote:


Just keep in mind that changing some ShapeListBox properties will generate these images again - such as icon size or color.

I hope that helps,
Stoyan

If you could elaborate on how to use DiagramNode.AttachTo to attach an image to a shapenode that would be great cause as you rightly pointed out, the graphic does get enlarged as well (which might be a problem).