• Like
Learning by sample    gdi+ -gradient
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Learning by sample gdi+ -gradient


For more tutorial visit www.bukansembarang.info

For more tutorial visit www.bukansembarang.info

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. GDI+ : Gradient 2010Learning By Sample Series GDI+ : Gradient www.BukanSembarang.Info©2010 Page 0 www.BukanSembarang.Info©2010
  • 2. GDI+ : Gradient 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 ?). www.BukanSembarang.Info©2010 Page 1
  • 3. GDI+ : Gradient 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……. www.BukanSembarang.Info©2010 Page 2
  • 4. GDI+ : Gradient 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 www.BukanSembarang.Info©2010 Page 3
  • 5. GDI+ : Gradient 2010 4. In newly created web page, insert new table which has 3 rows and 2 columns, by clicking menu Table Insert Table and in available dialog box set its rows and columns value : 5. Then type descriptive text in first and second row at first column www.BukanSembarang.Info©2010 Page 4
  • 6. GDI+ : Gradient 2010 6. Later put two DropDownList in each rows at second column : 7. Next, put a Button in last row at first column and set its Text property just like this following picture : 8. Last step in design mode is placing an Image control just right after Button : www.BukanSembarang.Info©2010 Page 5
  • 7. GDI+ : Gradient 2010 9. Double click at any empty space in Design mode and we should be redirect in to Page_Load event, and type this codes : a. First thing first, in this part of code we declare Color enumeration. As you should know that there are KnownColor enumeration in Color classes at .NET Framework. b. Then why we should start it at number 27 ? It just because the first color until color number 27 merely contains known color from client desktop theme. It also happen in last 8 known color, thus we do the looping from 27 until last 8 only. c. And the rest is easy, we just put all the color’s array into available DropDownList www.BukanSembarang.Info©2010 Page 6
  • 8. GDI+ : Gradient 2010 10. Now let’s turn again into Code Editor by double clicking the only available Button and start typing this lines of code : 11. Some typo errors shown ? Don’t worry, just add this line at top of Code Editor : 12. Want some explanations for what the Button do ? Here it go : a. First, we create the “canvas” for our next gradient brush b. Next we create the “core” gradient brush with Horizontal Linear mode, you can also modify it using other mode such as Diagonal or Vertical www.BukanSembarang.Info©2010 Page 7
  • 9. GDI+ : Gradient 2010 c. In following part, we create a virtual rectangle to hold the gradient sample d. Afterward, just save it in temporary image file and display it in Image control e. Of course, never forget to dispose all the object 13. Okay then, let’s execute this web page and see the result : www.BukanSembarang.Info©2010 Page 8
  • 10. GDI+ : Gradient 2010 14. What do you think ? Too easy ? Well, have fun to try it and we will create another simple and astonishing sample in next chapter….. www.BukanSembarang.Info©2010 Page 9