Creating A Simple Image Viewer Using Visual Basic 2005 Express Edition

[rvalkass 5]

I downloaded Microsoft's Visual Studio Express suite a few months ago, but only recently got around to installing it. I have been practising with Visual Basic and making some rather basic programs and utilities, but they contain most of the basic concepts. This tutorial will explain how to create a basic image viewer, and I will try to explain each step from beginning to end as clear as I can.

To start you will need:

Microsoft Visual Studio

About 10-20 minutes free time

OK, first open up the Visual Basic part of the Studio. I am using the 2005 Express version, so some features may differ between versions, but most stuff should be relatively similar. Once it's loaded click File > New Project (or press Ctrl + N) to get the New Project dialog. Make sure you have Windows Application selected, and give the project a sensible name, then click OK.

 

 

Now the screen will show you a blank form. This is the basis of your application where all of your controls, buttons etc will be placed, and represents exactly what your end user will see. Click on the Toolbox button on the left hand side of the screen, and make sure you are viewing the All Windows Forms section. This pane lists all of the possible controls you can put into your application. Drag the one called PictureBox onto your form, and position it in the top left hand corner, like this:

 

 

Also drag a Button onto the form, and position it near the bottom border, roughly in the middle. Finally, drag on an OpenFileDialog, and position it anywhere on your form. You will notice that it doesn't appear in your application, but in a separate pane at the bottom of the screen. This pane contains all of the elements of your form that are not visible until you call them, or are permanently invisible, such as counters and timers. You now have all of the elements for your application, so you just need the code.

 

Double click on the button you dragged on earlier. The view switches to the programming view, as opposed to the designer view. A command is created that will be run when the button is clicked, and your cursor positioned ready to type the code. Copy or type the code below where the cursor is:

 

OpenFileDialog1.ShowDialog()

This will cause your dialog box to display when the button is clicked. Now we need the picture box to display your chosen image.

 

Right click in the code view, and select View Designer. Then double click the OpenFileDialog1 button at the bottom of the screen, and put this code where the cursor is.

 

path = New Bitmap(OpenFileDialog1.FileName)PictureBox1.Image = path

We have now defined path as the filename chosen in the dialog box, and have set the picture box to display that image.

Notice that the word path has been underlined in blue? This is similar to the spelling and grammar mistakes in Word, and shows that you have failed to define something or have spelt something wrong. This is because we haven't defined path.

 

At the top of the code view you will notice the following line:

Public Class Form1

Below it, add this line:

Private path As Bitmap

We have now created a bitmap ready to display your image, and the blue underlines should disappear. Your project will now work, but if you click the little green Start Debugging 'play' button on the toolbar, and click your button to load an image you will notice a number of faults. Firstly, your Picture Box is far too small to display an image. Secondly the button is labelled Button1 and finally, the application is titled Form1. This shall all be fixed, along with a few extras.

 

Close your application, or click the Stop button, and then flick back to design view and click on the button we added earlier. Make sure you can see the Properties window, which is normally a panel on the right hand side. If not, push F4 and it should appear.

 

 

This Properties pane shows all of the settings and choices you can make concerning your button. If you scroll towards the bottom of the list you should see a property called Text. With virtually all of the controls you can add, Text is the text displayed on it, so with your button change this property so it says something like Load Image... and push enter. Click on the title bar of your form and change the text property again to something more logical than Form1, perhaps Image Viewer.

 

Now, to get your images to display properly within your picture box, we need to change some other settings. I will just list them here, but you can read up about them in more detail in the help section if you wish.

Anchor: Top, Left, Bottom, Right

BorderStyle: Fixed3D

SizeMode: Zoom

Finally we just need some positioning. Click on the picture box and drag it so it fills most of your form, leaving space at the bottom for the button. Then click on your button and resize it so that it displays all of your text, then click Format > Center In Form > Horizontally . Finally set the Anchor property of the button to Bottom.

 

Now click the Start Debugging button and there should be a vast improvement To turn your application into a working, distributable .exe file, click on Build in the toolbar at the top, and then Build (Your Project Name). You have now created a .exe file, which can normally be found at the following path:

 

C:\Documents and Settings\Your Username\My Documents\Visual Studio 2005\Projects\Your Project Name\Your Project Name\bin\Release

 

Here is my finished product:

 

[Cena_54 0]

Thanks for this man, I have created a viewr using Delphi 7, and it is a very similar way in which you have performed this. I will post my tutorial also for Delphi users when I have the time to install Delphi again. Is it easy to transfer from Delphi to Visual Basic, as I want to learn how to code in VB?Thanks.

[Dawiss 0]

Nice thing.. but only problem I have in this tutorial I don't have such program called Microsoft Visual Studio .. Is there any way to download it for free.. because maybe some computers alredy have this program in but mine is pretty old junk* ..But nice tutorial and useful thing that could help out a lot .. GooD JoB.. keep it up ..

[Mortanis 0]

Yeah the version he/she (I'm not sure) is using is free from microsoft.com (or at least it was for me And nice tut . It's so rare to find one for express edition

[iGuest 3]

Very helpful page indeed Thanx-Deepak Ramdas

[iGuest 3]

AnswerCreating A Simple Image Viewer

 You can go to Microsoft and download the beta version of Microsoft Visual Basic 2010 or you can download The also free version of Visual Basic Express 2008, Hope this helps you!

-reply by Lolly3345

[iGuest 3]

Remove OpenFileDialog1 TextCreating A Simple Image Viewer

Everything works fine.  I click the button, it opens a dialog.  However, in the textbox it has OpenFileDialog1.  Granted that gets replaced as soon as I click on a file.  Is there a way to just have that part blank until I click on a file?

-question by Nick

[iGuest 3]

ZMZsoftCreating A Simple Image Viewer

It is a program called visual basics 2008/2010 express edition just search for one of those and it is the free version of the visual basics program. 

-reply by Zack