Post tutorial RSS C#: How to make a picture viewer program?

A remake of official Microsoft tutorial how to make a picture viewer application quickly.

Posted by on - Basic Client Side Coding

The source tutorial:

Tutorial steps were made quicker, so you can make this program a lot faster.

To make programs programmed in C#, first you'll need Micro$oft Visual C# 2010 Express:

Direct link:

After Installation

The difference between solution and project terms:
a solution can hold many projects
a project can hold many files

Projects can be compiled (made actual programs) separately.

Also remember to use saving option often during this tutorial. (CTRL + S, or Save icon shown below in the picture.)

Save icon

How to make a picture viewer?

1. Run Visual C# 2010
2. Select New Project, select Windows Forms Application

Step 2: New Project

3. Name it PictureViewer

4. Click Save All icon to save the whole solution

Step 4: Save all

5. Name and Solution Name should be e.g. PictureViewer
6. Press F5 on the keyboard to compile and run the program to see it
7. Close your program window
8. In C# Express, select your window/form so it's active and its properties are displayed

Step 8: Form1 Design

9. Set Text property to Picture Viewer (with a space between, it's allowed)

Step 9: Text property

10. Set Size property to 550, 350

Step 10: Size property

11. Choose from Toolbox a container called TableLayoutPanel, double click it.

Step 11: TableLayoutPanel form

12. Select this TableLayout Panel, so its properties (and not the main form) are displayed

Step 12: Selecting TableLayoutPanel

13. Select its Dock property and set it to the middle

Step 13: TableLayoutPanel Dock property

14. Click the triangle/arrow of your TableLayoutPanel (in the upper right corner) to display TableLayoutPanel Tasks

Step 14: Arrow selection

15. Select Edit Rows and Columns

Step 15: TableLayoutPanel Tasks

16. In Column and Row Styles set Column1 to 15%, and Column2 to 85%, then next to "Show:" choose Rows

Step 16: Column styles

17. Set Row1 to 90%, and Row2 to 10%, and click OK

Step 17: Row styles

Step 17,5: new TableLayoutPanel

18. From Toolbox, category Common Controls, add PictureBox

Step 18: PictureBox form

19. Select PictureBox Tasks, click Dock in Parent Container

Step 19: Docking in Parent Container

20. Change PictureBox ColumnSpan property to 2

Step 20: ColumnSpan property

21. Make sure TableLayoutPanel is selected, and not PictureBox in Properties

22. Add CheckBox from Common Controls/Toolbox

Step 22: CheckBox form

23. Change CheckBox's Text Property to Stretch

Step 23: CheckBox's Text property (Stretch)

24. Add FlowLayoutPanel from Toolbox/Containers

Step 24: FlowLayoutPanel form

25. Dock it in Parent Container

Step 25: FlowLayoutPanel: docking in Container

26. Make sure FlowLayoutPanel is selected (see Properties section at the side)

27. Add four buttons from Toolbox/Common Controls/Button

Step 27: Button form

28. Select each button, and set their Text (TEXT, NOT NAME!) properties as follows:
button1 -> Select a picture
button2 -> Clear the picture
button3 -> Set the background colour
button4 -> Close

29. Hold CTRL key (on the keyboard), and select each button, go to Properties section, set AutoSize property to True

Step 29: Button AutoSize property

30. Deselect all buttons by clicking elsewhere, then click each button separately, and change their Name property (this time NAME property, not Text):
button1 -> selectButton
button2 -> clearButton
button3 -> backgroundButton
button4 -> closeButton

31. Double click each existing button in the form (not Toolbox), plus double-click the checkbox, to insert appropriate code to the editor

You should see following code:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace PictureViewer2
    public partial class Form1 : Form
        public Form1()

        private void selectButton_Click(object sender, EventArgs e)


        private void clearButton_Click(object sender, EventArgs e)


        private void backgroundButton_Click(object sender, EventArgs e)


        private void closeButton_Click(object sender, EventArgs e)


        private void checkBox1_CheckedChanged(object sender, EventArgs e)


Step 31: Form1.cs all code

32. Go to Toolbox/Dialogs, choose ColorDialog and OpenFileDialog (double-click to add them)

Step 32: Dialogs, dialog forms

Step 32,5: Dialogs added

33. Change OpenFileDialog1's Filter property to:
JPEG Files (*.jpg)|*.jpg|PNG Files (*.png)|*.png|BMP Files (*.bmp)|*.bmp|All files (*.*)|*.*
(CTRL + C to copy this text, and then CTRL+V to insert it there in the Filter property box.)

Step 33: Filter property

34. Change Title property to Select a picture

Step 34: Title property

35. Now you need to go to Form1.cs tab (not Form1.cs [Design]!), and write some new code:

private void selectButton_Click(object sender, EventArgs e)
    if (openFileDialog1.ShowDialog() == DialogResult.OK)

private void clearButton_Click(object sender, EventArgs e)
    pictureBox1.Image = null;

private void backgroundButton_Click(object sender, EventArgs e)
    if (colorDialog1.ShowDialog() == DialogResult.OK)
        pictureBox1.BackColor = colorDialog1.Color;

private void closeButton_Click(object sender, EventArgs e)

private void checkBox1_CheckedChanged(object sender, EventArgs e)
    if (checkBox1.Checked)
        pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
        pictureBox1.SizeMode = PictureBoxSizeMode.Normal;

Step 35: Form1.cs, the whole code

36. Press F5 to run your program, and test it all out!

That's all to make a simple picture viewer quickly. For more information and explanations you can go here:


This comment is currently awaiting admin approval, join now to view.

Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.