none
MouseWheel Zoom RRS feed

  • Question

  • Ok this is what I am trying to do. I am new to C# and don't know much about the language I am also new to messing with graphics. So please excuse me if I am not sure exactly what to ask.

    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.

     

    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 Microsoft’s Picture Viewer or 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 drag 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.

    • Moved by CoolDadTx Wednesday, November 18, 2009 9:49 PM Not IDE related (From:Visual C# IDE)
    Wednesday, November 18, 2009 4:23 PM

Answers

  • Hi,

    Here is my code.

    Could you try this.

    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 frmMain : Form
        {
            public frmMain()
            {
                InitializeComponent();
            }
    
            private void frmMain_Load(object sender, EventArgs e)
            {
                pictureBox1.Picture=@"C:\users\tamer\desktop\2.jpg";
            }
    
        
    
            private void pictureBox1_MouseHover(object sender, EventArgs e)
            {
                
            }
        }
        namespace PictureBoxCtrl
        {
            /// <summary>
            /// Summary for the PictureBox Ctrl
            /// </summary>
            public class PictureBox : System.Windows.Forms.UserControl
            {
                #region Members
    
                private System.Windows.Forms.PictureBox PicBox;
                private System.Windows.Forms.Panel OuterPanel;
                private System.ComponentModel.Container components = null;
                private string m_sPicName = "";
    
                #endregion
    
                #region Constants
    
                private double ZOOMFACTOR = 1.25;	// = 25% smaller or larger
                private int MINMAX = 5;				// 5 times bigger or smaller than the ctrl
    
                #endregion
    
                #region Designer generated code
    
                private void InitializeComponent()
                {
                    this.PicBox = new System.Windows.Forms.PictureBox();
                    this.OuterPanel = new System.Windows.Forms.Panel();
                    this.OuterPanel.SuspendLayout();
                    this.SuspendLayout();
                    // 
                    // PicBox
                    // 
                    this.PicBox.Location = new System.Drawing.Point(0, 0);
                    this.PicBox.Name = "PicBox";
                    this.PicBox.Size = new System.Drawing.Size(150, 140);
                    this.PicBox.TabIndex = 3;
                    this.PicBox.TabStop = false;
                    // 
                    // OuterPanel
                    // 
                    this.OuterPanel.AutoScroll = true;
                    this.OuterPanel.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle;
                    this.OuterPanel.Controls.Add(this.PicBox);
                    this.OuterPanel.Dock = System.Windows.Forms.DockStyle.Fill;
                    this.OuterPanel.Location = new System.Drawing.Point(0, 0);
                    this.OuterPanel.Name = "OuterPanel";
                    this.OuterPanel.Size = new System.Drawing.Size(210, 190);
                    this.OuterPanel.TabIndex = 4;
                    // 
                    // PictureBox
                    // 
                    this.Controls.Add(this.OuterPanel);
                    this.Name = "PictureBox";
                    this.Size = new System.Drawing.Size(210, 190);
                    this.OuterPanel.ResumeLayout(false);
                    this.ResumeLayout(false);
    
                }
                #endregion
    
                #region Constructors
    
                public PictureBox()
                {
                    InitializeComponent();
                    InitCtrl();	// my special settings for the ctrl
                }
    
                #endregion
    
                #region Properties
    
                /// <summary>
                /// Property to select the picture which is displayed in the picturebox. If the 
                /// file doesn´t exist or we receive an exception, the picturebox displays 
                /// a red cross.
                /// </summary>
                /// <value>Complete filename of the picture, including path information</value>
                /// <remarks>Supported fileformat: *.gif, *.tif, *.jpg, *.bmp</remarks>
                /// 
    
                [Browsable(false)]
                public string Picture
                {
                    get { return m_sPicName; }
                    set
                    {
                        if (null != value)
                        {
                            if (System.IO.File.Exists(value))
                            {
                                try
                                {
                                    PicBox.Image = Image.FromFile(value);
                                    m_sPicName = value;
                                }
                                catch (OutOfMemoryException ex)
                                {
                                    RedCross();
                                }
                            }
                            else
                            {
                                RedCross();
                            }
                        }
                    }
                }
    
                /// <summary>
                /// Set the frametype of the picturbox
                /// </summary>
                [Browsable(false)]
                public BorderStyle Border
                {
                    get { return OuterPanel.BorderStyle; }
                    set { OuterPanel.BorderStyle = value; }
                }
    
                #endregion
    
                #region Other Methods
    
                /// <summary>
                /// Special settings for the picturebox ctrl
                /// </summary>
                private void InitCtrl()
                {
                    PicBox.SizeMode = PictureBoxSizeMode.StretchImage;
                    PicBox.Location = new Point(0, 0);
                    OuterPanel.Dock = DockStyle.Fill;
                    OuterPanel.Cursor = System.Windows.Forms.Cursors.NoMove2D;
                    OuterPanel.AutoScroll = true;
                    OuterPanel.MouseEnter += new EventHandler(PicBox_MouseEnter);
                    PicBox.MouseEnter += new EventHandler(PicBox_MouseEnter);
                    OuterPanel.MouseWheel += new MouseEventHandler(PicBox_MouseWheel);
                }
    
                /// <summary>
                /// Create a simple red cross as a bitmap and display it in the picturebox
                /// </summary>
                private void RedCross()
                {
                    Bitmap bmp = new Bitmap(OuterPanel.Width, OuterPanel.Height, System.Drawing.Imaging.PixelFormat.Format16bppRgb555);
                    Graphics gr;
                    gr = Graphics.FromImage(bmp);
                    Pen pencil = new Pen(Color.Red, 5);
                    gr.DrawLine(pencil, 0, 0, OuterPanel.Width, OuterPanel.Height);
                    gr.DrawLine(pencil, 0, OuterPanel.Height, OuterPanel.Width, 0);
                    PicBox.Image = bmp;
                    gr.Dispose();
                }
    
                #endregion
    
                #region Zooming Methods
    
                /// <summary>
                /// Make the PictureBox dimensions larger to effect the Zoom.
                /// </summary>
                /// <remarks>Maximum 5 times bigger</remarks>
                private void ZoomIn()
                {
                    if ((PicBox.Width < (MINMAX * OuterPanel.Width)) &&
                        (PicBox.Height < (MINMAX * OuterPanel.Height)))
                    {
                        PicBox.Width = Convert.ToInt32(PicBox.Width * ZOOMFACTOR);
                        PicBox.Height = Convert.ToInt32(PicBox.Height * ZOOMFACTOR);
                        PicBox.SizeMode = PictureBoxSizeMode.StretchImage;
                    }
                }
    
                /// <summary>
                /// Make the PictureBox dimensions smaller to effect the Zoom.
                /// </summary>
                /// <remarks>Minimum 5 times smaller</remarks>
                private void ZoomOut()
                {
                    if ((PicBox.Width > (OuterPanel.Width / MINMAX)) &&
                        (PicBox.Height > (OuterPanel.Height / MINMAX)))
                    {
                        PicBox.SizeMode = PictureBoxSizeMode.StretchImage;
                        PicBox.Width = Convert.ToInt32(PicBox.Width / ZOOMFACTOR);
                        PicBox.Height = Convert.ToInt32(PicBox.Height / ZOOMFACTOR);
                    }
                }
    
                #endregion
    
                #region Mouse events
    
                /// <summary>
                /// We use the mousewheel to zoom the picture in or out
                /// </summary>
                /// <param name="sender"></param>
                /// <param name="e"></param>
                private void PicBox_MouseWheel(object sender, MouseEventArgs e)
                {
                    if (e.Delta < 0)
                    {
                        ZoomIn();
                    }
                    else
                    {
                        ZoomOut();
                    }
                }
    
                /// <summary>
                /// Make sure that the PicBox have the focus, otherwise it doesn´t receive 
                /// mousewheel events !.
                /// </summary>
                /// <param name="sender"></param>
                /// <param name="e"></param>
                private void PicBox_MouseEnter(object sender, EventArgs e)
                {
                    if (PicBox.Focused == false)
                    {
                        PicBox.Focus();
                    }
                }
    
                #endregion
    
                #region Disposing
    
                /// <summary>
                /// Die verwendeten Ressourcen bereinigen.
                /// </summary>
                protected override void Dispose(bool disposing)
                {
                    if (disposing)
                    {
                        if (components != null)
                            components.Dispose();
                    }
                    base.Dispose(disposing);
                }
    
                #endregion
            }
        }
    }
    //designer
    namespace WindowsFormsApplication1
    {
        partial class frmMain
        {
            /// <summary>
            /// Required designer variable.
            /// </summary>
            private System.ComponentModel.IContainer components = null;
    
            /// <summary>
            /// Clean up any resources being used.
            /// </summary>
            /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
            protected override void Dispose(bool disposing)
            {
                if (disposing && (components != null))
                {
                    components.Dispose();
                }
                base.Dispose(disposing);
            }
    
            #region Windows Form Designer generated code
    
            /// <summary>
            /// Required method for Designer support - do not modify
            /// the contents of this method with the code editor.
            /// </summary>
            private void InitializeComponent()
            {
                this.pictureBox1 = new PictureBoxCtrl.PictureBox();
                this.SuspendLayout();
                // 
                // pictureBox1
                // 
                this.pictureBox1.BackgroundImage = global::WindowsFormsApplication1.Properties.Resources.a;
                this.pictureBox1.Border = System.Windows.Forms.BorderStyle.FixedSingle;
                this.pictureBox1.Location = new System.Drawing.Point(242, 98);
                this.pictureBox1.Name = "pictureBox1";
                this.pictureBox1.Picture = "";
                this.pictureBox1.Size = new System.Drawing.Size(210, 190);
                this.pictureBox1.TabIndex = 0;
                // 
                // frmMain
                // 
                this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
                this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
                this.ClientSize = new System.Drawing.Size(595, 386);
                this.Controls.Add(this.pictureBox1);
                this.Name = "frmMain";
                this.Text = "frmMain";
                this.Load += new System.EventHandler(this.frmMain_Load);
                this.ResumeLayout(false);
    
            }
    
            #endregion
    
            private PictureBoxCtrl.PictureBox pictureBox1;
    
    
        }
    }
    • Marked as answer by seahna Thursday, November 19, 2009 3:53 PM
    Wednesday, November 18, 2009 7:50 PM

All replies

  • Wednesday, November 18, 2009 6:28 PM
  • Thank you but the code doesn't work. I transposed it to my project made the nessecary changes and ran the project. I get no errors or anything but it doesn't zoom in or out it just loads the image as before.
    Wednesday, November 18, 2009 7:01 PM
  • Hi,

    Tried both demo application and source code works fine for me.

    You can also write a property that holds image for the control.

            public Image Img
            {
                get { return this.PicBox.Image; }
                set { this.PicBox.Image = value; }
            }
    Wednesday, November 18, 2009 7:17 PM
  • Ok let me rephrase this. This mousewheel event doesn't work but if I create buttons to control the zoom in and out function those do work.


    Any ideas why this mouse event code won't work?

     

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

    }

    }



    This part the zooming controls work

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

    }

    }

    • Edited by seahna Wednesday, November 18, 2009 7:58 PM
    Wednesday, November 18, 2009 7:45 PM
  • Hi,

    Here is my code.

    Could you try this.

    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 frmMain : Form
        {
            public frmMain()
            {
                InitializeComponent();
            }
    
            private void frmMain_Load(object sender, EventArgs e)
            {
                pictureBox1.Picture=@"C:\users\tamer\desktop\2.jpg";
            }
    
        
    
            private void pictureBox1_MouseHover(object sender, EventArgs e)
            {
                
            }
        }
        namespace PictureBoxCtrl
        {
            /// <summary>
            /// Summary for the PictureBox Ctrl
            /// </summary>
            public class PictureBox : System.Windows.Forms.UserControl
            {
                #region Members
    
                private System.Windows.Forms.PictureBox PicBox;
                private System.Windows.Forms.Panel OuterPanel;
                private System.ComponentModel.Container components = null;
                private string m_sPicName = "";
    
                #endregion
    
                #region Constants
    
                private double ZOOMFACTOR = 1.25;	// = 25% smaller or larger
                private int MINMAX = 5;				// 5 times bigger or smaller than the ctrl
    
                #endregion
    
                #region Designer generated code
    
                private void InitializeComponent()
                {
                    this.PicBox = new System.Windows.Forms.PictureBox();
                    this.OuterPanel = new System.Windows.Forms.Panel();
                    this.OuterPanel.SuspendLayout();
                    this.SuspendLayout();
                    // 
                    // PicBox
                    // 
                    this.PicBox.Location = new System.Drawing.Point(0, 0);
                    this.PicBox.Name = "PicBox";
                    this.PicBox.Size = new System.Drawing.Size(150, 140);
                    this.PicBox.TabIndex = 3;
                    this.PicBox.TabStop = false;
                    // 
                    // OuterPanel
                    // 
                    this.OuterPanel.AutoScroll = true;
                    this.OuterPanel.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle;
                    this.OuterPanel.Controls.Add(this.PicBox);
                    this.OuterPanel.Dock = System.Windows.Forms.DockStyle.Fill;
                    this.OuterPanel.Location = new System.Drawing.Point(0, 0);
                    this.OuterPanel.Name = "OuterPanel";
                    this.OuterPanel.Size = new System.Drawing.Size(210, 190);
                    this.OuterPanel.TabIndex = 4;
                    // 
                    // PictureBox
                    // 
                    this.Controls.Add(this.OuterPanel);
                    this.Name = "PictureBox";
                    this.Size = new System.Drawing.Size(210, 190);
                    this.OuterPanel.ResumeLayout(false);
                    this.ResumeLayout(false);
    
                }
                #endregion
    
                #region Constructors
    
                public PictureBox()
                {
                    InitializeComponent();
                    InitCtrl();	// my special settings for the ctrl
                }
    
                #endregion
    
                #region Properties
    
                /// <summary>
                /// Property to select the picture which is displayed in the picturebox. If the 
                /// file doesn´t exist or we receive an exception, the picturebox displays 
                /// a red cross.
                /// </summary>
                /// <value>Complete filename of the picture, including path information</value>
                /// <remarks>Supported fileformat: *.gif, *.tif, *.jpg, *.bmp</remarks>
                /// 
    
                [Browsable(false)]
                public string Picture
                {
                    get { return m_sPicName; }
                    set
                    {
                        if (null != value)
                        {
                            if (System.IO.File.Exists(value))
                            {
                                try
                                {
                                    PicBox.Image = Image.FromFile(value);
                                    m_sPicName = value;
                                }
                                catch (OutOfMemoryException ex)
                                {
                                    RedCross();
                                }
                            }
                            else
                            {
                                RedCross();
                            }
                        }
                    }
                }
    
                /// <summary>
                /// Set the frametype of the picturbox
                /// </summary>
                [Browsable(false)]
                public BorderStyle Border
                {
                    get { return OuterPanel.BorderStyle; }
                    set { OuterPanel.BorderStyle = value; }
                }
    
                #endregion
    
                #region Other Methods
    
                /// <summary>
                /// Special settings for the picturebox ctrl
                /// </summary>
                private void InitCtrl()
                {
                    PicBox.SizeMode = PictureBoxSizeMode.StretchImage;
                    PicBox.Location = new Point(0, 0);
                    OuterPanel.Dock = DockStyle.Fill;
                    OuterPanel.Cursor = System.Windows.Forms.Cursors.NoMove2D;
                    OuterPanel.AutoScroll = true;
                    OuterPanel.MouseEnter += new EventHandler(PicBox_MouseEnter);
                    PicBox.MouseEnter += new EventHandler(PicBox_MouseEnter);
                    OuterPanel.MouseWheel += new MouseEventHandler(PicBox_MouseWheel);
                }
    
                /// <summary>
                /// Create a simple red cross as a bitmap and display it in the picturebox
                /// </summary>
                private void RedCross()
                {
                    Bitmap bmp = new Bitmap(OuterPanel.Width, OuterPanel.Height, System.Drawing.Imaging.PixelFormat.Format16bppRgb555);
                    Graphics gr;
                    gr = Graphics.FromImage(bmp);
                    Pen pencil = new Pen(Color.Red, 5);
                    gr.DrawLine(pencil, 0, 0, OuterPanel.Width, OuterPanel.Height);
                    gr.DrawLine(pencil, 0, OuterPanel.Height, OuterPanel.Width, 0);
                    PicBox.Image = bmp;
                    gr.Dispose();
                }
    
                #endregion
    
                #region Zooming Methods
    
                /// <summary>
                /// Make the PictureBox dimensions larger to effect the Zoom.
                /// </summary>
                /// <remarks>Maximum 5 times bigger</remarks>
                private void ZoomIn()
                {
                    if ((PicBox.Width < (MINMAX * OuterPanel.Width)) &&
                        (PicBox.Height < (MINMAX * OuterPanel.Height)))
                    {
                        PicBox.Width = Convert.ToInt32(PicBox.Width * ZOOMFACTOR);
                        PicBox.Height = Convert.ToInt32(PicBox.Height * ZOOMFACTOR);
                        PicBox.SizeMode = PictureBoxSizeMode.StretchImage;
                    }
                }
    
                /// <summary>
                /// Make the PictureBox dimensions smaller to effect the Zoom.
                /// </summary>
                /// <remarks>Minimum 5 times smaller</remarks>
                private void ZoomOut()
                {
                    if ((PicBox.Width > (OuterPanel.Width / MINMAX)) &&
                        (PicBox.Height > (OuterPanel.Height / MINMAX)))
                    {
                        PicBox.SizeMode = PictureBoxSizeMode.StretchImage;
                        PicBox.Width = Convert.ToInt32(PicBox.Width / ZOOMFACTOR);
                        PicBox.Height = Convert.ToInt32(PicBox.Height / ZOOMFACTOR);
                    }
                }
    
                #endregion
    
                #region Mouse events
    
                /// <summary>
                /// We use the mousewheel to zoom the picture in or out
                /// </summary>
                /// <param name="sender"></param>
                /// <param name="e"></param>
                private void PicBox_MouseWheel(object sender, MouseEventArgs e)
                {
                    if (e.Delta < 0)
                    {
                        ZoomIn();
                    }
                    else
                    {
                        ZoomOut();
                    }
                }
    
                /// <summary>
                /// Make sure that the PicBox have the focus, otherwise it doesn´t receive 
                /// mousewheel events !.
                /// </summary>
                /// <param name="sender"></param>
                /// <param name="e"></param>
                private void PicBox_MouseEnter(object sender, EventArgs e)
                {
                    if (PicBox.Focused == false)
                    {
                        PicBox.Focus();
                    }
                }
    
                #endregion
    
                #region Disposing
    
                /// <summary>
                /// Die verwendeten Ressourcen bereinigen.
                /// </summary>
                protected override void Dispose(bool disposing)
                {
                    if (disposing)
                    {
                        if (components != null)
                            components.Dispose();
                    }
                    base.Dispose(disposing);
                }
    
                #endregion
            }
        }
    }
    //designer
    namespace WindowsFormsApplication1
    {
        partial class frmMain
        {
            /// <summary>
            /// Required designer variable.
            /// </summary>
            private System.ComponentModel.IContainer components = null;
    
            /// <summary>
            /// Clean up any resources being used.
            /// </summary>
            /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
            protected override void Dispose(bool disposing)
            {
                if (disposing && (components != null))
                {
                    components.Dispose();
                }
                base.Dispose(disposing);
            }
    
            #region Windows Form Designer generated code
    
            /// <summary>
            /// Required method for Designer support - do not modify
            /// the contents of this method with the code editor.
            /// </summary>
            private void InitializeComponent()
            {
                this.pictureBox1 = new PictureBoxCtrl.PictureBox();
                this.SuspendLayout();
                // 
                // pictureBox1
                // 
                this.pictureBox1.BackgroundImage = global::WindowsFormsApplication1.Properties.Resources.a;
                this.pictureBox1.Border = System.Windows.Forms.BorderStyle.FixedSingle;
                this.pictureBox1.Location = new System.Drawing.Point(242, 98);
                this.pictureBox1.Name = "pictureBox1";
                this.pictureBox1.Picture = "";
                this.pictureBox1.Size = new System.Drawing.Size(210, 190);
                this.pictureBox1.TabIndex = 0;
                // 
                // frmMain
                // 
                this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
                this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
                this.ClientSize = new System.Drawing.Size(595, 386);
                this.Controls.Add(this.pictureBox1);
                this.Name = "frmMain";
                this.Text = "frmMain";
                this.Load += new System.EventHandler(this.frmMain_Load);
                this.ResumeLayout(false);
    
            }
    
            #endregion
    
            private PictureBoxCtrl.PictureBox pictureBox1;
    
    
        }
    }
    • Marked as answer by seahna Thursday, November 19, 2009 3:53 PM
    Wednesday, November 18, 2009 7:50 PM
  • I was missing this:

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


    Thanks for the help!

    Thursday, November 19, 2009 3:53 PM