Page 1 of 1

Create Image Scroller for Windows Application

#1 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1642
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Posted 10 January 2010 - 10:42 PM

In today's tutorial we're going to look at making your own Image Scroller for a Windows application (Image Scroller is the best name I could come up with, look at the screenshot below for a visual description of what we're creating)

Attached Image

If you search the Internet you'll find ton of Web Application implementations of this control, but the only WinForm application ones I found were from pay control sets. This idea came from an application I was developing recently and desperately needed this functionality for the application. After tons of searching and asking around, Core helped me find my way so I thought it appreciative to share the solution.

To get started create a new Windows Application in Visual Studio:
  • Start Visual Studio
  • Select File > New > Project
  • Select Windows >Windows Forms Application
Attached Image

Once your new application has loaded on Form1 drag a Panel Control onto your form. For this project size your Panel to 420x140 (You can set whatever size you wish once this tutorial is completed), and set AutoScroll Property to true (this will cause a scrollbar to be on the bottom of the Panel if you have enough images to cause scrolling). Next place a Label control above the Panel (we'll see why that's there in a bit).

Now we have our Panel in place, let's work on populating it with PictureBox controls (created at runtime) filled with thumbnails of the images in the directory (for this tutorial we will be using the My Pictures directory for simplicity). The first thing we will do is to loop through the My Pictures directory and create a new PictureBox for it and place it into our Panel. Once the PictureBox is added we will add 3 events to it:
  • MouseHover: Same as MouseOver in a web application
  • MouseLeave: Same as MouseOut in a web appplication
  • Click: What happens when we click on it
This method is rather long, but I have commented everything it does in the code, so let's take a look at it

/// <summary>
/// method for grabbing all the images from your MyPictures directory and load up
/// a custom Image Scroller for use in a WinForms application
/// </summary>
/// <param name="p"></param>
private void LoadImageScroller(Panel p)
{
	//load the initial display message
	label1.Text = "Getting wallpapers.....";

	//2 variables, one for the Y position of the current PictureBox control
	//and one for help count the number of images in the directory
	int position = 0;
	int count = 0;

	//string array to hold the valid image formats we want
	string[] validExtensions = new string[] { ".jpg", ".bmp", ".gif", ".png" };

	//now a DirectoryInfo object holding the information from our
	//My Pictures directory
	DirectoryInfo info = new DirectoryInfo(Environment.GetFolderPath(Environment.SpecialFolder.MyPictures));

	//get all files from the directory and loop through them
	foreach (FileInfo f in info.GetFiles())
	{
		//loop through all the valid types in our array
		for (int i = 0; i < validExtensions.Length; i++)
		{
			//check and make sure the current file has a valid extension
			if (f.Extension.ToString().ToLower() == validExtensions[i].ToLower())
			{
				//now that we're in our loop create a new PictureBox (this will
				//create a new one on each iteration of ther loop)
				PictureBox pb = new PictureBox();

				//give the PictureBox a name
				pb.Name = "ImagePB" + count;

				//set it's cursor type to Hand
				pb.Cursor = Cursors.Hand;

				//set the Parent of our control to our Panel, this will cause
				//the PictureBox to be aded to our Panel
				pb.Parent = p;
				pb.Size = new Size(130, 98);

				//set the SizeMode to StretchImage (this will create thumbnails of our images)
				pb.SizeMode = PictureBoxSizeMode.StretchImage;

				//now we se the position of the PictureBox (this is where the position variable comes into
				//play. We set it to it's value plus 10 (brings it off the left edge of the Panel) and
				//20 pixels down (so it's not riding the top of the Panel)
				pb.Location = new Point(position + 10, 20);

				//Here we use the Image.FromFile method to create a new image
				//from the current filr name and set the PictureBox's Image value to it
				pb.Image = Image.FromFile(f.FullName);

				//set the Tag property of the image to the current image name
				pb.Image.Tag = f.FullName;

				//here we're going to add 3 events to our PictureBox:
				// MouseHove (similar to mouseover in web)
				//MouseLeave (similar to mouseout in web)
				//Click (what happens when we click the PictureBox)
				pb.MouseHover += new EventHandler(pb_MouseHover);
				pb.MouseLeave += new EventHandler(pb_MouseLeave);
				pb.Click += new EventHandler(pb_Click);

				//increment the position value, this makes the next PictureBox
				//to be 5 pixels to the right of the previous
				position += 135;

				//increate the count
				count += 1;
			}
		}
	}

	//once we are done loading the images display how many and what directory we're in
	label1.Text = string.Format("{0} image(s) available in directory {1}", count, Environment.GetFolderPath(Environment.SpecialFolder.MyPictures));
}



Now we have created the Image Scroller, let's take a look at the 3 events we have added. In the MouseHover event we add a #d border to the PictureBox, in the MouseLeave event we remove it, and in the Click event we display the image name of the selected PictureBox (this is just for example, you can do whatever you like with it later).

MouseHover Event
void pb_MouseHover(object sender, EventArgs e)
{
	//here we are converting the sender (what is clicked) to a PictureBox and
	//setting a border when it is moused over
	((PictureBox)sender).BorderStyle = BorderStyle.Fixed3D;
}



MouseLeave Event
void pb_MouseLeave(object sender, EventArgs e)
{
	//here we are converting the sender (what is clicked) to a PictureBox and
	//removing the border when the mouse leaves it
	((PictureBox)sender).BorderStyle = BorderStyle.None;
}



Click Event
void pb_Click(object sender, EventArgs e)
{
	//here we find which PictureBox is clicked and display it's name
	MessageBox.Show(string.Format("Selected Image: {0}", ((PictureBox)sender).Image.Tag.ToString()));
}



Now, to make this work and load we add LoadImageScroller to the form's [Load[/b] event like this

private void Form1_Load(object sender, EventArgs e)
{
	LoadImageScroller(panel1);
}



Now when the form loads it loads our Image Scroller control with thumbnails from our My Pictures folder. Now that you have made it this far there is so much you can do with this. You can now modify it as you see fit to fit your needs. I hope you found this informative, and thanks for reading.

Happy Coding :)

Is This A Good Question/Topic? 2
  • +

Replies To: Create Image Scroller for Windows Application

#2 AshSofDev  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 17
  • Joined: 23-September 09

Posted 30 January 2010 - 09:12 PM

I tried this and I get the following error:

'System.Windows.Forms.PictureBox' does not contain a definition for 'CustomInvoke' and no extension method 'CustomInvoke' accepting a first argument of type 'System.Windows.Forms.PictureBox' could be found (are you missing a using directive or an assembly reference?)

What do I need to make this work?

Allen
Was This Post Helpful? 0
  • +
  • -

#3 AshSofDev  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 17
  • Joined: 23-September 09

Posted 30 January 2010 - 10:26 PM

View PostAshSofDev, on 30 Jan, 2010 - 08:12 PM, said:

I tried this and I get the following error:

'System.Windows.Forms.PictureBox' does not contain a definition for 'CustomInvoke' and no extension method 'CustomInvoke' accepting a first argument of type 'System.Windows.Forms.PictureBox' could be found (are you missing a using directive or an assembly reference?)

What do I need to make this work?

Allen



well I guess I answered my own question. I changed this:

void pb_MouseLeave(object sender, EventArgs e)
{
	//here we are converting the sender (what is clicked) to a PictureBox and
	//removing the border when the mouse leaves it
	((PictureBox)sender).CustomInvoke(p => p.BorderStyle = BorderStyle.None);
}


to this:

void pb_MouseLeave(object sender, EventArgs e)
{
	//here we are converting the sender (what is clicked) to a PictureBox and
	//removing the border when the mouse leaves it
	((PictureBox)sender).BorderStyle = BorderStyle.None;
}


and it works great.

Thanks for the tutorial

Allen
Was This Post Helpful? 1
  • +
  • -

#4 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1642
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Posted 01 February 2010 - 03:33 PM

@AshSofDev Thanks for pointing that out for me, I've removed that line and changed it accordingly. CustomInvoke is a custom extension method I use when working with a new thread/BackgroundWorker and completely forgot to take that out before publishing the tutorial. Thanks for pointing it out for me :)
Was This Post Helpful? 0
  • +
  • -

#5 Cemgates101  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 01-February 10

Posted 04 February 2010 - 11:29 AM

Hello PsychoCoder!

Just wanted to say that this is an awesome tutorial!
Was This Post Helpful? 0
  • +
  • -

#6 Guest_Vijay*


Reputation:

Posted 12 April 2010 - 10:21 AM

Its error out as "out of memory." with around 30 photos...
Was This Post Helpful? 0

#7 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1642
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Posted 12 April 2010 - 10:34 AM

@Vijay: I'm not sure what to say, I tested this (and use it in an application) on a folder that has over 150 images with no problems. Are you using the code as-is in the tutorial?
Was This Post Helpful? 0
  • +
  • -

#8 Guest_Vijay*


Reputation:

Posted 12 April 2010 - 10:37 AM

Yes, I am using the same code which is posted.

Thank You.
Was This Post Helpful? 0

#9 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1642
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Posted 12 April 2010 - 11:05 AM

Let me look into it for you and see what I can find out
Was This Post Helpful? 0
  • +
  • -

#10 Guest_Vijay*


Reputation:

Posted 12 April 2010 - 11:09 AM

Total memory size of the folder is 115 MB. Is this may be a reason??
Was This Post Helpful? 0

#11 Guest_Vijay*


Reputation:

Posted 13 April 2010 - 01:18 PM

Hi,

I got arround with the issue by displaying only 10 photos at a time on the panel (with two buttons next [>>] and previous [<<] created dynamically with picture boxes). When user clicks on next/previous buttons then all the controls inside the panel will be disposed (only clear will not work) and new controls will be created inside panel to display next 10 pictures. Bit more coding is required but works fine.

Please let me if you find any other solution to overcome "Out of memory" error.

Thanks for your tutorial, its amazing.

Thank You,
Vijayendra DJ
Was This Post Helpful? 0

#12 vinu.db  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 14-March 14

Posted 14 March 2014 - 12:59 AM

Very very helpful stuff. Thank you so much.
Was This Post Helpful? 0
  • +
  • -

#13 ghasem110deh  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 15-August 14

Posted 15 August 2014 - 09:49 AM

hi guys ...
this is very Interesting , But 2 question :
1- how do I use the database ? --> (Access)
2- with click , display into pictureBox1 in form ?
thanks
Was This Post Helpful? 0
  • +
  • -

#14 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3823
  • View blog
  • Posts: 13,553
  • Joined: 12-December 12

Posted 15 August 2014 - 10:17 AM

This tutorial makes no mention of a database so your question is too broad.

DIC has a number of Access tutorials. Once you've learnt how to retrieve images (or image locations) from your Access database then you will be in a position to apply that knowledge to this tutorial.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1