C# – Graphics – Display an Image

Graphics is the class primarily used to display graphics in .Net based Windows Applications. .Net provides, multiple classes to deal with graphics objects/shapes; pen, brush, rectangle, circle, etc,.

In this article, I am going to explain, how to display an image using C# code.

I have used Graphics and Image .Net classes in my program to render the image on the Windows Form. I will explain these classes after the program execution.

Lets’ create a sample Windows Forms Application.

Step 1. Create a Windows Forms Application. You can refer to this Article “Visual Studio: Creating a project“.

Step 2. From a Toolbox, add a button to the Form. Double click on the button, to add a button click handler.

Step 3. Inside the button click handler, add the below code:

• Graphics class – As I mentioned above, this is the primary class we use to provide graphics capabilities to the .Net Windows-based Application. When we draw something on the window, we just need to get its’ canvas details; so that we can render the graphics on the window’s canvas (what we call Device Context); the Graphics object encapsulates all these details. How do we get Graphics objects? The below statement will get the Graphics object:

Graphics g = this.CreateGraphics();

• Image class – Image class provides useful methods to load the images into the memory. How do we load the image from the file? The below statement will help to load the image from the file and create an Image object.

Image img = Image.FromFile(@"C:\Users\Public\Pictures\Sample Pictures\Koala.jpg");

• Now we will draw the image on the canvas of the Application window. Graphics class provides useful methods to render or draw the image on the window. The below statement will do: Graphics’s DrawImage method will display the image within the mentioned rectangular area. The image will be resized if the image size is more or less than the mentioned rectangular area.

g.DrawImage(img, 0, 0, this.Width, this.Height);

Here is the code, added into the button click event handler.

        private void btnDraw_Click(object sender, EventArgs e)
        {
            Image img = Image.FromFile(@"C:\Users\Public\Pictures\Sample Pictures\Koala.jpg");

            Graphics g = this.CreateGraphics();
            g.DrawImage(img, 0, 0, this.Width, this.Height);

            g.Dispose();
        }

Step 4. Compile & Run the Application. Click on the button and you will see an image drawn on the Application window.

Have we done with this.? Not yet. Let me show you one interesting thing. Move the Application window, around the screen. And NOTICE THAT, the portion of the image drawn on the window was erased. Why? Will explain in the next step.

Step 5. Windows Applications are Event-Driven or Message Driven; that means, Applications will respond based on an Event or Message generated. For example, Mouse button click, press a Key from the Key Board, etc,. Similarly, Windows will draw the Application window when a PAINT message is generated. We have written our code in the “button click” event. So this Event was generated when we click on the button, and our code was executed to draw the message. But this is NOT the place we draw the image. We must place our code in the PAINT message; instead of a button click event.

We will add a PAINT event handler and move our code into the event handler. We slightly modify our code; we will have the Graphics object directly from the PAINT event handler’s argument “PaintEventArgs e“. So we no need to call:

Graphics g = this.CreateGraphics();

instead, we use below statement:

Graphics g = e.Graphics;

Step 6. Re-compile & Run the program; and observe the results. Lets’ put all together, here is the code: I slightly modified the code to improve the performance.

(Raju)