Creating Picture Viewer Using C# in .NET 4.5

Introduction

In this article, you will learn how to create a Picture Viewer using C# in .NET 4.5.

Step 1. Create a new Windows Application by selecting Windows Form Application from the starting page of the Visual Studio. Do the following changes in the Property section of the form:

Change its size to 550,350.
Set its Text to Picture Viewer.

Step 2. Select a Table Layout Panel from the Toolbox. Change its dock Property to Fill.

Toolbox

Now click on the Black small triangle given on the Table Layout Panel and select "Edit Rows and Columns".

Edit Rows

Step 3. Now click on the Percent of Column 1 and change it to 15% then change the Percent of Column 2 to 85%.

Percent of Column

Now click on the Drop drop-down button and select the Rows. Change the Percentage of Row1 to 90% and Row2 to 10% and then click "OK".

Columns

Now your Form will look something like this.

Form

Step 4. Add a Picture box to your form by choosing it from the Toolbox. Change its Dock Property by clicking on the Black triangle and selecting "Dock in Parent Container".

Black triangle

Make the Picture Box span both columns by changing its Column Span Property. Change the Column Span Property of Picture Box to 2, and also set the Border Style Property to Fixed3D so that when no image is selected then it will show a blank frame.

Column Span

Step 5. Now add a check box from the Toolbox, it will be added to the next free cell and renamed it "Stretch". It will be used to stretch your image with just a single click. Then again go to the Toolbox and pick a Flow Layout Panel, change its Dock property to Fill.

Layout Panel

Step 6. Select a Button control from the Toolbox and copy it four times. Change the Text Property of each button as follows.

Select
Clear
Set the Background Color
Close

Also, change their name as follows.

selectbtn
clearbtn
bckgrndbtn
closebtn

Click on any of the buttons, hold the CTRL button, and select all four buttons. After that go to the Property and change the Autosize Property to True, this will make the buttons adjust themselves automatically so that all the Text can be seen. Now your form will look like this.

Picture viewer

Step 7. Now you must select two Dialog Components for your Form. First, select the OpenFileDialog and then select the ColorDialog from the Toolbox.

ColorDialog

Now you must make some changes in the Property of openFileDialog like.

Change its Filter Property to "JPEG Files (*.jpg)|*.jpg|PNG Files (*.png)|*.png|BMP Files (*.bmp)|*.bmp|All files (*.*)|*.*". You can just copy this one from here.
Change its Title Property to "Select a Picture".

Step 8. Now the main partis the code. You must write the following code in the "Select" button so that it can use OpenFileDialog to browse a file and open it.

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

Double-click on the "Clear" button and write this code.

private void clearbtn_Click(object sender, EventArgs e)  
{  
    pictureBox1.Image = null;  
}

This will be used to clear the selected Image.

Double-click on the "Close" button and write this code.

private void closebtn_Click(object sender, EventArgs e)  
{  
    this.Close();  
}

This will be used to close the output window.

Double-click on the "Set the Background Color" button and write the following code.

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

This will be used to change and set the Background color.

Double-click on "Check Box Stretch" and write the following code.

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

Step 9. So, complete coding will be as follows.

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
    }
    private void selectbtn_Click(object sender, EventArgs e)
    {
        if (openFileDialog1.ShowDialog() == DialogResult.OK)
        {
            pictureBox1.Load(openFileDialog1.FileName);
        }
    }
    private void clearbtn_Click(object sender, EventArgs e)
    {
        pictureBox1.Image = null;
    }
    private void bckgrndbtn_Click(object sender, EventArgs e)
    {
        if (colorDialog1.ShowDialog() == DialogResult.OK)
            pictureBox1.BackColor = colorDialog1.Color;
    }
    private void closebtn_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 10. Now run your program and select the color of your choice by clicking on "Set The Background Color".

Set The Background Color

Select an image by clicking on the "Select" button. Your image will look like this.

Select

As you click on "Stretch your Image" it will look like this.

Stretch