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.

This is a detailed tutorial about making a simple Screen Capture (Screenshot Capture) application in C#. The features are: Take screenshot, view it and save it. We will be making a simple application but if you are little bit good with C# then you can enhance it and make it much better.

Setting up the Form

For this tutorial we will need 2 buttons, a timer, SaveFileDialog and a PictureBox. Here’s the info:

1. Add a button first and set its “Text” property to “Take Screenshot” and “Name” property to “button1″.
2. Add another button and set “Text” property to “Save Screenshot”, set its “Enabled” property to “False” and “Name” property to “button2″.
3. Add a timer and set it “Interval” to “500″ and make sure its “Enabled” property is set to “False”..
4. Now add SaveFileDialog and set “Filter” to ” JPEG Files|*.jpg|GIF Files|*.gif|PNG Files|*.png “.
5. Finally, add a Picturebox.

That’s it. The form is now set-up. Lets get on with the coding.

The Coding

First of all, declare these variables at the top of the form; i.e: just above “public form1() { …… “.

Graphics g;

// This will get the Size (width & height) of the screen.
Size screenBounds = Screen.PrimaryScreen.Bounds.Size;

public Form1()
 {
 InitializeComponent();
 }

Okay. Now double-click “Take Screenshot” button which will automatically add the “Click” event for it. Use this code:

private void button1_Click(object sender, EventArgs e)
{
   // We need to hide the form so that we can
   // capture the area behind it.
   this.Hide();
   timer1.Start();
}

We started the Timer in the above code. Now lets put it to some use.

Double-click the timer which will automatically add the “Tick” event for it. Use this code:

private void timer1_Tick(object sender, EventArgs e)
{
   // The screenshot will be stored in this bitmap.
   Bitmap capture = new Bitmap(screenBounds.Width, screenBounds.Height);

   // The code below takes the screenshot and
   // saves it in "capture" bitmap.
   g = Graphics.FromImage(capture);
   g.CopyFromScreen(Point.Empty, Point.Empty, screenBounds);

   // This code assigns the screenshot
   // to the Picturebox so that we can view it
   pictureBox1.Image = capture;

   // The code below make the form visible again, enables the "Save" button and stops the timer.
   this.Show();
   button2.Enabled = true;
   timer1.Stop();
}

The Screenshot capturing and showing it on the picturebox part is done now. Now let’s add the code for the “Save Screenshot” button.

Double-click the Save Screenshot button which adds the “Click” event. Use this code:

private void button2_Click(object sender, EventArgs e)
{
// Show the SaveFileDialog
DialogResult res = saveFileDialog1.ShowDialog();

// Saves the screenshot if the OK button is clicked.
if (res == DialogResult.OK)
{
// This will get the extension of the saved file
string ext = System.IO.Path.GetExtension(saveFileDialog1.FileName);

if(ext == ".jpg")
pictureBox1.Image.Save(saveFileDialog1.FileName, System.Drawing.Imaging.ImageFormat.Jpeg);
else if(ext == ".gif")
pictureBox1.Image.Save(saveFileDialog1.FileName, System.Drawing.Imaging.ImageFormat.Gif);
else if(ext == ".png")
pictureBox1.Image.Save(saveFileDialog1.FileName, System.Drawing.Imaging.ImageFormat.Png);
}
}

That’s it! We are done.

Source Code

Download Now (36 Kb)

Feedback and comments are warmly welcome .