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:

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

 

Step 2

 

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

 

 

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

 

 

Step 3

 

Now click on the Percent of Column1 and change it to 15% then change the Percent of Column2 to 85%.

 

 

Now click on the Drop Down Button and select the Rows. Change the Percent of Row1 to 90% and Row2 to 10% and then click "Ok".

 

 

Now your Form will look something like this:

 

 

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".

 

 

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

 

 

Step 5

 

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

 

 

Step 6

 

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

1. Select
2. Clear
3. Set the Background Color
4. Close

Also, change their name as follows:

1. selectbtn
2. clearbtn
3. bckgrndbtn
4. 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:

 

 

Step 7

 

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

 

 

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

1. 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.
2. Change its Title Property to "Select a Picture".

 

Step 8

 

Now the main part is 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".

 

 

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

 

 

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