How to: Add Scrollbars for PictureBox

Oct 25, 2019
2 minutes to read

The following sample code uses both HScrollBar and VScrollBar controls to provide easy navigation through an image displayed within the pictureBox control if image dimensions extend the dimensions of the picture box. The Paint picture box event is handled to draw a specific image region specified by the position of the scroll bar to the screen. The x and y variables correspondingly represent the x- and y-coordinate of the upper-left corner of the portion of the image to draw in the picture box. The ScrollBarBase.Scroll events are used, in turn, to define the coordinates of the upper-left corner of the image portion according to scroll bar position after the user has scrolled either one or both scroll bars.

C#
VB.NET

csharp

using DevExpress.XtraEditors;
private void Form1_Load(object sender, System.EventArgs e) {
   hScrollBar1.Width = pictureBox1.Width;
   hScrollBar1.Left = pictureBox1.Left;
   hScrollBar1.Top = pictureBox1.Bottom;
   hScrollBar1.Maximum = pictureBox1.Image.Width - pictureBox1.Width;
   vScrollBar1.Height = pictureBox1.Height;
   vScrollBar1.Left = pictureBox1.Left + pictureBox1.Width;
   vScrollBar1.Top = pictureBox1.Top;
   vScrollBar1.Maximum = pictureBox1.Image.Height - pictureBox1.Height;
}

int x = 0;
private void hScrollBar1_Scroll(object sender, System.Windows.Forms.ScrollEventArgs e) {
   x = (sender as HScrollBar).Value;
   pictureBox1.Refresh();
}

int y = 0;
private void vScrollBar1_Scroll(object sender, System.Windows.Forms.ScrollEventArgs e) {
   y = (sender as VScrollBar).Value;
   pictureBox1.Refresh();
}
private void pictureBox1_Paint(object sender, System.Windows.Forms.PaintEventArgs e) {
   pBox = sender as PictureBox;
   e.Graphics.DrawImage(pBox.Image, e.ClipRectangle, x, y, e.ClipRectangle.Width, 
     e.ClipRectangle.Height, GraphicsUnit.Pixel);
}

Imports DevExpress.XtraEditors
Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs)
   hScrollBar1.Width = pictureBox1.Width
   hScrollBar1.Left = pictureBox1.Left
   hScrollBar1.Top = pictureBox1.Bottom
   hScrollBar1.Maximum = pictureBox1.Image.Width - pictureBox1.Width
   vScrollBar1.Height = pictureBox1.Height
   vScrollBar1.Left = pictureBox1.Left + pictureBox1.Width
   vScrollBar1.Top = pictureBox1.Top
   vScrollBar1.Maximum = pictureBox1.Image.Height - pictureBox1.Height
End Sub

Private x As Integer = 0
Private Sub hScrollBar1_Scroll(ByVal sender As Object, ByVal e As System.Windows.Forms.ScrollEventArgs)
   x = (TryCast(sender, HScrollBar)).Value
   pictureBox1.Refresh()
End Sub

Private y As Integer = 0
Private Sub vScrollBar1_Scroll(ByVal sender As Object, ByVal e As System.Windows.Forms.ScrollEventArgs)
   y = (TryCast(sender, VScrollBar)).Value
   pictureBox1.Refresh()
End Sub

Private Sub pictureBox1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs)
   pBox = TryCast(sender, PictureBox)
   e.Graphics.DrawImage(pBox.Image, e.ClipRectangle, x, y, e.ClipRectangle.Width, e.ClipRectangle.Height, GraphicsUnit.Pixel)
End Sub