Create new account I forgot my password    

Emulate Image Zooming in a PictureBox Control at Runtime
Rating: 21 user(s) have rated this article Average rating: 4.8
Posted by: Suprotim Agarwal, on 9/1/2008, in category "Windows Forms 2.0"
Views: this article has been read 22439 times
Abstract: Zooming images in a PictureBox control is not something that comes out of the box. However with a little bit of code, basic emulation of zoom in and zoom out functionality can be achieved quiet easily. In this article, we will explore how to emulate zoom-in and zoom-out, of an image kept in the PictureBox control.

Emulate Image Zooming in a PictureBox Control at Runtime
 
Zooming images in a PictureBox control is not something that comes out of the box. However with a little bit of code, basic emulation of zoom in and zoom out functionality can be achieved quiet easily. In this article, we will explore how to emulate zoom in and zoom out, on an image kept in the PictureBox control. Please follow these steps:
Step 1: Open Visual Studio > File > New > Project. In the Project Types pane, choose the language of your choice (Visual C# or Visual Basic). In the Templates pane, choose Windows Application. Choose a name and location for the project and click OK.
Step 2: Drag and drop the PictureBox(picBox) and the TrackBar(zoomSlider) controls on to the form. We will be using the Trackbar control to scroll and configure the zoom value.
Now declare a class level variable of the type Image. Doing this will help us re-apply the transformations (zoom in zoom out) on the original image rather than the already transformed image.
C#
private Image imgOriginal;
VB.NET
Private imgOriginal As Image
In the Form1_Load, set the following properties on the two controls. Here we set the image location using the Image.FromFile. You can also use the Resources class to set images in your application:
C#
private void Form1_Load(object sender, EventArgs e)
{           
    // set image location
    imgOriginal = Image.FromFile(@"C:\New Folder\picture1.jpg");
    picBox.Image = imgOriginal;
 
    // set Picture Box Attributes
    picBox.BackgroundImageLayout = ImageLayout.Stretch;
  
    // set Slider Attributes
    zoomSlider.Minimum = 1;
    zoomSlider.Maximum = 5;
    zoomSlider.SmallChange = 1;
    zoomSlider.LargeChange = 1;
    zoomSlider.UseWaitCursor = false;
 
    // reduce flickering
    this.DoubleBuffered = true;
}
VB.NET
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
      ' set image location
      imgOriginal = Image.FromFile("C:\New Folder\picture1.jpg")
      picBox.Image = imgOriginal
 
      ' set Picture Box Attributes
      picBox.BackgroundImageLayout = ImageLayout.Stretch
 
      ' set Slider Attributes
      zoomSlider.Minimum = 1
      zoomSlider.Maximum = 5
      zoomSlider.SmallChange = 1
      zoomSlider.LargeChange = 1
      zoomSlider.UseWaitCursor = False
 
      ' reduce flickering
      Me.DoubleBuffered = True
End Sub
 
Step 3: Let us now create our zoom functionality.
C#
public Image PictureBoxZoom(Image img, Size size)
{
    Bitmap bm = new Bitmap(img, Convert.ToInt32(img.Width * size.Width), Convert.ToInt32(img.Height * size.Height));
    Graphics grap = Graphics.FromImage(bm);
    grap.InterpolationMode = InterpolationMode.HighQualityBicubic;
    return bm;
}
VB.NET
Public Function PictureBoxZoom(ByVal img As Image, ByVal size As Size) As Image
      Dim bm As Bitmap = New Bitmap(img, Convert.ToInt32(img.Width * size.Width), Convert.ToInt32(img.Height * size.Height))
      Dim grap As Graphics = Graphics.FromImage(bm)
      grap.InterpolationMode = InterpolationMode.HighQualityBicubic
      Return bm
End Function
 
In the code above, we create a new instance of the Bitmap class using the image passed to the function. This image is scaled to the specific size and is taken into a Graphics object where the image is prefiltered using InterpolationMode.HighQualityBicubic to ensure high quality transformed images. The function then returns the transformed image back to the caller.
Step 4: The final step is to register the ‘Scroll’ event of the TrackBar(zoomSlider) control and call the zoom function as shown below:
C#
private void zoomSlider_Scroll(object sender, EventArgs e)
{
    if (zoomSlider.Value > 0)
    {
        picBox.Image = null;
        picBox.Image = PictureBoxZoom(imgOriginal, new Size(zoomSlider.Value, zoomSlider.Value));
    }
}
VB.NET
Private Sub zoomSlider_Scroll(ByVal sender As Object, ByVal e As EventArgs)
      If zoomSlider.Value > 0 Then
            picBox.Image = Nothing
            picBox.Image = PictureBoxZoom(imgOriginal, New Size(zoomSlider.Value, zoomSlider.Value))
      End If
End Sub
That’s it. With a few lines of code, you can emulate zoom functionality in your picturebox and use it in your applications. I hope you liked the article and I thank you for viewing it.

If you liked the article,  Subscribe to my RSS Feed. 
 









Page copy protected against web site content infringement by Copyscape


How would you rate this article?

User Feedback
Comment posted by Dmitriy Melnik on Friday, July 24, 2009 2:56 AM
The article helped me a lot. Thanks!
Comment posted by excellent article on Friday, September 11, 2009 4:27 PM
a pleasure to read.
Comment posted by neodean on Saturday, January 16, 2010 1:50 AM
hello man .
This is neodean
it is not working... no effect on while sliding can you please suggest me .

Please soon
Thanks in advance...
Comment posted by Suprotim Agarwal on Sunday, January 17, 2010 2:54 AM
neodean: The code works just fine. Just upload your app to a server where I can download it and i will take a look at it in a couple of days
Comment posted by Taeven on Monday, March 22, 2010 3:42 PM
The code works if you add the handler to the zoomSlider_Scroll method
Comment posted by statlidi on Thursday, April 01, 2010 7:06 AM
Hi,
I tried the code with a "4623x6041" image and I've got "ArgumentException was unhandled" error at the line:
Bitmap bm = new Bitmap(img, Convert.ToInt32(img.Width * size.Width), Convert.ToInt32(img.Height * size.Height));
I think the code cannot handle big sized images...    
Comment posted by SIBR on Friday, April 16, 2010 4:11 AM
Tnx buddy
Its working ....................... :D
Comment posted by ateendra on Thursday, July 22, 2010 3:23 PM
hi, i am trying to implement the same logice in VS 2008 c++ environment, i am not able to identify the Size data type used as function parameter!! please advice how to get it or another way to it!!

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel

NEWSLETTER