w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0

Page 0

GDI+ : Shapes 2010

w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0

GDI+ : Shapes

Learning By Sample Series

w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0

Page 1

GDI+ : Shapes 2010

Foreword

Learning By Sample ?

So, why should I made this tutorial freely accessed by everyone ? Well, surely I

am just nobody, I also just another ordinary person with ordinary knowledge. However,

I always feel that some persons in the internet giving away their tutorial for free and I

feel being helped by them. Then, I remember one of my senior wisdom words : “If you

want to be given more, then start to give more”. And of course, I really believe those

words, since that I already proof it to be right all the time.

Also, I’m not an English native speaker, however, I just try to improve my

English in any other way, especially in written format. Thus, I think writing is the best

practice to improve my English freely. However, you will find many grammatical errors

in my tutorial, so please send me comments and also suggestion to improve it.

Then, why the format using Learning By Sample series ? Is it really different with

other tutorials out there ? Ehm, I already wrote three books (in Indonesian) using this

kind of format, and many readers already contact me about how this format really help

them to learn from the scratch. So, why in the world I’m not re-create it in English

format, right ? Eventhough actually, it is similar with Hands On Lab series which

already famous in Microsoft site previously.

All of my lesson also being designed as short samples and short time exercise.

Thus, I hope that each of tutorial series would take only at least 10-15 minutes

maximum to learn. Why keep it short ? Because many beginner (and even expert) will

find boring whenever they must keep studying more than 15 minutes (but you will

never get bored when you online in such time right ?).

w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0

Page 2

GDI+ : Shapes 2010

Another reason is just because many of samples in this series come up from my

lecturing task exercise. So, I just try to compile all my lab exercises in order to keep it

tidy and also reusable for my students. That’s why you will find many unsorted course

material inside these series, however, just take a seat and enjoy the ride !

Requirements

In this series, I try to give simple example about GDI+. So what is GDI+ anyway ?

GDI+ or GraphicsDrawing Interface is merely part of .NET Framework which entirely

purposed in manipulating graphics. However I’m not going to make you understand

complex theory about this class. I just try to make you understand it in very simple and

stupid way.

All of my samples in this series use Visual Web Developer 2010 Express edition

however you can also do it all using Visual Studio. If you really want to follow this

series, then you should aware that basic programming knowledge is needed. You

should also familiar with ASP .NET especially for version 3.5 above.

FYI, I’m a VB guy, so please don’t complaint if I use VB entirely in this series. But

nowadays, there’s no such useful things if we argue about language differences,

because I just try to share something that I know. So, if you don’t like VB and want to

have another tutorial with your own favourit language, then I’d be happy to read it.

Now, let’s get started…….

w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0

Page 3

GDI+ : Shapes 2010

Let’s Get Started

1. First, ensure that you already open Visual Web Developer 2010 Express Edition

2. Create a newly blank website and give it a name

3. Now, let’s create a new blank web page

w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0

Page 4

GDI+ : Shapes 2010

4. Then put a RadioButtonList control into our newly created web page.

5. RadioButtonList control should contains many items of Option button inside it.

There are many ways to set those items, however in this sample we just set it using

naïve ways which can be obtained by clicking its Smart Tag and choose menu Edit

Items. Later just fill in three options inside it : Square, Circle and Polygon. These

options are shapes type which will be created in next steps.

w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0

Page 5

GDI+ : Shapes 2010

6. Now, put a Button below the RadioButtonList and set its Text property into Create

Shapes.

w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0

Page 6

GDI+ : Shapes 2010

7. Last step in design mode is placing an Image control underneath the Button

8. Now, let’s turn out into Code Editor and type our first line of code at the top :

9. Go back to Design mode and double click at Button, then let’s type the core process

of this web pages :

w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0

Page 7

GDI+ : Shapes 2010

10. So, want an explanation for what happen in the code ? Here we go :

a. First, we create a canvas from Bitmap object as a square in size of 300 pixels

(surely you can modify it based on your requirement) and we make this

canvas available at Graphics mode.

b. Then we must detect which option is chosen by user. If user click at first

option, then we draw a black rectangle, and a black circle if user put his

option at second option.

w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0

Page 8

GDI+ : Shapes 2010

c. The last option should have a polygon drawn in web page. When you draw a

polygon, first thing that you must do is defining point coordinat which will

be assumed as point array. I am an awful person in math, thus the polygon

result in this sample is not a good one. If you want to create a better polygon

than you should design it more carefully.

d. Afterward just save the result in a temporary image file and display it using

Image control.

w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0

Page 9

GDI+ : Shapes 2010

e. Oh, also don’t forget to dispose all the objects thus we can reuse again and

again.

11. Very simple right ? Now execute the web page and here is some screenshot sample

from this simple web page :

w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0

Page 10

GDI+ : Shapes 2010

w w w . B u k a n S e m b a r a n g . I n f o © 2 0 1 0

Page 11

GDI+ : Shapes 2010

12. Hope you can learn it in quick and easy way, see you in next chapter…..