how to add image to custom shape?

2 posts, 0 answers
  1. ITA
    ITA avatar
    383 posts
    Member since:
    Aug 2009

    Posted 17 May 2014 Link to this post


    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?

    Best Regrads
  2. Martin
    Martin avatar
    1044 posts

    Posted 21 May 2014 Link to this post

    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.

    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
  3. DevCraft R3 2016 release webinar banner
Back to Top