How to resize the paint event drawn rectangle when resizing the user control it self?

Question

The resizing was working fine with the OnResize event I could drag the control int form1 designer and resize it and the drawn gray bar inside the pictureBox was resized fine with the control it self.

In the user control designer I added a pictureBox on it :

Then in the code I'm drawing a bar in the middle of the pictureBox :

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

namespace Extract
{
    public partial class Slider : UserControl
    {
        public float Height;
        public float Min = 0.0f;
        public float Max = 1.0f;

        private float defaultValue = 0.1f;

        public Slider()
        {
            InitializeComponent();            
        }

        private void sliderControl_Paint(object sender, PaintEventArgs e)
        {
            float bar_size = 0.45f;
            float x = Bar(defaultValue);
            int y = (int)(sliderControl.Height * bar_size);

            e.Graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
            e.Graphics.FillRectangle(Brushes.DimGray, 0, y, sliderControl.Width, y / 2);
        }

        private float Bar(float value)
        {
            return (sliderControl.Width - 24) * (value - Min) / (float)(Max - Min);
        }

        protected override void OnResize(EventArgs e)
        {
            base.OnResize(e);

            MaintainPictureBoxSize();
        }

        private void MaintainPictureBoxSize()
        {
            sliderControl.SizeMode = PictureBoxSizeMode.Normal;

            sliderControl.Location = new Point();
            sliderControl.Size = new Size();

            var clientSize = this.ClientSize;

            if (sliderControl.Image == null)
                sliderControl.Size = clientSize;
            else
            {
                Size s = sliderControl.Image.Size;
                sliderControl.Size = new Size(
                    clientSize.Width > s.Width ? clientSize.Width : s.Width,
                    clientSize.Height > s.Height ? clientSize.Height : s.Height);
            }
        }
    }
}

And I can drag the control into form1 designer and in the form1 designer when I resize the control the drawn gray bar in the pictureBox(sliderControl) is resizing with the control it self fine :

For example :

The problem is when I added to the code some more drawn rectangles and ellipses on the gray bar :

private void sliderControl_Paint(object sender, PaintEventArgs e)
        {
            float bar_size = 0.45f;
            float x = Bar(defaultValue);
            int y = (int)(sliderControl.Height * bar_size);

            e.Graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
            e.Graphics.FillRectangle(Brushes.DimGray, 0, y, sliderControl.Width, y / 2);
            e.Graphics.FillRectangle(Brushes.Red, 0, y, x, sliderControl.Height - 2 * y);

            using (Pen pen = new Pen(Color.Black, 8))
            {
                e.Graphics.DrawEllipse(pen, x + 4, y, sliderControl.Height / 2, sliderControl.Height / 2);
                e.Graphics.FillEllipse(Brushes.Red, x + 4, y, sliderControl.Height / 2, sliderControl.Height / 2);
            }

            using (Pen pen = new Pen(Color.White, 5))
            {
                e.Graphics.DrawEllipse(pen, x + 4, y, sliderControl.Height / 2, sliderControl.Height / 2);
            }
        }

Now when I drag the control into form1 designer the red circle and the red line are not fitting the gray line. In the end this red circle and red line will be used as slider like in trackBar to be moved from side to side.

Only if I resize the user control it self on form1 designer to be very very small the red circle and the red line almost fit the gray line :

The problems are :

1. How to fit the red line and red circle to the gray line ?

2. How to fit the red circle and red line to be resized automatic like the gray line is when resizing the user control after dragging it to form1 designer ?

Answer 1

Shouldn't you use the same y values for the red bar as for the gray bar to make them match vertically?

e.Graphics.FillRectangle(Brushes.DimGray, 0, y, sliderControl.Width, y / 2);
e.Graphics.FillRectangle(Brushes.Red,     0, y,        x           , y / 2);

and use this method to draw the circle. You can specify the center coordinates (x, y + y / 4) and a radius, e.g y / 2. This is easier than specifying the bounding rectangle.