Emulate Image Zooming in a PictureBox Control at Runtime
Posted by: Suprotim Agarwal ,
on 9/1/2008,
in
Category WinForms & WinRT
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.
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of
DotNetCurry,
DNC Magazine for Developers,
SQLServerCurry and
DevCurry. He has also authored a couple of books
51 Recipes using jQuery with ASP.NET Controls and
The Absolutely Awesome jQuery CookBook.
Suprotim received the prestigious Microsoft MVP award for 17 consecutive years, until he resigned from the program in 2025. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.
Get in touch with him on Twitter @suprotimagarwal or at LinkedIn