how to add image to custom shape?

[ITA]

Hi,

i try to add some png to a custom shape gallery, but without andy success.

MyGallery secondGallery = new MyGallery { Header = "Shapes" };
secondGallery.Shapes.Add(new Switch
{
    SN = "000",
    Content = "Start",
    Height = 50,
    Width = 50,
    Backcolor = "#319b47",
    Forecolor = "#ffffff",
    Geometry = ShapeFactory.GetShapeGeometry(CommonShapeType.EllipseShape),
    Manufacturer = "Manufacturer 2.2"
});

But i want to set an image instat of Gemoetry. Can you tell me how?

Thanks
Best Regrads
Rene

[Martin Ivanov]

Hello Rene,

In order to achieve this you can define an ItemTemplate for the toolbox items and attach to the default ItemSerializing and ShapeDeserialized events of the diagram. In general you can define a property that contains the image path in your business object, then define an ItemTemplate with a RadDiagramShape with an Image element as its Content, and then bind your property to the Image's Source. This will display the images in the toolbox and it will preserve the default functionality of the shape.

When you start to drag an item from the toolbox the ItemSerializing event will be fired and there you can save the property with the image path (from your view model) in the SerializationInfo of the shape.

SerializationService.Default.ItemSerializing += Default_ItemSerializing;

void Default_ItemSerializing(object sender, SerializationEventArgs<IDiagramItem> e)
{
    var shape = e.Entity as RadDiagramShape;
    if (shape != null)
    {
        var myShape = shape.DataContext as MyShape;
        if (myShape != null)
        {
            e.SerializationInfo["ContentImagePath"] = myShape.ImagePath;
        }
    }
}

When the item is dropped in the diagram the ShapeDeserialized  event will be fired and in its handler you can create a new Image element with the image path from the serialization info

private void RadDiagram_ShapeDeserialized(object sender, ShapeSerializationRoutedEventArgs e)
{
    var shape = e.Shape as RadDiagramShape;
    if (shape != null)
    {
        var image = new Image() { Source = new BitmapImage(new Uri("/CustomToolboxDragDrop_WPF;component/" + e.SerializationInfo["ContentImagePath"].ToString(), UriKind.Relative)) };
        Viewbox viewBox = new Viewbox() { Stretch = Stretch.Fill, Margin = new Thickness(-4) };
        viewBox.Child = image;

        shape.Geometry = null;
        shape.Content = viewBox;
    }
}

For your convenience I attached a sample project that demonstrates this approach. Please give it a trye and let me know if its helpful.

Regards,
Martin
Telerik