For all programmers who are skilled in C-style languages, and beginners who fish for new experience with these!

Report article RSS Feed C#: How to make a picture viewer program?

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

Posted by feillyne on Jul 20th, 2010
Basic Client Side Coding.

The source tutorial:
Msdn.microsoft.com

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:
Microsoft.com

Direct link:
Download.microsoft.com

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

Moddb.com

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:

csharp 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()
        {
            InitializeComponent();
        }

        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:

csharp code:
private void selectButton_Click(object sender, EventArgs e)
{
    if (openFileDialog1.ShowDialog() == DialogResult.OK)
    {
        pictureBox1.Load(openFileDialog1.FileName);  
    }
}

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)
{
    this.Close();
}

private void checkBox1_CheckedChanged(object sender, EventArgs e)
{
    if (checkBox1.Checked)
        pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
    else
        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:
Msdn.microsoft.com

Post comment Comments
Guest
Guest Aug 25 2013, 11:43pm says:

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

Post a Comment
click to sign in

You are not logged in, your comment will be anonymous unless you join the community today (totally free - or sign in with your social account on the right) which we encourage all contributors to do.

2000 characters limit; HTML formatting and smileys are not supported - text only

Established
Jul 20, 2010
Privacy
Public
Subscription
Open to all members
Contact
Send Message
Email
Members Only
Membership
Join this group
Group Watch
Track this group
Tutorial
Browse
Tutorials
Report Abuse
Report article
Related Groups
Curly Bracket Programming Realm
Curly Bracket Programming Realm Hobbies & Interests group with 74 members