Drawing a triangle with relative positions and scale

Question

My teacher is asking me how to draw a triangle for user control in which the positions are relative, and I'm getting stuck using fillPolygon and taking the real size of the window. He gave me a formula but I don't understand how I need to apply it. I will appreciate some help, I'm so lost. Thank you

The teacher's formula: Formula

Heres my wrong code, as you can see the formula is not applied:

using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace MisControles
{
    public partial class ControlVolumen: UserControl
    {

        int ancho;
        int alto;
        Color fondo;
        Color color1;
        Color color2;
        Color color3;

        public ControlVolumen()
        {
            InitializeComponent();
            valor = 0;
            fondo = Color.Empty;
            color1 = Color.Green;
            color2 = Color.Yellow;
            color3 = Color.Red;
        }

        protected override void OnPaint(PaintEventArgs e)
        {
            base.OnPaint(e);
            Graphics g = e.Graphics;
            Brush b = new SolidBrush(fondo);
            Point p0 = new Point(0, 0);
            Point p1 = new Point(this.Width);
            Point p2 = new Point(this.Height);
            g.FillPolygon(fondo, new Point[] {p0,p1,p2});
        }
    }
}

Answer 1

After you created and build the Volume UserControl you can modify the volume bij define the Valor as a property.

public partial class VolumeControl : UserControl
{
    private int valor;
    public int Valor
    {
        get { return valor; }
        set { valor = value; this.Refresh(); }
    }
    public VolumeControl()
    {
        InitializeComponent();
    }
    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);
        var graphics = e.Graphics;
        var brush = new SolidBrush(Color.Blue);
        //calculate width and height based on percentage provided
        int ancho = this.Width * Valor/100;
        int alto = this.Height * Valor/100;

        // Graphic origin is upper-left corner.
        Point p0 = new Point(0, this.Height);
        Point p1 = new Point(ancho, this.Height);
        Point p2 = new Point(ancho, this.Height-alto);
        graphics.FillPolygon(brush, new Point[] { p0, p1, p2 });
    }
}

Now add a new numericUpDownControl and the VolumeControl to a WindowsForm.

Update VolumeControl when numericUpDown changes.

Answer 2

I have given a modified code below and hope it helps. Need to get the percentages for alto and ancho from the user input. The color for the variable fondo need to be set so that figure is visible. Also the points need to be set based on the x,y coordinates for the Point struct.

 public partial class ControlVolumen : UserControl
    {
        double valor = 0.65;  // This need to be fetched from User input
        Color fondo;
        Color color1;
        Color color2;
        Color color3;
        public ControlVolumen()
        {
            InitializeComponent();
            // valor = 0;
            fondo = Color.Blue;
            color1 = Color.Green;
            color2 = Color.Yellow;
            color3 = Color.Red;
        }
        protected override void OnPaint(PaintEventArgs e)
        {
            base.OnPaint(e);
            Graphics g = e.Graphics;
            Brush b = new SolidBrush(fondo);

            //calculate width and height based on percentage provided
            int ancho = (int)((double)this.Width * valor);
            int alto = (int)((double)this.Height * valor);

            Point p0 = new Point(0, alto);
            Point p1 = new Point(ancho, 0);
            Point p2 = new Point(ancho, alto);
            g.FillPolygon(b, new Point[] { p0, p1, p2 });
        }
    }