Jump to content


Happy Holidays from Codecall!



Recent Topics

Recent Status Updates

View All Updates

Developed by TechBiz Xccelerator
Photo
- - - - -

C#: Scaling Images In A PictureBox


  • Please log in to reply
2 replies to this topic

#1 CommittedC0der

CommittedC0der

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1,065 posts
  • Programming Language:C#
  • Learning:C#, JavaScript, PL/SQL

Posted 30 January 2011 - 09:07 PM

Hey everybody! Im not sure how useful this tutorial will be to everyone, but the more tutorials we have here, the more users we get. :D

Today were going to learn how to scale images within a picturebox! We'll learn both, how to scale with predetermined widths and heights, and also how to re-size in real time. Its actually alot easier then one might think. :)

How this tutorial will work:
I will explain what we are doing, then proceed to post the code, completely commented out so you can understand how each line works, and what it does.

To get started, lets get our form ready for some code. Create a new windows form application, and drag these controls to the form:

  • 1 Picture Box, (I set mine as, Height:480, Width:640)
  • 2 Labels, (Change the text to "Height" on one, and "Width on the other)
  • 2 Texbox's
  • 1 Button (Change the text to "Scale")
Alright, lets set our image in the pictureBox. Select your pictureBox on Form1 and goto its properties, find, "Image" and change it to whatever image you wish.

After doing the above you should have something like I do:
ScalingCodeCallCsharp.png



Scaling An Image With Given, Hieght And Width:
Now lets add the first bit of code! Place this code in the button click event:
pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;[COLOR=green]//This allows the pictureBox image to resize and not just crop.[/COLOR]
pictureBox1.Size = new Size(Convert.ToInt32(textBox1.Text), Convert.ToInt32(textBox2.Text));[COLOR=green]//This changes the size of our pictureBox to the size's given in the textBox's.[/COLOR]
And thats all we have to do, to re-size images with a given scale! Very simple huh?!? :)

Scaling An Image In Real Time:
If your not exactly sure what I mean by 'Scaling An Image In Real Time', I mean scaling an image with your mouse in real time, like Adobe PhotoShop or Paint.Net.

To get started we must first add this variable to our code, just outside the "public Form1()" function:
bool mouseDown = false;
This will be used to detect if our mouse is down, as if you couldn't tell. :P

Now we have some work to do on our Form. First lets go into pictureBox1's properties and change its anchor from "top, left" to "bottom, right". Now, with that done, lets add another pictureBox to our form, and change its size to 20 by 20. Now load a image into it that indicating its used to re-size the image. Place the new pictureBox in the bottom right hand corner of pictureBox1. My form now looks like this(red arrow drawn on, in case you couldn't tell) :
ScalingCodeCallCsharp2.png

Note: You can also change the cursor property to NWSE on pictureBox2, for added effect.

Alright, we need to add 3 events to pictureBox2. To do this click pictureBox2, goto properties, and click the lighting bolt at the top of the properties window. Now add the "MouseDown", "MouseUp", and "MouseMove" events. We now add the follow code:

MouseDown event:
mouseDown = true;
MouseUp event:
mouseDown = false;
As we stated before this is so we can tell if the mouse is down, which we need for the next bit of code.

MouseMove event:
if (mouseDown == true)[COLOR=green]//Check and see if our mouse is down.[/COLOR]
            {
                pictureBox1.Height = pictureBox2.Top + e.Y; 
                pictureBox1.Width = pictureBox2.Left + e.X;[COLOR=green] //These two lines change the size of pictureBox1, acording to the mouse position.          [/COLOR]     
                pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;[COLOR=green]//Once again this allows the pictureBox image to resize and not just crop.[/COLOR]
                pictureBox2.Location = new Point(pictureBox1.Right - 20, pictureBox1.Bottom - 20);[COLOR=green]//This code does nothing but make our little image that tells us we can scale the big image, stay in the bottom right hand corner of pictureBox1.[/COLOR]
            }
Now try your code! And that is it! Very easy to create, but effective. I hope you've enjoyed this tutorial, and weren't to bored with it! I also hope somebody finds it useful to them. Questions, comments, and and if you wish +rep's welcome.

Good Day ~ Committed. :)
  • 0
There IS a war going on for your mind.
Nothing of eternal significance happens besides prayer.

#2 oscarocasla

oscarocasla

    CC Lurker

  • Just Joined
  • Pip
  • 5 posts

Posted 17 February 2011 - 11:11 AM

hi committed,

got an idea how to record video from my screen using c#?

thanx.,
  • 0

#3 CommittedC0der

CommittedC0der

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1,065 posts
  • Programming Language:C#
  • Learning:C#, JavaScript, PL/SQL

Posted 17 February 2011 - 02:37 PM

Hi oscarocasla, why dont you create a new thread in the C# section and the people there can help you. :)

~ Committed.
  • 0
There IS a war going on for your mind.
Nothing of eternal significance happens besides prayer.




Powered by binpress