# create a triangle shape programatically

Diagram, DiagramRibbonBar, DiagramToolBox
Top achievements
Rank 1
Carolina asked on 28 Jul 2015, 06:42 PM
Hello,
I would create a triangle type figure and add it to RadDiagram control all this programmatically, can anyone help?

I'm using the class RadDiagramShape the problem is not that I put in the ElementShape property, I welcome your comments.

Regards.

## 14 Answers, 1 is accepted

0
Accepted
Dimitar
Telerik team
answered on 29 Jul 2015, 06:44 AM
Hi Carolina,

Thank you for writing.

We do not have a predefined triangle shape, but you can easily create one. All you need to do is to inherit the ElementShape class and return the desired figure path:
`public ``class ``Triangle : ElementShape`
`{`
`    ``public ``override ``GraphicsPath CreatePath(Rectangle bounds)`
`    ``{`
`        ``GraphicsPath path = ``new ``GraphicsPath();`

`        ``Point top = ``new ``Point(bounds.X + bounds.Width / 2, bounds.Y);`
`        ``Point right = ``new ``Point(bounds.X + bounds.Width, bounds.Y + bounds.Height);`
`        ``Point left = ``new ``Point(bounds.X, bounds.Y + bounds.Height);`
`        `
`        ``path.AddPolygon(``new ``Point[]`
`        ``{`
`            ``top,`
`            ``right,`
`            ``left`
`        ``});`
`        ``return ``path;`
`    ``}`
`}`

Then you can create the diagram shape like this:
`private ``void ``radButton1_Click(``object ``sender, EventArgs e)`
`{`
`    ``RadDiagramShape shape1 = ``new ``RadDiagramShape()`
`    ``{`
`        ``Text = ``""``,`
`        ``ElementShape = ``new Triangle(),`
`        ``BackColor = Color.LimeGreen`
`    ``};`
`    ``shape1.Position = ``new ``Telerik.Windows.Diagrams.Core.Point(100, 100);`
`    ``radDiagram1.Items.Add(shape1);`
`}`

Another example for this is available in he following article: Shapes.

Regards,
Dimitar
Telerik

0
Tino
Top achievements
Rank 1
answered on 15 Sep 2017, 06:01 AM

How would we get a filled triangle (or other shape)?

Thanks.

0
Dimitar
Telerik team
answered on 15 Sep 2017, 11:24 AM
Hi Tino,

The triangle is filled on my side (see attached image). What is the result on yours?

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tino
Top achievements
Rank 1
answered on 18 Sep 2017, 04:19 AM

My code is very similar. The result is attached. Edited version of code below.

`class` `UcDropdownDiagramShape : UcDiagramShape`
`{`
`    ``public` `UcDropdownDiagramShape(...``)`
`    ``{`
`        ``base``.ElementShape = ``new` `UcDropdownElementShape(...);`
`        ``base``.ForeColor = ((UcElementShape)``base``.ElementShape).ForeColor;`
`        ``base``.BackColor = ((UcElementShape)``base``.ElementShape).BackColor;`
`    ``}`
`}`

`  ``internal` `class` `UcDiagramShape : RadDiagramShape`
`   ``{`
```        LightVisualElement _label = new LightVisualElement();         LightVisualElement _labelRect = new LightVisualElement();```
`...`
`       ``protected` `override` `void` `CreateChildElements()`
`       ``{`
`           ``base``.CreateChildElements();`
`           ``_label.Text = ``""``;`
`           ``_label.PositionOffset = ``new` `SizeF(0, 0);`
`           ``DiagramShapeElement.Children.Add(_label);`
`           ``DiagramShapeElement.Children.Add( _labelRect);`
`       ``}`

`    ``class` `UcDropdownElementShape : UcFieldElementShape`
`    ``{`
`        ``public` `override` `GraphicsPath CreatePath(Rectangle bounds)`
`        ``{`
`            ``var path = ``base``.CreatePath(bounds);`

`            ``int` `iTriWidth = 6;`
`            ``int` `iTriHeight = 4;`
`            ``int` `ypos = bounds.Y + (Element.ScrnH - iTriHeight) / 2 + 1;`
`            ``Point[] points = `
`                ``{ ``new` `Point( bounds.X + Element.ScrnW - (iTriWidth + 5), ypos ),`
`                ``new` `Point( bounds.X + Element.ScrnW - 4, ypos),`
`                ``new` `Point( bounds.X + Element.ScrnW - 5 - iTriWidth / 2, ypos + iTriHeight)};`

`            ``path.AddPolygon( points);`

`            ``return` `path;`
`        ``}`

`...`
`    ``}`

0
Tino
Top achievements
Rank 1
answered on 18 Sep 2017, 04:22 AM

I left out

`public` `class` `UcFieldElementShape : UcElementShape`
`   ``{...}`

`public` `abstract` `class` `UcElementShape : ElementShape`
`   ``{ ... }`
0
Dimitar
Telerik team
answered on 18 Sep 2017, 07:52 AM
Hi Tino,

Using the provided code I have created and attached a test project where you can see that the background is applied. Could you please check the project and let me know what I need to change in order to reproduce your case?

Perhaps it would be better to open a new support ticket and attach a modified version of the project where your case is reproduced.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tino
Top achievements
Rank 1
answered on 18 Sep 2017, 11:50 PM

Thanks. Just change this CreatePath method so that the shapes overlap. However, I notice also our stack traces are different when this CreatePath is being called. See below.

`class` `UcDropdownElementShape : UcFieldElementShape`
`{`
`    ``public` `override` `GraphicsPath CreatePath(Rectangle bounds)`
`    ``{`
`        ``var path = ``base``.CreatePath(bounds);`

`        ``int` `iTriWidth = 16;`
`        ``int` `iTriHeight = 14;`
`        ``int` `ypos = bounds.Y + (Element.ScrnH - iTriHeight) / 2 + 10;`
`        ``Point[] points = `
`        ``{ ``new` `Point( bounds.X  - 80 + Element.ScrnW - (iTriWidth + 5), ypos ),`
`            ``new` `Point( bounds.X - 80  + Element.ScrnW - 4, ypos),`
`            ``new` `Point( bounds.X - 80  + Element.ScrnW - 5 - iTriWidth / 2, ypos + iTriHeight)};`

`        ``path.AddPolygon(points);`
`        ``//path.CloseFigure();`

`        ``return` `path;`
`    ``}`

Mine:

`>   UCStudio.exe!UCStudio.UcDropdownElementShape.CreatePath(System.Drawing.Rectangle bounds) Line 32    C#`
`    ``Telerik.WinControls.RadDiagram.dll!Telerik.WinControls.UI.Diagrams.UIElement.HitTest(System.Drawing.Point point)    Unknown`
`    ``Telerik.WinControls.dll!Telerik.WinControls.RadElementTree.GetElementAtPoint(Telerik.WinControls.RadElement parent, System.Drawing.Point point, System.Collections.Generic.List<``Telerik.WinControls.RadElement``> foundElements, System.Predicate<``Telerik.WinControls.RadElement``> predicate)  Unknown`
`    ``Telerik.WinControls.dll!Telerik.WinControls.RadElementTree.GetElementAtPoint(Telerik.WinControls.RadElement parent, System.Drawing.Point point, System.Collections.Generic.List<``Telerik.WinControls.RadElement``> foundElements, System.Predicate<``Telerik.WinControls.RadElement``> predicate)  Unknown`

Yours:

`>   _957043.exe!_957043.UcDropdownElementShape.CreatePath(System.Drawing.Rectangle bounds) Line 69  C#`
`Telerik.WinControls.dll!Telerik.WinControls.ElementShape.CreatePath(System.Drawing.RectangleF bounds)   Unknown`
`Telerik.WinControls.dll!Telerik.WinControls.Primitives.FillPrimitiveImpl.PaintFill(Telerik.WinControls.Paint.IGraphics graphics, float angle, System.Drawing.SizeF scale, System.Drawing.RectangleF paintRect)  Unknown`
`Telerik.WinControls.UI.dll!Telerik.WinControls.UI.UIItemBase.PaintFill(Telerik.WinControls.Paint.IGraphics graphics, float angle, System.Drawing.SizeF scale, System.Drawing.RectangleF prefferedRectangle) Unknown`

0
Tino
Top achievements
Rank 1
answered on 19 Sep 2017, 12:00 AM

Also, I need the shapes to be different fore/back colors. See attached.

PS: Additional to the post above, it seems the overlaid triangle shape is causing an 'opening' in the polygon it overlays, so the background (e.g. grid or other shape) is showing through.

0
Dimitar
Telerik team
answered on 19 Sep 2017, 08:31 AM
Hello Tino,

The Element property is not available on my side. Could you please update my test project so it reproduces this and attach it to a new support thread. This will allow me to properly investigate the case and provide you with a solution.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tino
Top achievements
Rank 1
answered on 20 Sep 2017, 12:49 AM

These were just some fixed values. Thanks.

public static class Element
{
public static int ScrnH = 15;
public static int ScrnW = 150;
}

0
Dimitar
Telerik team
answered on 20 Sep 2017, 10:59 AM
Hi Tino,

This creates a small filled tringle. I have attached an updated version of my test project.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tino
Top achievements
Rank 1
answered on 21 Sep 2017, 06:36 AM

Replace the commented out line, with the one below it. Everything else is the same. Thanks.

`public` `override` `GraphicsPath CreatePath(Rectangle bounds)`
`{`
`    ``//var path = new GraphicsPath(FillMode.Alternate);`
`    ``var path = ``base``.CreatePath(bounds);`
0
Dimitar
Telerik team
answered on 25 Sep 2017, 09:47 AM
Hello Tino,

If the parent path is used the triangle will be excluded from the shape since it is within the shape bounds, this is the expected result. How do you expect this shape to look?

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
asghar
Top achievements
Rank 1
answered on 05 Jan 2019, 12:39 PM

hi

i want show(×).

Tags
Diagram, DiagramRibbonBar, DiagramToolBox
Carolina
Top achievements
Rank 1