Telerik Forums / UI for WinForms
This is a migrated thread and some comments may be shown as answers.

create a triangle shape programatically

14 Answers 1561 Views
Diagram, DiagramRibbonBar, DiagramToolBox
This is a migrated thread and some comments may be shown as answers.
Carolina
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

Sort by
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.

Please let me know if there is something else I can help you with. 
 
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
2017-09-15-1422.png
Hi Tino,

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

I am looking forward to your reply.

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
capture.png

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
957043.zip
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. 

I am looking forward to your reply.

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
capture2.png

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.

Thank you in advance for your patience and cooperation. 

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
957043.zip
Hi Tino,

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

I am looking forward to your reply.

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?

I am looking forward to your reply.
 
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
Asked by
Carolina
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Tino
Top achievements
Rank 1
asghar
Top achievements
Rank 1
Share this question
or