How to implement a simple scrollbar

See more:

C#

game

Scrollbar

Hello!

I'm making a simple UI system for a small game that is going to be made using Windows Forms and drawn on a PictureBox.

At the moment, i'm having some difficulty to implement a Scrollbar and need some help to solve two major problems as described below:

. Calculating the "Value" property of the Scrollbar when the current position of the Thumb on the Track is changed (maybe using the ThumbStep?).

. Calculating the "Minimum" and "Maximum" properties.

Some specifications:

. The "Value" property is used to scroll the Content.

. I want the "Value" property to behave similar to the one in Windows Forms as described in this link: ScrollBar.Value Property (System.Windows.Forms) | Microsoft Docs[^]

. The "Minimum" and "Maximum" should also behave similar to the ones in Windows Forms as described in these links:
ScrollBar.Minimum Property (System.Windows.Forms) | Microsoft Docs[^]
ScrollBar.Maximum Property (System.Windows.Forms) | Microsoft Docs[^]

. The UI is using Rectangles, where you can find in this link: Rectangle Struct (System.Drawing) | Microsoft Docs[^]

Below is part of the code that i currently have, please, look at the commented blocks.

public int Minimum  { get; set; }
public int Maximum  { get; set; }

public int ThumbStep { get; set; }
public int Value     { get; set; }

public void Update()
{
	// Calculate the Scrollbar Thumb height:
	var viewable_ratio = ViewportHeight / ContentHeight;
	var scrollbar_area = ViewportHeight - ( ArrowHeight * 2 );
	
	this.ThumbHeight = scrollbar_area * viewable_ratio;
	
	// Calculate the Scrollbar Thumb step:
	var track_space = ContentHeight  - ViewportHeight;
	var thumb_space = ViewportHeight - ThumbHeight;
	
	this.ThumbStep = track_space / thumb_space;
	
	// TODO: Calculate the "Minimum" and "Maximum" values.
	this.Minimum = ???
	this.Maximum = ???
	
	Point mouse = Input.MousePosition();
	
	if(Thumb.Rectangle.Contains(mouse) && Input.MouseDown(0))
	{
		int x = Thumb.Position.x;
		int y = ( mouse.y - Thumb.Position.y );
		
		Thumb.Position = new Point(x, y);
		
		if(Thumb.Position.y < Minimum) Thumb.Position.y = Minimum;
		if(Thumb.Position.y > Maximum) Thumb.Position.y = Maximum;
		
		// TODO: Set the "Value" property to the correct value when the Thumb is moved.
		this.Value = ???
        
        content.Y += this.value;
	}
}

Thanks in advance!

What I have tried:

I found this code on the internet and edited it to fit my project, but i'm having issues
to calculate these properties.

I'll test the code in DotNetFiddle when i find a answer to both of the problems as i don't have a PC at the moment.