Link to home
Start Free TrialLog in
Avatar of seahna
seahnaFlag for United States of America

asked on

Mousewheel Zoom C#

I have created a C# Windows Form Application in VS2008. I have created a picturebox and imported a picture. Now I would like to make it so that if you hover over an area of the picture
with the use of the mousewheel scrolling one direction or the other the image will zoom in or out. So if the mouse is in the lower left corner of the image it will zoom in on that area and then zoom out depending upon which way the user scrolls the mousewheel. I just haven't done stuff like this before and not sure how the syntax of the code should work. Any help would be great.
Avatar of pivar
pivar
Flag of Sweden image

Hi,

To catch the mousewheel use the MouseWheel event
http://msdn.microsoft.com/en-us/library/system.windows.forms.control.mousewheel.aspx

To zoom in picturebox you have to resize the image by yourself.

But here's control you could use:
http://www.codeproject.com/KB/miscctrl/ClickAndDragPictureBox.aspx 

/peter
Avatar of seahna

ASKER

I looked at both of those and neither one helped. My requirements are very specific there are no key functions and the one talks about resizing if key F1 is press but it doesn't explain anything about the mouse wheel scroll. The other site I dont understand because it doesnt mention anything about zoom functionality it just talks about testing a mouse event.

What I want is to be able to have an application auto load an image from a file (I already have this part done) once it starts. Then after the image is loaded if the user wants to zoom in to a specific area specified by where the mouse pointer is within the image. The user need only move the mouse wheel in to zoom into that area and out to zoom out. The trick is I want the image to zoom in the mouse point area and re-center itself based upon that area. Kind of like if you were to zoom in on am image in Microsofts Picture Viewer.

Testing-image-2.bmp
Avatar of Bob Learned
It is tough to see how the attached image relates to the question...

Is that a series of PictureBox controls, over the top of another image?  

1) What is the PictureBox.SizeMode property set to?

2) How are you resizing the image?

3) If you attach an event handler to the MouseWheel event:

      this.pictureBox1.MouseWheel += new MouseEventHandler(pictureBox1_MouseWheel);

    then, you can check the number of clicks for the mouse wheel with the e.Delta value.

        private void pictureBox1_MouseWheel(object sender, MouseEventArgs e)
        {
            int clicks = e.Delta;
        }
Avatar of seahna

ASKER

What I would like is the form to auto size to the picturebox and the picturebox to autosize based upon what picture is begin loaded. As far as resizing the image I don't know I have never done anything like this before am which is why I am here asking question.

I just know that my boss wants me to figure out how to zoom in and out of an image with the mouse wheel event and or by clicking a button. Then once zoomed in ho to pan the image. And this is something my company has never messed with before so no one here knows how to do it nor is it something I have done before so I am having to learn.

The image is suppose to show that if the use mouse pointer is in the circled area and scrolls the mouse wheel in this is he area i want it to zoom in on and center it to the window. Sorry I know it isn't the great example wasn't sure what else to do.
ASKER CERTIFIED SOLUTION
Avatar of Bob Learned
Bob Learned
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of seahna

ASKER

Ok but how is this controled by a mousewheel event? So that when a user is hovering over an area of an image it zooms in to that area and centers the imaged based on the area the mouse pointer is in. I guess I want a function similar to how one might zoom in on a map on google maps. If you click the zoom button or scroll the mouse wheel in it zooms to that area so much with each click or scroll click and re-centers itself based upon where the mouse pointer is. Then I need to be able to pan the image so if the image is zoomed in I can left click mouse and drage the image one way or another to see the parts of the image that aren't on the screen now that the image is zoomed in.
That would depend on the zoom factor for each mouse wheel click.  

You would want to keep the original image.  You can adjust the image dimensions, keeping the same aspect ratio, and assign the new image to the PictureBox.  When panning, you can copy a part of the source image, with the given zoom factor, and display the adjusted image on the PictureBox.
Avatar of seahna

ASKER

Ok what you say makes sense but would I do this I have never done anything before messing with graphics.
Avatar of seahna

ASKER

Ok i think I have figured out the code but my problem is the buttons are working but the mousewheel event is not any ideas wha tI have done wrong?
namespace AV4._1_ClientTool.Dialogs1.Display
{
    public partial class Map1 : Form
    {
        private double ZOOMFACTOR = 1.25;	// = 25% smaller or larger
        private int MINMAX = 5;				// 5 times bigger or smaller than the ctrl
 
        public Map1()
        {
            InitializeComponent();
        }
        #region Zooming Methods
 
        /// <summary>
        /// Make the PictureBox dimensions larger to effect the Zoom.
        /// </summary>
        /// <remarks>Maximum 5 times bigger</remarks>
        private void ZoomIn()
        {
            if ((pictureBox1.Width < (MINMAX * panel1.Width)) &&
                (pictureBox1.Height < (MINMAX * panel1.Height)))
            {
                pictureBox1.Width = Convert.ToInt32(pictureBox1.Width * ZOOMFACTOR);
                pictureBox1.Height = Convert.ToInt32(pictureBox1.Height * ZOOMFACTOR);
                pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
            }
        }
 
        /// <summary>
        /// Make the PictureBox dimensions smaller to effect the Zoom.
        /// </summary>
        /// <remarks>Minimum 5 times smaller</remarks>
        private void ZoomOut()
        {
            if ((pictureBox1.Width > (panel1.Width / MINMAX)) &&
                (pictureBox1.Height > (panel1.Height / MINMAX)))
            {
                pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
                pictureBox1.Width = Convert.ToInt32(pictureBox1.Width / ZOOMFACTOR);
                pictureBox1.Height = Convert.ToInt32(pictureBox1.Height / ZOOMFACTOR);
            }
        }
 
        #endregion
 
        #region Mouse events
        private void pictureBox1_MouseWheel(object sender, MouseEventArgs e)
        {
            if (e.Delta < 0)
            {
                ZoomIn();
            }
            else
            {
                ZoomOut();
            }
        }
        private void pictureBox1_MouseEnter(object sender, EventArgs e)
        {
            if (pictureBox1.Focused == false)
            {
                pictureBox1.Focus();
            }
        }
        #endregion
 
        private void toolStripButton1_Click(object sender, EventArgs e)
        {
            ZoomIn();
        }
 
        private void toolStripButton2_Click(object sender, EventArgs e)
        {
            ZoomOut();
        }
    }
}

Open in new window

My first guess, since I can't see for sure, is that you didn't attach the event handler to the event.
Avatar of seahna

ASKER

Ok so how do I do that?
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial