# create a triangle shape programatically

1. ##### Carolina
3 posts
Member since:
Oct 2012

Posted 28 Jul 2015 Link to this post

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.
##### Dimitar
1826 posts

Posted 29 Jul 2015 Link to this post

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

3. ##### Tino
24 posts
Member since:
Jul 2017

Posted 5 days and 23 hours ago in reply to Dimitar Link to this post

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

Thanks.

4. ##### Dimitar
1826 posts

Posted 5 days and 17 hours ago Link to this post

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.
5. ##### Tino
24 posts
Member since:
Jul 2017

Posted 3 days ago in reply to Dimitar Link to this post

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;`
`        ``}`

`...`
`    ``}`

6. ##### Tino
24 posts
Member since:
Jul 2017

Posted 3 days ago in reply to Tino Link to this post

I left out

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

`public` `abstract` `class` `UcElementShape : ElementShape`
`   ``{ ... }`
7. ##### Dimitar
1826 posts

Posted 2 days and 21 hours ago Link to this post

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.
8. ##### Tino
24 posts
Member since:
Jul 2017

Posted 2 days and 5 hours ago in reply to Dimitar Link to this post

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`

9. ##### Tino
24 posts
Member since:
Jul 2017

Posted 2 days and 5 hours ago in reply to Tino Link to this post

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.

10. ##### Dimitar
1826 posts

Posted 1 day and 20 hours ago Link to this post

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.
11. ##### Tino
24 posts
Member since:
Jul 2017

Posted 1 day and 4 hours ago in reply to Dimitar Link to this post

These were just some fixed values. Thanks.

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

12. ##### Dimitar
1826 posts

Posted 18 hours ago Link to this post

Hi Tino,

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