Partager via

Magnify your pictures using a PictureBox so that you can zoom with the Mouse Wheel

  • Article

Today’s digital cameras take pictures with much higher resolution than many computer screens. My Canon PowerShot SD800 IS camera takes pictures at 3072 x 2204 resolution.

 

One of my laptops died recently, and I noticed that local laptop retailers have machines with 1280 X 1024 resolution. I much prefer a higher resolution display, so I ordered a customizable Dell Inspiron 1525 with 1680 x 1050.

(I’ve been ordering computers from Dell for over 20 years, back in the days when it was called PC’s Limited. Why does Dell distinguish between business/government/home laptops?)

 

I was playing around with some photos using a PictureBox control, and I wanted to add a feature that would allow click/zoom using the mouse wheel to designate a point to magnify.

 

It was pretty easy to create my own class MyPictureBox which inherits from PictureBox and handles the MouseWheel and zooming.

 

Below are C# and VB versions. If I get enough requests, maybe I’ll make a Fox version (although I like this Fox version of zooming: Enable crop and zooming in on your digital photograph display form)

 

Start Visual Studio 2008 (I think these should work in VS2005)

File->New->Project->VB/C#->Windows Application.

 

View->Code, then paste the VB/C# code below, hit F5

 

Move the mouse to designate a zoom anchor point, then mouse wheel to zoom in/out

 

If you switch back to the form designer, the ToolBox has the MyPictureBox control on it, which you can drag/drop onto a form.

 

If you already have your own form that uses a PictureBox or several, you can avoid manually changing all the instances by carefully editing the Form1.Designer.vb file to replace the type with MyPictureBox (make a backup first).

 

As an exercise, try extending this feature by adding the ability to change the anchor point while zoomed or pan the zoomed picture.

 

Some VB/C# coding issues:

· semicolons

· capitalization

· intermediate arithmetic rounding results

· event handling

 

See also:

Enable crop and zooming in on your digital photograph display form

Create your own media browser: Display your pictures, music, movies in a XAML tooltip

 

<VB Code>

 

Public Class Form1

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

        Me.Left = 0

        Me.Top = 0

        Me.Size = My.Computer.Screen.WorkingArea.Size

        Dim oPict = New MyPictureBox

        oPict.Size = Me.Size

        oPict.SizeMode = PictureBoxSizeMode.StretchImage

        oPict.Image = New Bitmap("d:\kids.jpg") ' path to some picture

        Me.Controls.Add(oPict)

        Me.ActiveControl = oPict

    End Sub

End Class

Public Class MyPictureBox

    Inherits PictureBox

    Private zmLevel As Integer = 1

    Private zmPt As Point

    Overloads Property Image() As Image ' we want to hook when client's set the image to reset the zoom level to unzoomed

        Get

            Return MyBase.Image

        End Get

        Set(ByVal value As Image)

            zmLevel = 1 ' reinit

            MyBase.Image = value

        End Set

    End Property

    Protected Overrides Sub OnPaint(ByVal pe As System.Windows.Forms.PaintEventArgs)

        'MyBase.OnPaint(pe) ' don't call baseclass to paint

        If Me.Image IsNot Nothing Then

            Dim loc As Point

            Dim sz As Size

            If zmLevel <> 1 Then

                sz = New Size(Me.Image.Width / zmLevel, Me.Image.Height / zmLevel)

                ' center on zmPt

                loc = New Point(Me.Image.Width * (zmPt.X / Me.ClientRectangle.Width) - sz.Width / 2, _

                                Me.Image.Height * (zmPt.Y / Me.ClientRectangle.Height) - sz.Height / 2) '

            Else

                loc = New Point(0, 0) ' no zoom: we want the entire source picture

                sz = Me.Image.Size

            End If

            Dim rectSrc = New Rectangle(loc, sz)

            ' now draw the rect of the source picture in the entire client rect of MyPictureBox

            pe.Graphics.DrawImage(Me.Image, Me.ClientRectangle, rectSrc, GraphicsUnit.Pixel)

        End If

    End Sub

    Sub PictureBox_MouseWheel(ByVal sender As Object, ByVal e As MouseEventArgs) Handles Me.MouseWheel

        If Me.zmLevel = 1 Then ' can only anchor when unzoomed

            Me.zmPt = New Point(e.X, e.Y)

        End If

        If e.Delta > 0 Then

            If zmLevel < 20 Then

                zmLevel += 1

            End If

        Else

            If e.Delta < 1 Then

                If zmLevel > 1 Then

                    zmLevel -= 1

                End If

            End If

        End If

        Me.Invalidate() ' queue msg to repaint

    End Sub

End Class

</VB Code>

<C# Code>

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Linq;

using System.Text;

using System.Windows.Forms;

namespace WindowsFormsApplication1

{

    public partial class Form1 : Form

    {

        public Form1()

        {

            InitializeComponent();

            this.Left = 0;

            this.Top = 0;

            this.Size = Screen.PrimaryScreen.WorkingArea.Size;

            var oPict = new MyPictureBox();

            oPict.Size = this.Size;

            oPict.SizeMode = PictureBoxSizeMode.StretchImage;

            oPict.Image = new Bitmap("d:\\kids.jpg");

            this.Controls.Add(oPict);

            this.ActiveControl = oPict;

        }

    }

}

public class MyPictureBox : PictureBox

{

    private int zmLevel = 1;

    private Point zmPt;

    public MyPictureBox()

    {

        this.MouseWheel += new MouseEventHandler(MyPictureBox_MouseWheel);

    }

    void MyPictureBox_MouseWheel(object sender, MouseEventArgs e)

    {

        if (this.zmLevel == 1)

        {

            this.zmPt = new Point(e.X, e.Y);

        }

        if (e.Delta > 0)

        {

            if (zmLevel < 20)

            {

                zmLevel += 1;

            }

        }

        else

        {

            if (e.Delta < 1)

            {

                if (zmLevel > 1)

                {

                    zmLevel -= 1;

                }

            }

        }

        this.Invalidate();

    }

    new public Image Image // overrides

    {

        get

        {

            return base.Image;

        }

        set

        {

            zmLevel = 1;

            base.Image = value;

        }

    }

    protected override void OnPaint(PaintEventArgs pe)

    {

        //base.OnPaint(pe);

        if (this.Image != null)

        {

            Point loc;

            Size sz;

            if (zmLevel != 1)

            {

                sz = new Size(this.Image.Width / zmLevel, this.Image.Height / zmLevel);

                // center on zmPt. Casts are needed so integer divide doesn't occur (intermediate double result)

                loc = new Point((int)(this.Image.Width * (zmPt.X / (double)this.ClientRectangle.Width)) - sz.Width / 2,

                                 (int)(this.Image.Height * (zmPt.Y / (double)this.ClientRectangle.Height)) - sz.Height / 2);

            }

            else

            {

                loc = new Point(0, 0);

                sz = this.Image.Size;

            }

            Rectangle rectSrc = new Rectangle(loc, sz);

            // now draw the rect of the source picture in the entire client rect of MyPictureBox

            pe.Graphics.DrawImage(this.Image, this.ClientRectangle, rectSrc, GraphicsUnit.Pixel);

        }

    }

}

</C# Code>

Comments