Visual Basic Concepts

Slider Scenario 1: Resize a Graph Control Proportionally

See Also

One possible use of the Slider is to resize a PictureBox control on a form while keeping its proportions.

The code below uses the following objects:

To resize a PictureBox control with a Slider control

  1. Create two global variables for the Height and Width properties.

  2. Use the Form’s Load event to set global variables and the Max property.

  3. Resize the height and width of the PictureBox through the Scroll event.

Create Two Global Variables for Height and Width

One simple formula for retaining proportions would be:

picPhoto.Height = sldResize.Value * _
OriginalHeight / 100
picPhoto.Width = sldResize.Value * OriginalWidth / 100

This formula depends on two constant values: the original height and width of the PictureBox control. These values should be set when the form is loaded, and should be available as global variables, as shown below:

Option Explicit
Private gHeight As Long
Private gWidth As Long

Use the Form Load Event to Set Global Values and the Max Property

To set the values for the global variables, use the Form object's Load event. It's also more efficient to calculate the values of OriginalHeight/100 and OriginalWidth/100 once, and store those values in global variables, as shown below:

gHeight = picPhoto.Height / 100
gWidth = picPhoto.Width / 100

The Load event can also be used to set the Max property of the Slider control. The Max property specifies the maximum value the Slider will accommodate. To keep the math simple, set the value of the Max property to 100:

sldResize.Max = 100

The complete code below, then, sets the global variables and the Max property in the Form object's Load event:

Private Sub Form_Load()
   gHeight = picPhoto.Height/100
   gWidth = picPhoto.Width/100
   sldResize.Max = 100
End Sub

Resize the Height and Width of the PictureBox through the Scroll Event

The Slider control has a Scroll event that occurs whenever the Slider's thumb is moved by the user. Use this event when you wish to continually process the Value property of the Slider control. In the present scenario, this means the size of the PictureBox will be dynamically changed as the thumb is moved. (If you don't want the user to be distracted by the dynamically changing control, you should use the Click event. The Click event updates the size of the control after the thumb has been released.) The code below shows the formula within the Scroll event:

Private Sub sldResize_Scroll()
   picPhoto.Height = sldResize.Value * gHeight
   picPhoto.Width = sldResize.Value * gWidth
End Sub

The Complete Code

The complete code is shown below:

Private gHeight As Long
Private gWidth As Long

Private Sub Form_Load()
   gHeight = picPhoto.Height / 100
   gWidth = picPhoto.Width / 100
   sldResize.Max = 100
End Sub

Private Sub sldResize_Scroll()
   picPhoto.Height = sldResize.Value * gHeight
   picPhoto.Width = sldResize.Value * gWidth
End Sub