How to: Add Scrollbars for PictureBox

  • 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.

ScrollBar - events

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);
}