SettingsPane for custom shape

3 posts, 0 answers
  1. Larissa
    Larissa avatar
    2 posts
    Member since:
    Sep 2017

    Posted 16 Oct 2017 Link to this post


    I've added a custom shape with an image to the toolbox and can put them into the diagram. With this thread: I could implement it.

    Now I would like to open the settingspane, resize und rotate the shape, but it does not work... this is my code:

    private void radDiagramToolbox1_VisualItemFormatting(object sender, ListViewVisualItemEventArgs e)
        DiagramListViewDataItem dataItem = e.VisualItem.Data as DiagramListViewDataItem;
        if (dataItem != null)
            DiagramListViewVisualItem el = e.VisualItem as DiagramListViewVisualItem;
            if (dataItem.Key.Equals("MyShape"))
                // on toolbox
                el.Image = new System.Drawing.Bitmap(@"blabla.png");
                el.ImageLayout = ImageLayout.Zoom;
                el.ShapeElement.Opacity = 0;
                el.Text = "";
                el.TextElement.Text = "";
                // on diagram
                el.ShapeElement.BackColor = System.Drawing.Color.Transparent;
                el.ShapeElement.Image = new System.Drawing.Bitmap(@"blabla.png");
                el.ShapeElement.ImageLayout = ImageLayout.Stretch;
                el.ShapeElement.Text = "";
                el.ShapeElement.Size = new Size(80, 80);
                el.ShapeElement.BorderThickness = new Padding(0);
    private void DragDropService_PreviewDragDrop(object sender, RadDropEventArgs e)
        DiagramListViewVisualItem dragItem = e.DragInstance as DiagramListViewVisualItem;
        RadDiagramElement dropTarget = e.HitTarget as RadDiagramElement;
        if (dragItem != null && dropTarget != null && dragItem.Data.Key.Equals("MyShape"))
            e.Handled = true;
            RadDiagramShape shape = dropTarget.Shapes.Last() as RadDiagramShape;
            shape.DiagramShapeElement.Shape = null;
            shape.BackColor = System.Drawing.Color.Transparent;
            shape.DiagramShapeElement.Image = dragItem.Image;
            shape.DiagramShapeElement.ImageLayout = dragItem.ImageLayout;


    Thank you!




  2. Hristo
    Hristo avatar
    1522 posts

    Posted 17 Oct 2017 Link to this post

    Hi Larissa,

    Thank you for writing.

    I am attaching a sample project demonstrating how you can create a custom shape with an image and then add it to the toolbox. Additionally, I am also attaching a short video showing the result on my end.

    I hope this helps. Should you have further questions please do not hesitate to write back.

    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Larissa
    Larissa avatar
    2 posts
    Member since:
    Sep 2017

    Posted 17 Oct 2017 in reply to Hristo Link to this post

    Hi Hristo,

    it works great! Thank you!



Back to Top