Drawing and Persisting
One of the common problems for newcomers to graphics in .Net is the tricky business of persistence. Unless you get your drawing code correctly written and in the right place it may appear the first time, but will disappear partially or totally when the form is moved or if other windows are displayed on top of it and in fact in several other situations.
Different scenarios will call for different solutions to this problem. When drawing directly on the form you will often be able to avoid the “disappearing graphic” problem simply by placing your code in the form’s OnPaint event. This is the approach we will use for our Pie Chart demonstration.
If you haven’t accessed OnPaint before, you can locate it by selecting “(Overrides)” from the left hand dropdown list in the Code Window and then scrolling down, quite a long way, until you find OnPaint.
Controlling when and how often drawings are refreshed is a topic we will address many times in the coming series of articles. For now, we will try to keep it simple.
The Graphics Object
The form has a Graphics Object associated with it. Some people like to think of this object as a canvas on which everything that appears on the surface of the form is drawn. An overlay on the form, perhaps. And for our purposes in this article, that description is certainly accurate enough.
We write code for this Graphics Object, which opens the way for us to use the wide range of drawing methods and properties that subsequently become available. You will see a couple of examples of this very shortly.
Getting Started
First, we create a variable and assign the Form’s Graphics Object to it:
Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
Dim g As Graphics = e.Graphics
If you are entering this code step by step using Visual Studio as you read this article, then try starting a new line of code and typing “g.” . Intellisense will immediately show you the very impressive range of methods and properties on hand for your use and pleasure.
For now though, we are going to limit ourselves to setting the SmoothingMode property. Selecting a SmoothingMode of HighQuality will reduce jagged lines effect to a minimum. Most quality improvements come at a price and very often, the price is reduced speed of display. However, our example is undemanding on resources, so this is unlikely to be a factor that you need worry about.
Add this line to the OnPaint event:
g.SmoothingMode = Drawing2D.SmoothingMode.HighQuality
Location and Size
First, we have to decide two things:
1. Where we want to place the chart on the form
2. What size we want the chart to be.
Once these decisions are made, we employ another object from the .Net Graphics Class to make use of this information. That object is a Rectangle.
The key concept to keep in mind here is that a Rectangle is an actual object, and not merely the shape that it represents. It is easy to get confused with objects such as Rectangles, Points, Sizes and so on, because we often tend to see them in our mind’s eye as abstract rather than physical. But a Rectangle object in the Graphics Class is as much a real object as any other in the Framework.
Passing our location and size choices to the Rectangle object takes just one line of code:
Dim rect As Rectangle = New Rectangle(100, 105, 150, 150)
In the above code, the four values represent:
100 – the X Position of the Rectangle,
i.e. the number of pixels from the left hand side of the form to the left side of the Rectangle.
105 – the Y Position of the Rectangle.
The number of pixels from the top of the form to the top of the Rectangle.
150 – the Width of the Rectangle.
As the Pie Chart will take up all available space inside this Rectangle, it follows that this will also be the width of the pie.
150 – the Height of the Rectangle
Therefore also the height of the pie.
Although it is traditional to use a circle to display a pie chart, this isn’t necessary. You may for instance prefer to create an oval chart, in which case you need only change the Width or Height values to your preference.