SettingsPane for custom shape in UI for WinForms

This is a migrated thread and some comments may be shown as answers.

SettingsPane for custom shape

2 Answers 19 Views

Diagram, DiagramRibbonBar, DiagramToolBox

This is a migrated thread and some comments may be shown as answers.

Larissa asked on 16 Oct 2017, 01:31 PM

customshape.png

Hello,

I've added a custom shape with an image to the toolbox and can put them into the diagram. With this thread: http://www.telerik.com/forums/create-custom-items 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!

Regards,

Larissa

2 Answers, 1 is accepted

answered on 17 Oct 2017, 07:32 AM

1135385-RadDiagramCustomShape.zip

raddiagram-shape.gif

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.

Regards,
Hristo
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.