Farooq Azam

A detailed tutorial about creating an Image Viewer or Picture Viewer application in C#. This application also converts Images from one type to another.

Following are the features of this application:

• Open / Save images.
• Convert images.
• Rotate Images.
• All popular image formats are supported.

Let’s get started!

Setting up the Designer

For this application you will need an openFileDialog, saveFileDialog, pictureBox and a few buttons.

1. Add openFileDialog and saveFileDialog to the form.
2. Use this filter for the openFileDialog and saveFileDialog: ” JPEG File|*.jpg|GIF File|*.gif|PNG File|*.png|BMP File|*.bmp “
3. Add 4 buttons (refer to the image above). Name the buttons just like I’ve did in that image.
4. Set the “Enabled” property for “Save” button to “False”. And set “Visible” to “False” for “RotateClockwise” and “RotateCounterclockwise” buttons.
5. Add a pictureBox and place it under the buttons (refer to the image above).

That’s it. Now lets get on with the code.

The Code

First of all, add this code to the very top of your form:

using System.Drawing.Imaging;

Declare these methods after the “public Form1() { ….” method:

// This method will be used to save the image
private void saveImage(string ext)
{
   ImageFormat format = null;

   if(ext == ".gif")
      format = ImageFormat.Gif;
   else if(ext == ".jpg" || ext == ".jpeg")
      format = ImageFormat.Jpeg;
   else if(ext == "png")
      format = ImageFormat.Png;
   else if(ext == ".bmp")
      format = ImageFormat.Bmp;

   pictureBox1.Image.Save(saveFileDialog1.FileName, format);

}

// This method will be used for rotating the image.
private void rotateImage(int angle)
{
   Bitmap img = new Bitmap(pictureBox1.Image);

   // 0 = Clockwise, 1 = counter-clockwise

   if (angle == 0)
      img.RotateFlip(RotateFlipType.Rotate90FlipNone);
   else if (angle == 1)
      img.RotateFlip(RotateFlipType.Rotate90FlipXY);

   pictureBox1.Size = img.Size;
   pictureBox1.Image = img;
}

Double-click the “Open” button to add the “Click()” event for it and use this code:

private void openBtn_Click(object sender, EventArgs e)
{
   DialogResult result = openFileDialog1.ShowDialog();
   if (result == DialogResult.OK)
   {
      Image img = Image.FromFile(openFileDialog1.FileName);

      // Assigns the opened image to picturebox.
      pictureBox1.Image = img;

      // Makes the pictureBox width/height same as the opened image.
      pictureBox1.Width = img.Width;
      pictureBox1.Height = img.Height;
   }

   // Enables the Save button.
   saveBtn.Enabled = true;

   // Shows the RotateClockwise and Counterclockwise buttons.
   rotateClockwise.Show();
   rotateCounter.Show();
 }

Double-click the Save button and use this code:

private void saveBtn_Click(object sender, EventArgs e)
{
   DialogResult res = saveFileDialog1.ShowDialog();
   if (res == DialogResult.OK)
   {
      // Extracts the extension from the opened file.
      string ext = System.IO.Path.GetExtension(saveFileDialog1.FileName);
      ext = ext.ToLower();

      saveImage(ext);
   }
}

Double-click the RotateClockwise button and use this code:

private void rotateClockwise_Click(object sender, EventArgs e)
{
   // Calls the rotateImage method and passes the parameter "0"
   // Refer to the rotateImage method to see how it works.
   rotateImage(0);
}

And lastly, double-click the Rotate Counterclockwise button and use this code:

 private void rotateCounter_Click(object sender, EventArgs e)
{
   // 1 = counter-clockwise
   rotateImage(1);
}

That’s it! We are done.

Source Code

ImageViewer Source – Download Now (42 Kb)

——

Feedback and comments are warmly welcome.