Picture Viewer Project: For C# and VB NET Students
In this section, you'll create your own basic Picture Viewer. It will look like this:
Down the left-hand side, we have a ListView control. This allows us to display thumbnails of our chosen images. When you click an image in the ListView, the full-size image appears on the right. If the image is too big for the form, scroll bars will appear. Our programme also has rudimentary zoom ability. When you right click the big image, the picture becomes smaller. When you left click the image, it will become bigger. You'll use the following controls in this project:
Open File Dialogue Box
Let's make a start by designing the form.
Adding the Controls to the Form
Start a new Visual Studio project. Make your Form nice and big. We made ours 950 wide by 800 high. Add a Panel control to the form. This can be found in the toolbox, in the Containers section:
Draw a Panel on your form:
With the Panel selected, set the following properties for it:
Location: 160, 10
Size: 720 wide, 750 height
Anchor: Top, Bottom, Left, Right
The Panel will hold a PictureBox control. The reason we're adding a Panel is because the PictureBox doesn't have scrollbars of its own, so we'll dock it to a Panel. When you make the PictureBox's image bigger than the Panel, the Panel will add the scrollbars automatically.
So add a PictureBox to your Panel. (It's is under the Common category in the Toolbox.) Just click the PictureBox once. Now draw one out on your Panel.
Set the following Properties for your PictureBox:
Your Picture Box should now be entirely inside of your Panel, right up to the edges.
Now add a button to your Form. Change the Name property to BtnLoadImages, and set the Text to Load Images. Position the button somewhere in the top left of the form.
Just below the button, you can add a Label with the Text property of Images.
Add a ListView control to your form. The ListView is also under the Common category in the Toolbox in Visual Studio. Resize your ListView control and place it under your button and Label. (We made our Size 130, 650.) Leave the other properties on their defaults.
The next thing to add is a OpenFileDialog control. This can be found under the Dialog category of the Toolbox. Simply double click to add one to your project. You'll see it appear at the bottom of the project window:
With the OpenFileDialog control selected, have a look at the Properties area on the right. Set the Name property to oFD1, and the MultiSelect property to True.
Finally, add an ImageList control. This can be found under the Components category of the Toolbox:
Double click ImageList to add one to your project. Again, it will get added to the bottom of the project Window:
With your ImageList1 control selected, set its ImageSize property to 64, 64. The ImageList control, as its name suggests, holds a list of images. We'll use these images as the thumbnail images for the ListView.
Now that we have all our controls in place, we can start the coding. We'll do that in the next lesson below.