PictureBox with zooming and scrolling

Screenshot form PicturBoxCtrl testprogram

Introduction

In a past project, I designed a GUI with a PictureBox control on it. Because of the low screen resolution, I couldn't make the GUI big enough to show the whole picture. So I decided to develop my own scrollable PictureBox with the special highlight of zooming functionality. For that, I created a new VS project of type 'Windows control library'. In the source code, you can see the derived class.

How it works

When the mouse cursor enters the control, the cursor style changes and you are able to zoom in or out with the mouse-wheel. The principle of the zooming effect is to raise or to lower the inner PictureBox size by a fixed zooming factor. The scrollbars appear automatically when the inner PictureBox gets bigger than the control.

Using the control

The control resides in the namespace PictureBoxCtrl. There we have one public class PictureBox : System.Windows.Forms.UserControl.

The control provides two properties:

Picture - A string which represents the name of the picture. If an error occurs during load, the PictureBox shows a red cross. Supported file formats are: *.gif, *.tif, *.jpg, *.bmp.
Border - The same as the BorderStyle property in other controls.

Note: None of the properties have been added to the Appearance category in the property page of the control.

Bring the control to the Toolbox

Compile the project PicturBoxCtrl.
Go to the VS ToolBox.
Create a tab (or use an existing one).
Right click in the tab --> Add/Remove Items.
Here you browse for the PictureBox.dll (in PictureBox\bin\Debug or PictureBox\bin\Release). Select it and press OK.

Browse for the .dll

Now you've rebound the control into the toolbox. From here, you can drop it to your form. The VS wizard will automatically add a reference for you to your project.

PicturBoxCtrl in the toolbox

That's it...

So, this is my first C# User Control. For my needs, the control is finished, maybe for yours too. If not, feel free to enhance the code.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Alexander Kloep

Software Developer
www.auteq.com

Germany

Member

Working as software engineer since 2001 at www.auteq.com.

In my spare time i love playing with my two kids.

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

You must Sign In to use this message board. (secure sign-in)

Search this forum
	Profile popups Noise Layout Per page

how save image in picturebox?

Jheiron

5:29 17 Oct '11

your code works great but I have this problem .. as I can do to save the image to zoom in on the hard drive? Help me please...
Sign In·View Thread·Permalink

Re: how save image in picturebox?

Alexander Kloep

20:41 17 Oct '11

Hello, the control did not provide any function to save the image. To realize this functionality you have to implement your own function. In this function you can make use of the "Image.Save" method from the API, e.g. : pictureBox1.Image.Save(@"C:\Documents and Settings\jheiron\Desktop\test.jpg",ImageFormat.Jpeg); Greetings
Sign In·View Thread·Permalink

Re: how save image in picturebox?

Jheiron

3:17 18 Oct '11

I'll be honest I am new to the programming and do not understand that to make my own function in this case, give me an example? please and sorry for the inconvenience.
Sign In·View Thread·Permalink

Re: how save image in picturebox?

Alexander Kloep

20:27 18 Oct '11

Hello,
no problem, but i´m not sure if the example can help you. Anyway. Add the following code snippet to the PictureBox.cs class and recompile the code. This will add a new property to the control:

       /// <summary>
       /// Get the image from the picturebox
       /// </summary>
       public Image Image
       {
           get { return PicBox.Image; }
       }

In the TestGUI add a button and on the button-click eventhandler add the following:

        private void button4_Click(object sender, EventArgs e)
        {
            pb.Image.Save( System.IO.Path.Combine( Application.StartupPath, "imagesave.jpg"));
        }

This will save the image from the picturebox, but remember it saves the image in its originally size !

Greetings
Alexander

Re: how save image in picturebox?

Jheiron

3:16 19 Oct '11

I put the code works, but you're right does not save the image with the zoom but the original, you will know in some way to save the image with the zoom?
 
and do not think I want to do the work .. I was researching how to do the step
 
pardon for my bad English, I'm using the google translator jajajja :P

My vote of 5

Mr.YunJi

7:04 31 Oct '10

Your article is very useful for me. thanks
Sign In·View Thread·Permalink

File is being used by another process

w, tim

8:44 18 Jan '10

Nice control.

I was using this to display an image so that a user could decide where to move the file. When I went to move the file I received a "process cannot access the file because it is being used by another process" error message.

The solution was to replace the line:
PicBox.Image = Image.FromFile ( value );

With:
using (FileStream fs1 = new FileStream(value, FileMode.Open))
{
PicBox.Image = Image.FromStream(fs1);
}

Re: File is being used by another process

Alexander Kloep

19:36 18 Jan '10

Good solution! Thanks for sharing. Greets Alex.
Sign In·View Thread·Permalink

Image is too small

huhuhujujuju

3:13 9 Jan '10

My image wich ussualy cant even fit the screen is very very small in your picturebox
Sign In·View Thread·Permalink	1.50/5 (2 votes)

Nice job

X3m

8:45 26 Apr '08

Congratulations! Best regards, X3m
Sign In·View Thread·Permalink

Image Zoomin and ZoomOut

Member 4595122

23:30 6 Feb '08

Hi Friends, I am working with image. How can i zoom it on center of my screen. it should zoom in all the direction and how can i scroll by mouse wheel... Plz help me oput... its very urgent. Regards V K Gupta
Sign In·View Thread·Permalink	1.27/5 (13 votes)

Image Property

SteveConradEllis

1:17 7 Sep '06

I used your sourcecode to create a new usercontrol, with a public Image property, allowing the user to set the PictureBox's Image property directly and not only from a string file location.
I also added code to the Image Set Property method to render the image in the centre of the panel and not in the top left corner, (as well as to the zoom methods).
Otherwise a very useful user control, thanks very much for making the source code available!!

Steve

Re: Image Property

Code Deamon

1:33 19 Apr '07

That's exactly what I'm about to do. It would be cool if you posted your code...
Sign In·View Thread·Permalink

Re: Image Property

Al_S

5:28 10 Mar '09

Yes I would like to see that as well Jer 29:11
Sign In·View Thread·Permalink

Drag to scroll

MrQBerrt

10:01 30 Sep '05

If anyone would like to enhance this code so that you can drag around the picture like you are able to do in Acrobat Reader, add the following 2 handlers:



 

		private void PicBox_MouseDown(object sender, MouseEventArgs e)

		{

			clickPosn.X = e.X;

			clickPosn.Y = e.Y;			

		}	

 

		private void PicBox_MouseMove(object sender, MouseEventArgs e)

		{

			if(e.Button == MouseButtons.Left)

			{					

				scrollPosn.X = scrollPosn.X + clickPosn.X - e.X;

				scrollPosn.Y = scrollPosn.Y + clickPosn.Y - e.Y;

				OuterPanel.AutoScrollPosition = scrollPosn;				

			}

		}

Also add the declerations



		private Point clickPosn;

		private Point scrollPosn;

Lastly the register the new handlers



			PicBox.MouseDown += new MouseEventHandler(PicBox_MouseDown);	

			PicBox.MouseMove += new MouseEventHandler(PicBox_MouseMove);

And that should do it.

Re: Drag to scroll

Christopher Scholten

18:06 10 Nov '05

Good stuff - works exactly as described first time! Thanks.
Sign In·View Thread·Permalink

Re: Drag to scroll

Christopher Scholten

20:10 10 Nov '05

One side effect of this is that when the mouse enters the control again after losing focus, and subsequently having focus re-set in the PicBox_MouseEnter event with PicBox.Focus();, the image reverts to having its top left corner aligned with the top left corner of the Outer Panel. To alleviate this, Add the line of code OuterPanel.AutoScrollPosition = scrollPosn; in the PicBox_MouseEnter event so that it reads as follows:



        private void PicBox_MouseEnter(object sender, EventArgs e)

        {

            if ( PicBox.Focused == false )

            {

                PicBox.Focus();

                OuterPanel.AutoScrollPosition = scrollPosn;

            }

        }

Unfortunately this does result in a slight flicker of the image when the mouse re-enters this area, however I haven't been able to get rid of this, even with calls to .SuspendLayout()/.ResumeLayout() calls on either PicBox or OuterPanel.
Rose | [Rose]

Re: Drag to scroll

Seishin#

11:29 15 Sep '08

in the PicBox_MouseMove I'd use something like this: _scrollPosn.X = Math.Min(OuterPanel.Width, Math.Max(0, _scrollPosn.X + _clickPosn.X - e.X)); _scrollPosn.Y = Math.Min(OuterPanel.Height, Math.Max(0, _scrollPosn.Y + _clickPosn.Y - e.Y)); the moving itself looks better life is study!!!
Sign In·View Thread·Permalink	2.00/5 (1 vote)

Suggestion

NinjaCross

2:33 14 Sep '05

First of all, thanks for this usefull and well realized component Smile | :)

I've got just a little suggestion.
I think it could be very usefull if you make the control able to display generic infos about the displayed image (H, W, size and so on) in some ways like (i.e.) a semi-transparent hint-box that appears automatically when the mouse goes over the control (or in other programatic-controlled ways).

--
NinjaCross
www.ninjacross.com

-- modified at 8:37 Wednesday 14th September, 2005

Re: Suggestion

Alexander Kloep

19:43 14 Sep '05

Hi, okay this is a good idea. I´ll try to find a solution asap. Alex. -- modified at 1:44 Thursday 15th September, 2005
Sign In·View Thread·Permalink

Disabled in ToolBox ?

angel420

8:40 19 Aug '05

Hi, I created my owm project and tried to create the pictureBox in my Toolbox by inserting the DLL as explained above. The pictureBox object appear in the toolbox but looks like disabled. If I try to use it nothing happen. Does anyone would have an idea about what is happening ? Thanks a lot
Sign In·View Thread·Permalink	5.00/5 (1 vote)

Re: Disabled in ToolBox ?

angel420

10:26 19 Aug '05

I found the problem, I created a MFC project instead of 'Windows control library' project but I still would like to use this picturebox Dll in my MFC project, would it be an easy way to do that ? Thanks
Sign In·View Thread·Permalink	1.50/5 (2 votes)

Control

Anonymous

16:58 29 Jun '05

Hi Alex, Nice Control. Excellent work. DO you have any restrictions on using your control? Can I just copy and paste it in my project?
Sign In·View Thread·Permalink