How to Specify the Color of Controls
You can specify a control’s color using the Color structure. The simplest way to specify
a color is to use one of the predefined properties located within System.Drawing.Color,
as the following example demonstrates:
' VB
Button1.ForeColor = Color.Red
Button1.BackColor = Color.Blue
// C#
button1.ForeColor = Color.Red;
button1.BackColor = Color.Blue;
If you need to specify a custom color, use the static Color.FromArgb method. The
method has several overloads, so you can specify the color by using a single byte, by
specifying the red, green, and blue levels individually, or by using other information.
The following example illustrates how to specify color by providing three integers, for
red, green, and blue:
Lesson 1: Drawing Graphics 227
' VB
Button1.ForeColor = Color.FromArgb(10, 200, 200)
Button1.BackColor = Color.FromArgb(200, 5, 5)
// C#
button1.ForeColor = Color.FromArgb(10, 200, 200);
button1.BackColor = Color.FromArgb(200, 5, 5);
' VB
' Create a graphics object from the form
Dim g As Graphics = Me.CreateGraphics
' Create a pen object with which to draw
Dim p As Pen = New Pen(Color.Red, 7)
' Draw the line
g.DrawLine(p, 1, 1, 100, 100)
// C#
// Create a graphics object from the form
Graphics g = this.CreateGraphics();
// Create a pen object with which to draw
Pen p = new Pen(Color.Red, 7);
// Draw the line
g.DrawLine(p, 1, 1, 100, 100);
Figure 6-1 Use Graphics.DrawLine to create straight lines
Similarly, the following code draws a blue pie shape with a 60-degree angle, as shown
in Figure 6-2:
' VB
Dim g As Graphics = Me.CreateGraphics
Dim p As Pen = New Pen(Color.Blue, 3)
g.DrawPie(p, 1, 1, 100, 100, -30, 60)
// C#
Graphics g = this.CreateGraphics();
Pen p = new Pen(Color.Blue, 3);
g.DrawPie(p, 1, 1, 100, 100, -30, 60);
The Graphics.DrawLines, Graphics.DrawPolygon, and Graphics.DrawRectangles methods
accept arrays as parameters to allow you to create more complex shapes. For example,
the following code draws a purple, five-sided polygon, as shown in Figure 6-3:
' VB
Dim g As Graphics = Me.CreateGraphics
Dim p As Pen = New Pen(Color.MediumPurple, 2)
' Create an array of points
Dim points As Point() = New Point() {New Point(10, 10), _
New Point(10, 100), _
New Point(50, 65), _
New Point(100, 100), _
New Point(85, 40)}
' Draw a shape defined by the array of points
g.DrawPolygon(p, points)
// C#
Graphics g = this.CreateGraphics();
Pen p = new Pen(Color.MediumPurple, 2);
// Create an array of points
Point[] points = new Point[]
{new Point(10, 10),
new Point(10, 100),
new Point(50, 65),
new Point(100, 100),
new Point(85, 40)};
// Draw a shape defined by the array of points
g.DrawPolygon(p, points);
Figure 6-3 Use Graphics.DrawPolygon to create shapes made of multiple lines
Lesson 1: Drawing Graphics 231
NOTE Horizontal, Then Vertical
When you pass coordinates to any .NET Framework method, you pass the horizontal (x) coordinate
first, and then the vertical (y) coordinate second. In a 100-by-100 pixel image, (0,0) is the upper-left
corner, (100,0) is the upper-right corner, (0, 100) is the lower-left corner, and (100,100) is the
lower-right corner.
How to Customize Pens
Besides controlling the color and size of a pen, which are specified in the Pen constructor,
you can also control the pattern and endcaps. The endcaps are the ends of
the line, and you can use them to create arrows and other special effects.
By default, pens draw solid lines. To draw a dotted line, create an instance of the Pen class,
and then set the Pen.DashStyle property to one of these values: DashStyle.Dash, Dash-
Style.DashDot, DashStyle.DashDotDot, DashStyle.Dot, or DashStyle.Solid. The following
code, which requires the System.Drawing.Drawing2D namespace, demonstrates each of
these pen styles and creates the result shown in Figure 6-4:
' VB
Dim g As Graphics = Me.CreateGraphics
Dim p As Pen = New Pen(Color.Red, 7)
p.DashStyle = DashStyle.Dot
g.DrawLine(p, 50, 25, 400, 25)
p.DashStyle = DashStyle.Dash
g.DrawLine(p, 50, 50, 400, 50)
p.DashStyle = DashStyle.DashDot
g.DrawLine(p, 50, 75, 400, 75)
p.DashStyle = DashStyle.DashDotDot
g.DrawLine(p, 50, 100, 400, 100)
p.DashStyle = DashStyle.Solid
g.DrawLine(p, 50, 125, 400, 125)
// C#
Graphics g = this.CreateGraphics();
Pen p = new Pen(Color.Red, 7);
p.DashStyle = DashStyle.Dot;
g.DrawLine(p, 50, 25, 400, 25);
p.DashStyle = DashStyle.Dash;
g.DrawLine(p, 50, 50, 400, 50);
232 Chapter 6 Graphics
p.DashStyle = DashStyle.DashDot;
g.DrawLine(p, 50, 75, 400, 75);
p.DashStyle = DashStyle.DashDotDot;
g.DrawLine(p, 50, 100, 400, 100);
p.DashStyle = DashStyle.Solid;
g.DrawLine(p, 50, 125, 400, 125);
Figure 6-4 The Pen class provides several dash styles
You can also use the Pen.DashOffset and Pen.DashPattern properties to define a custom
dash pattern.
To control the endcaps and create arrows or callouts, modify the Pen.StartCap and
Pen.EndCap properties using the LineCap enumeration. The following code demonstrates
most of the pen cap styles and creates the result shown in Figure 6-5:
' VB
Dim g As Graphics = Me.CreateGraphics
Dim p As Pen = New Pen(Color.Red, 10)
p.StartCap = LineCap.ArrowAnchor
p.EndCap = LineCap.DiamondAnchor
g.DrawLine(p, 50, 25, 400, 25)
p.StartCap = LineCap.SquareAnchor
p.EndCap = LineCap.Triangle
g.DrawLine(p, 50, 50, 400, 50)
p.StartCap = LineCap.Flat
p.EndCap = LineCap.Round
g.DrawLine(p, 50, 75, 400, 75)
p.StartCap = LineCap.RoundAnchor
p.EndCap = LineCap.Square
g.DrawLine(p, 50, 100, 400, 100)
// C#
Graphics g = this.CreateGraphics();
Pen p = new Pen(Color.Red, 10);
Lesson 1: Drawing Graphics 233
p.StartCap = LineCap.ArrowAnchor;
p.EndCap = LineCap.DiamondAnchor;
g.DrawLine(p, 50, 25, 400, 25);
p.StartCap = LineCap.SquareAnchor;
p.EndCap = LineCap.Triangle;
g.DrawLine(p, 50, 50, 400, 50);
p.StartCap = LineCap.Flat;
p.EndCap = LineCap.Round;
g.DrawLine(p, 50, 75, 400, 75);
p.StartCap = LineCap.RoundAnchor;
p.EndCap = LineCap.Square;
g.DrawLine(p, 50, 100, 400, 100);
Figure 6-5 The Pen class provides options for startcaps and endcaps
How to Fill Shapes
For most of the Draw methods, the Graphics class also has Fill methods that draw a
shape and fill in the contents. These methods work exactly like the Draw methods,
except they require an instance of the Brush class instead of the Pen class. The Brush
class is abstract, so you must instantiate one of the following child classes:
System.Drawing.Drawing2D.HatchBrush Defines a rectangular brush with a hatch
style, a foreground color, and a background color
System.Drawing.Drawing2D.LinearGradientBrush Encapsulates a brush with a linear
gradient that provides a visually appealing, professional-looking fill
System.Drawing.Drawing2D.PathGradientBrush Provides similar functionality to
LinearGradientBrush; however, you can define a complex fill pattern that fades
between multiple points
System.Drawing.SolidBrush Defines a brush of a single color
System.Drawing.TextureBrush Defines a brush made from an image that can be
tiled across a shape, like a wallpaper design
234 Chapter 6 Graphics
For example, the following code draws a solid maroon, five-sided polygon, as shown
in Figure 6-6:
' VB
Dim g As Graphics = Me.CreateGraphics
Dim b As Brush = New SolidBrush(Color.Maroon)
Dim points As Point() = New Point() {New Point(10, 10), _
New Point(10, 100), _
New Point(50, 65), _
New Point(100, 100), _
New Point(85, 40)}
g.FillPolygon(b, points)
// C#
Graphics g = this.CreateGraphics();
Brush b = new SolidBrush(Color.Maroon);
Point[] points = new Point[]
{new Point(10, 10),
new Point(10, 100),
new Point(50, 65),
new Point(100, 100),
new Point(85, 40)};
g.FillPolygon(b, points);
Figure 6-6 Use the Brush class with the various Graphics.Fill methods to draw solid objects
You can draw filled objects with an outline by first calling the Graphics.Fill method
and then calling the Graphics.Draw method. For example, the following code draws a
polygon with an outline and a linear gradient fill pattern, as shown in Figure 6-7:
' VB
Dim g As Graphics = Me.CreateGraphics
Dim p As Pen = New Pen(Color.Maroon, 2)
Dim b As Brush = New LinearGradientBrush(New Point(1, 1), New Point(100, 100), _
Color.White, Color.Red)
Dim points As Point() = New Point() {New Point(10, 10), _
New Point(10, 100), _
New Point(50, 65), _
New Point(100, 100), _
New Point(85, 40)}
Lesson 1: Drawing Graphics 235
g.FillPolygon(b, points)
g.DrawPolygon(p, points)
// C#
Graphics g = this.CreateGraphics();
Pen p = new Pen(Color.Maroon, 2);
Brush b = new LinearGradientBrush(new Point(1,1), new Point(100,100),
Color.White, Color.Red);
Point[] points = new Point[]
{new Point(10, 10),
new Point(10, 100),
new Point(50, 65),
new Point(100, 100),
new Point(85, 40)};
g.FillPolygon(b, points);
g.DrawPolygon(p, points);
Figure 6-7 Combine Graphics.Fill and Graphics.Draw methods to create solid objects with outlines
You can use the same techniques to draw on controls, such as buttons or the
instances of the PictureBox class. If you need to fill an entire Graphics object with a single
color, call the Graphics.Clear method.
Lab: Create a Method to Draw a Pie Chart
In this lab, you will create a method to draw a pie chart, and then improve that method
to make the pie chart more visually appealing. If you encounter a problem completing an
exercise, the completed projects are available on the companion CD in the Code folder.
Exercise 1: Draw a Pie Chart
In this exercise, you will write a method that draws a pie chart given an array of data
and a Size structure. At this point, simple black lines will suffice.
1. Navigate to the \<InstallHome>\Chapter06\Lesson1\Exercise1\Partial folder and
open either the C# version or the Visual Basic .NET version of the solution file.
2. Examine the form. The form has a single PictureBox named chart that is bound to
all four sides of the form. Notice that the Paint event calls the Draw method.
236 Chapter 6 Graphics
3. Examine the Draw method that takes no parameters. This method includes
sample data that will be passed as parameters to the drawPieChart method you
will complete. Notice that the drawPieChart method returns an Image object,
which is used to define the chart PictureBox.
4. Examine the PieChartElement class. This simple class contains information to
describe a single section of your pie chart.
5. Examine the drawPieChart method in the Form1 file. It receives two parameters:
an ArrayList containing only PieChartElement objects, and a Size structure.
6. Complete the drawPieChart method. First, define a Bitmap object to be returned,
create a Graphics object from the Bitmap object, and then return the Bitmap
object. For example, the following code would work:
' VB
Dim bm As Bitmap = New Bitmap(s.Width, s.Height)
Dim g As Graphics = Graphics.FromImage(bm)
' TODO: Draw pie chart in g
Return bm
// C#
Bitmap bm = new Bitmap(s.Width, s.Height);
Graphics g = Graphics.FromImage(bm);
// TODO: Draw pie chart in g
return bm;
7. At this point, the project compiles, but if you run the application no pie chart is
drawn. Before you can create a pie chart from the PieChartElement objects in the
ArrayList, you must determine how many degrees each element uses. To do that,
in the drawPieChart method you must calculate the total of the value properties
of all the PieChartElement objects. For example, the following code would work:
' VB
' Calculate total value of all rows
Dim total As Single = 0
For Each e As PieChartElement In elements
If e.value < 0 Then
Throw New ArgumentException("All elements must have positive values")
End If
total += e.value
Next
// C#
// Calculate total value of all rows
float total = 0;
Lesson 1: Drawing Graphics 237
foreach (PieChartElement e in elements)
{
if (e.value < 0)
{
throw new ArgumentException("All elements must have positive values");
}
total += e.value;
}
8. Now you should define the rectangle that the pie chart will consume based on
the Size structure passed to the drawPieChart method as a parameter. The following
code would work, and it provides a sufficient buffer on all sides of the image:
' VB
' Define the rectangle that the pie chart will use
Dim rect As Rectangle = New Rectangle(1, 1, s.Width - 2, s.Height - 2)
// C#
// Define the rectangle that the pie chart will use
Rectangle rect = new Rectangle(1, 1, s.Width - 2, s.Height - 2);
9. Next, define a Pen object with which to draw the pie chart. This can be a simple,
black, one-pixel pen, defined with the following code:
' VB
Dim p As Pen = New Pen(Color.Black, 1)
// C#
Pen p = new Pen(Color.Black, 1);
10. Finally, create a foreach loop that calculates the degrees for each pie chart section,
and draws the pie chart sections. There are many ways to do this, such as the following
code:
' VB
' Draw the first section at 0 degrees
Dim startAngle As Single = 0
' Draw each of the pie shapes
For Each e As PieChartElement In elements
' Calculate the degrees that this section will consume
' based on the percentage of the total
Dim sweepAngle As Single = (e.value / total) * 360
' Draw the pie shape
g.DrawPie(p, rect, startAngle, sweepAngle)
' Calculate the angle for the next pie shape by adding
' the current shape's degrees to the previous total.
startAngle += sweepAngle
Next
238 Chapter 6 Graphics
// C#
// Draw the first section at 0 degrees
float startAngle = 0;
// Draw each of the pie shapes
foreach (PieChartElement e in elements)
{
// Calculate the degrees that this section will consume
// based on the percentage of the total
float sweepAngle = (e.value / total) * 360;
// Draw the pie shape
g.DrawPie(p, rect, startAngle, sweepAngle);
// Calculate the angle for the next pie shape by adding
// the current shape's degrees to the previous total.
startAngle += sweepAngle;
}
11. Build the application and fix any errors; then run the application. Resize the
form, and notice that the pie chart is automatically resized; the Paint event calls
the Draw method when you resize the form.
Exercise 2: Improve the Appearance of the Pie Chart
In this exercise, you will improve the project presented in Exercise 1 to make the pie
chart more visually appealing. Specifically, you fill in each section with a different
color and enable anti-aliasing to smooth the lines.
1. Navigate to the \<InstallHome>\Chapter06\Lesson1\Exercise2\Partial folder,
and open either the C# version or the Visual Basic version of the PieChart project.
Alternatively, you can continue working from the project you created in Exercise 1.
2. First, at the beginning of the drawPieChart method, create an array containing
the colors you want to use in your pie chart. You will assign the colors sequentially,
so do not place similar colors after each other. For the sake of simplicity,
throw an exception if the pie chart has more elements than you have colors in
your array. For example:
' VB
Dim colors As Color() = {Color.Red, Color.Orange, Color.Yellow, Color.Green, _
Color.Blue, Color.Indigo, Color.Violet, Color.DarkRed, Color.DarkOrange, _
Color.DarkSalmon, Color.DarkGreen, Color.DarkBlue, Color.Lavender, _
Color.LightBlue, Color.Coral}
If elements.Count > colors.Length Then
Throw New ArgumentException("Pie chart must have " + _
colors.Length.ToString() + " or fewer elements")
End If
Lesson 1: Drawing Graphics 239
// C#
Color[] colors = { Color.Red, Color.Orange, Color.Yellow, Color.Green,
Color.Blue, Color.Indigo, Color.Violet, Color.DarkRed,
Color.DarkOrange, Color.DarkSalmon, Color.DarkGreen,
Color.DarkBlue, Color.Lavender, Color.LightBlue, Color.Coral };
if (elements.Count > colors.Length)
{
throw new ArgumentException("Pie chart must have " +
colors.Length.ToString() + " or fewer elements");
}
NOTE Keeping It Simple
For the sake of keeping the exercise focused, some aspects of this project are not exactly
as you would design them in the real world. For example, you typically would want to give
the calling application the option of specifying colors for different sections, which could be
done by adding a Color object to the PieChartElement class. In addition, elements of robust
programming such as catching exceptions, validating input, and asserting are omitted from
the examples.
3. You need to track the color in use. Before the foreach loop, initialize an integer to
zero to act as a counter:
' VB
Dim colorNum As Integer = 0
// C#
int colorNum = 0;
4. Within the foreach loop that calls DrawPie, add two lines: one to create a new Brush
object, and a second to call the Graphics.FillPie method. Call Graphics.FillPie
immediately before you call Graphics.DrawPie so that the outline is drawn over the
filled pie. The following code uses the LinearGradientBrush class, which requires
adding the System.Drawing.Drawing2D namespace to the project. Changes are
shown in bold:
' VB
' Draw each of the pie shapes
For Each e As PieChartElement In elements
' Create a brush with a nice gradient
Dim b As Brush = New LinearGradientBrush( _
rect, colors(colorNum), Color.White, 45)
colorNum += 1
' Calculate the degrees that this section will consume
' based on the percentage of the total
Dim sweepAngle As Single = (e.value / total) * 360
240 Chapter 6 Graphics
' Draw the filled-in pie shapes
g.FillPie(b, rect, startAngle, sweepAngle)
' Draw the pie shape
g.DrawPie(p, rect, startAngle, sweepAngle)
' Calculate the angle for the next pie shape by adding
' the current shape's degrees to the previous total.
startAngle += sweepAngle
Next
// C#
// Draw each of the pie shapes
foreach (PieChartElement e in elements)
{
// Create a brush with a nice gradient
Brush b = new LinearGradientBrush(
rect, colors[colorNum++], Color.White, (float)45);
// Calculate the degrees that this section will consume
// based on the percentage of the total
float sweepAngle = (e.value / total) * 360;
// Draw the filled-in pie shapes
g.FillPie(b, rect, startAngle, sweepAngle);
// Draw the pie shape outlines
g.DrawPie(p, rect, startAngle, sweepAngle);
// Calculate the angle for the next pie shape by adding
// the current shape's degrees to the previous total.
startAngle += sweepAngle;
}
5. Now, run the application. Experiment with different brush types to find the one
that is most appealing. Notice that the lines appear a bit jagged; you can make
the lines appear smoother by setting Graphics.SmoothingMode, as the following
line demonstrates:
' VB
g.SmoothingMode = SmoothingMode.HighQuality
// C#
g.SmoothingMode = SmoothingMode.HighQuality;
You can specify a control’s color using the Color structure. The simplest way to specify
a color is to use one of the predefined properties located within System.Drawing.Color,
as the following example demonstrates:
' VB
Button1.ForeColor = Color.Red
Button1.BackColor = Color.Blue
// C#
button1.ForeColor = Color.Red;
button1.BackColor = Color.Blue;
If you need to specify a custom color, use the static Color.FromArgb method. The
method has several overloads, so you can specify the color by using a single byte, by
specifying the red, green, and blue levels individually, or by using other information.
The following example illustrates how to specify color by providing three integers, for
red, green, and blue:
Lesson 1: Drawing Graphics 227
' VB
Button1.ForeColor = Color.FromArgb(10, 200, 200)
Button1.BackColor = Color.FromArgb(200, 5, 5)
// C#
button1.ForeColor = Color.FromArgb(10, 200, 200);
button1.BackColor = Color.FromArgb(200, 5, 5);
' VB
' Create a graphics object from the form
Dim g As Graphics = Me.CreateGraphics
' Create a pen object with which to draw
Dim p As Pen = New Pen(Color.Red, 7)
' Draw the line
g.DrawLine(p, 1, 1, 100, 100)
// C#
// Create a graphics object from the form
Graphics g = this.CreateGraphics();
// Create a pen object with which to draw
Pen p = new Pen(Color.Red, 7);
// Draw the line
g.DrawLine(p, 1, 1, 100, 100);
Figure 6-1 Use Graphics.DrawLine to create straight lines
Similarly, the following code draws a blue pie shape with a 60-degree angle, as shown
in Figure 6-2:
' VB
Dim g As Graphics = Me.CreateGraphics
Dim p As Pen = New Pen(Color.Blue, 3)
g.DrawPie(p, 1, 1, 100, 100, -30, 60)
// C#
Graphics g = this.CreateGraphics();
Pen p = new Pen(Color.Blue, 3);
g.DrawPie(p, 1, 1, 100, 100, -30, 60);
The Graphics.DrawLines, Graphics.DrawPolygon, and Graphics.DrawRectangles methods
accept arrays as parameters to allow you to create more complex shapes. For example,
the following code draws a purple, five-sided polygon, as shown in Figure 6-3:
' VB
Dim g As Graphics = Me.CreateGraphics
Dim p As Pen = New Pen(Color.MediumPurple, 2)
' Create an array of points
Dim points As Point() = New Point() {New Point(10, 10), _
New Point(10, 100), _
New Point(50, 65), _
New Point(100, 100), _
New Point(85, 40)}
' Draw a shape defined by the array of points
g.DrawPolygon(p, points)
// C#
Graphics g = this.CreateGraphics();
Pen p = new Pen(Color.MediumPurple, 2);
// Create an array of points
Point[] points = new Point[]
{new Point(10, 10),
new Point(10, 100),
new Point(50, 65),
new Point(100, 100),
new Point(85, 40)};
// Draw a shape defined by the array of points
g.DrawPolygon(p, points);
Figure 6-3 Use Graphics.DrawPolygon to create shapes made of multiple lines
Lesson 1: Drawing Graphics 231
NOTE Horizontal, Then Vertical
When you pass coordinates to any .NET Framework method, you pass the horizontal (x) coordinate
first, and then the vertical (y) coordinate second. In a 100-by-100 pixel image, (0,0) is the upper-left
corner, (100,0) is the upper-right corner, (0, 100) is the lower-left corner, and (100,100) is the
lower-right corner.
How to Customize Pens
Besides controlling the color and size of a pen, which are specified in the Pen constructor,
you can also control the pattern and endcaps. The endcaps are the ends of
the line, and you can use them to create arrows and other special effects.
By default, pens draw solid lines. To draw a dotted line, create an instance of the Pen class,
and then set the Pen.DashStyle property to one of these values: DashStyle.Dash, Dash-
Style.DashDot, DashStyle.DashDotDot, DashStyle.Dot, or DashStyle.Solid. The following
code, which requires the System.Drawing.Drawing2D namespace, demonstrates each of
these pen styles and creates the result shown in Figure 6-4:
' VB
Dim g As Graphics = Me.CreateGraphics
Dim p As Pen = New Pen(Color.Red, 7)
p.DashStyle = DashStyle.Dot
g.DrawLine(p, 50, 25, 400, 25)
p.DashStyle = DashStyle.Dash
g.DrawLine(p, 50, 50, 400, 50)
p.DashStyle = DashStyle.DashDot
g.DrawLine(p, 50, 75, 400, 75)
p.DashStyle = DashStyle.DashDotDot
g.DrawLine(p, 50, 100, 400, 100)
p.DashStyle = DashStyle.Solid
g.DrawLine(p, 50, 125, 400, 125)
// C#
Graphics g = this.CreateGraphics();
Pen p = new Pen(Color.Red, 7);
p.DashStyle = DashStyle.Dot;
g.DrawLine(p, 50, 25, 400, 25);
p.DashStyle = DashStyle.Dash;
g.DrawLine(p, 50, 50, 400, 50);
232 Chapter 6 Graphics
p.DashStyle = DashStyle.DashDot;
g.DrawLine(p, 50, 75, 400, 75);
p.DashStyle = DashStyle.DashDotDot;
g.DrawLine(p, 50, 100, 400, 100);
p.DashStyle = DashStyle.Solid;
g.DrawLine(p, 50, 125, 400, 125);
Figure 6-4 The Pen class provides several dash styles
You can also use the Pen.DashOffset and Pen.DashPattern properties to define a custom
dash pattern.
To control the endcaps and create arrows or callouts, modify the Pen.StartCap and
Pen.EndCap properties using the LineCap enumeration. The following code demonstrates
most of the pen cap styles and creates the result shown in Figure 6-5:
' VB
Dim g As Graphics = Me.CreateGraphics
Dim p As Pen = New Pen(Color.Red, 10)
p.StartCap = LineCap.ArrowAnchor
p.EndCap = LineCap.DiamondAnchor
g.DrawLine(p, 50, 25, 400, 25)
p.StartCap = LineCap.SquareAnchor
p.EndCap = LineCap.Triangle
g.DrawLine(p, 50, 50, 400, 50)
p.StartCap = LineCap.Flat
p.EndCap = LineCap.Round
g.DrawLine(p, 50, 75, 400, 75)
p.StartCap = LineCap.RoundAnchor
p.EndCap = LineCap.Square
g.DrawLine(p, 50, 100, 400, 100)
// C#
Graphics g = this.CreateGraphics();
Pen p = new Pen(Color.Red, 10);
Lesson 1: Drawing Graphics 233
p.StartCap = LineCap.ArrowAnchor;
p.EndCap = LineCap.DiamondAnchor;
g.DrawLine(p, 50, 25, 400, 25);
p.StartCap = LineCap.SquareAnchor;
p.EndCap = LineCap.Triangle;
g.DrawLine(p, 50, 50, 400, 50);
p.StartCap = LineCap.Flat;
p.EndCap = LineCap.Round;
g.DrawLine(p, 50, 75, 400, 75);
p.StartCap = LineCap.RoundAnchor;
p.EndCap = LineCap.Square;
g.DrawLine(p, 50, 100, 400, 100);
Figure 6-5 The Pen class provides options for startcaps and endcaps
How to Fill Shapes
For most of the Draw methods, the Graphics class also has Fill methods that draw a
shape and fill in the contents. These methods work exactly like the Draw methods,
except they require an instance of the Brush class instead of the Pen class. The Brush
class is abstract, so you must instantiate one of the following child classes:
System.Drawing.Drawing2D.HatchBrush Defines a rectangular brush with a hatch
style, a foreground color, and a background color
System.Drawing.Drawing2D.LinearGradientBrush Encapsulates a brush with a linear
gradient that provides a visually appealing, professional-looking fill
System.Drawing.Drawing2D.PathGradientBrush Provides similar functionality to
LinearGradientBrush; however, you can define a complex fill pattern that fades
between multiple points
System.Drawing.SolidBrush Defines a brush of a single color
System.Drawing.TextureBrush Defines a brush made from an image that can be
tiled across a shape, like a wallpaper design
234 Chapter 6 Graphics
For example, the following code draws a solid maroon, five-sided polygon, as shown
in Figure 6-6:
' VB
Dim g As Graphics = Me.CreateGraphics
Dim b As Brush = New SolidBrush(Color.Maroon)
Dim points As Point() = New Point() {New Point(10, 10), _
New Point(10, 100), _
New Point(50, 65), _
New Point(100, 100), _
New Point(85, 40)}
g.FillPolygon(b, points)
// C#
Graphics g = this.CreateGraphics();
Brush b = new SolidBrush(Color.Maroon);
Point[] points = new Point[]
{new Point(10, 10),
new Point(10, 100),
new Point(50, 65),
new Point(100, 100),
new Point(85, 40)};
g.FillPolygon(b, points);
Figure 6-6 Use the Brush class with the various Graphics.Fill methods to draw solid objects
You can draw filled objects with an outline by first calling the Graphics.Fill method
and then calling the Graphics.Draw method. For example, the following code draws a
polygon with an outline and a linear gradient fill pattern, as shown in Figure 6-7:
' VB
Dim g As Graphics = Me.CreateGraphics
Dim p As Pen = New Pen(Color.Maroon, 2)
Dim b As Brush = New LinearGradientBrush(New Point(1, 1), New Point(100, 100), _
Color.White, Color.Red)
Dim points As Point() = New Point() {New Point(10, 10), _
New Point(10, 100), _
New Point(50, 65), _
New Point(100, 100), _
New Point(85, 40)}
Lesson 1: Drawing Graphics 235
g.FillPolygon(b, points)
g.DrawPolygon(p, points)
// C#
Graphics g = this.CreateGraphics();
Pen p = new Pen(Color.Maroon, 2);
Brush b = new LinearGradientBrush(new Point(1,1), new Point(100,100),
Color.White, Color.Red);
Point[] points = new Point[]
{new Point(10, 10),
new Point(10, 100),
new Point(50, 65),
new Point(100, 100),
new Point(85, 40)};
g.FillPolygon(b, points);
g.DrawPolygon(p, points);
Figure 6-7 Combine Graphics.Fill and Graphics.Draw methods to create solid objects with outlines
You can use the same techniques to draw on controls, such as buttons or the
instances of the PictureBox class. If you need to fill an entire Graphics object with a single
color, call the Graphics.Clear method.
Lab: Create a Method to Draw a Pie Chart
In this lab, you will create a method to draw a pie chart, and then improve that method
to make the pie chart more visually appealing. If you encounter a problem completing an
exercise, the completed projects are available on the companion CD in the Code folder.
Exercise 1: Draw a Pie Chart
In this exercise, you will write a method that draws a pie chart given an array of data
and a Size structure. At this point, simple black lines will suffice.
1. Navigate to the \<InstallHome>\Chapter06\Lesson1\Exercise1\Partial folder and
open either the C# version or the Visual Basic .NET version of the solution file.
2. Examine the form. The form has a single PictureBox named chart that is bound to
all four sides of the form. Notice that the Paint event calls the Draw method.
236 Chapter 6 Graphics
3. Examine the Draw method that takes no parameters. This method includes
sample data that will be passed as parameters to the drawPieChart method you
will complete. Notice that the drawPieChart method returns an Image object,
which is used to define the chart PictureBox.
4. Examine the PieChartElement class. This simple class contains information to
describe a single section of your pie chart.
5. Examine the drawPieChart method in the Form1 file. It receives two parameters:
an ArrayList containing only PieChartElement objects, and a Size structure.
6. Complete the drawPieChart method. First, define a Bitmap object to be returned,
create a Graphics object from the Bitmap object, and then return the Bitmap
object. For example, the following code would work:
' VB
Dim bm As Bitmap = New Bitmap(s.Width, s.Height)
Dim g As Graphics = Graphics.FromImage(bm)
' TODO: Draw pie chart in g
Return bm
// C#
Bitmap bm = new Bitmap(s.Width, s.Height);
Graphics g = Graphics.FromImage(bm);
// TODO: Draw pie chart in g
return bm;
7. At this point, the project compiles, but if you run the application no pie chart is
drawn. Before you can create a pie chart from the PieChartElement objects in the
ArrayList, you must determine how many degrees each element uses. To do that,
in the drawPieChart method you must calculate the total of the value properties
of all the PieChartElement objects. For example, the following code would work:
' VB
' Calculate total value of all rows
Dim total As Single = 0
For Each e As PieChartElement In elements
If e.value < 0 Then
Throw New ArgumentException("All elements must have positive values")
End If
total += e.value
Next
// C#
// Calculate total value of all rows
float total = 0;
Lesson 1: Drawing Graphics 237
foreach (PieChartElement e in elements)
{
if (e.value < 0)
{
throw new ArgumentException("All elements must have positive values");
}
total += e.value;
}
8. Now you should define the rectangle that the pie chart will consume based on
the Size structure passed to the drawPieChart method as a parameter. The following
code would work, and it provides a sufficient buffer on all sides of the image:
' VB
' Define the rectangle that the pie chart will use
Dim rect As Rectangle = New Rectangle(1, 1, s.Width - 2, s.Height - 2)
// C#
// Define the rectangle that the pie chart will use
Rectangle rect = new Rectangle(1, 1, s.Width - 2, s.Height - 2);
9. Next, define a Pen object with which to draw the pie chart. This can be a simple,
black, one-pixel pen, defined with the following code:
' VB
Dim p As Pen = New Pen(Color.Black, 1)
// C#
Pen p = new Pen(Color.Black, 1);
10. Finally, create a foreach loop that calculates the degrees for each pie chart section,
and draws the pie chart sections. There are many ways to do this, such as the following
code:
' VB
' Draw the first section at 0 degrees
Dim startAngle As Single = 0
' Draw each of the pie shapes
For Each e As PieChartElement In elements
' Calculate the degrees that this section will consume
' based on the percentage of the total
Dim sweepAngle As Single = (e.value / total) * 360
' Draw the pie shape
g.DrawPie(p, rect, startAngle, sweepAngle)
' Calculate the angle for the next pie shape by adding
' the current shape's degrees to the previous total.
startAngle += sweepAngle
Next
238 Chapter 6 Graphics
// C#
// Draw the first section at 0 degrees
float startAngle = 0;
// Draw each of the pie shapes
foreach (PieChartElement e in elements)
{
// Calculate the degrees that this section will consume
// based on the percentage of the total
float sweepAngle = (e.value / total) * 360;
// Draw the pie shape
g.DrawPie(p, rect, startAngle, sweepAngle);
// Calculate the angle for the next pie shape by adding
// the current shape's degrees to the previous total.
startAngle += sweepAngle;
}
11. Build the application and fix any errors; then run the application. Resize the
form, and notice that the pie chart is automatically resized; the Paint event calls
the Draw method when you resize the form.
Exercise 2: Improve the Appearance of the Pie Chart
In this exercise, you will improve the project presented in Exercise 1 to make the pie
chart more visually appealing. Specifically, you fill in each section with a different
color and enable anti-aliasing to smooth the lines.
1. Navigate to the \<InstallHome>\Chapter06\Lesson1\Exercise2\Partial folder,
and open either the C# version or the Visual Basic version of the PieChart project.
Alternatively, you can continue working from the project you created in Exercise 1.
2. First, at the beginning of the drawPieChart method, create an array containing
the colors you want to use in your pie chart. You will assign the colors sequentially,
so do not place similar colors after each other. For the sake of simplicity,
throw an exception if the pie chart has more elements than you have colors in
your array. For example:
' VB
Dim colors As Color() = {Color.Red, Color.Orange, Color.Yellow, Color.Green, _
Color.Blue, Color.Indigo, Color.Violet, Color.DarkRed, Color.DarkOrange, _
Color.DarkSalmon, Color.DarkGreen, Color.DarkBlue, Color.Lavender, _
Color.LightBlue, Color.Coral}
If elements.Count > colors.Length Then
Throw New ArgumentException("Pie chart must have " + _
colors.Length.ToString() + " or fewer elements")
End If
Lesson 1: Drawing Graphics 239
// C#
Color[] colors = { Color.Red, Color.Orange, Color.Yellow, Color.Green,
Color.Blue, Color.Indigo, Color.Violet, Color.DarkRed,
Color.DarkOrange, Color.DarkSalmon, Color.DarkGreen,
Color.DarkBlue, Color.Lavender, Color.LightBlue, Color.Coral };
if (elements.Count > colors.Length)
{
throw new ArgumentException("Pie chart must have " +
colors.Length.ToString() + " or fewer elements");
}
NOTE Keeping It Simple
For the sake of keeping the exercise focused, some aspects of this project are not exactly
as you would design them in the real world. For example, you typically would want to give
the calling application the option of specifying colors for different sections, which could be
done by adding a Color object to the PieChartElement class. In addition, elements of robust
programming such as catching exceptions, validating input, and asserting are omitted from
the examples.
3. You need to track the color in use. Before the foreach loop, initialize an integer to
zero to act as a counter:
' VB
Dim colorNum As Integer = 0
// C#
int colorNum = 0;
4. Within the foreach loop that calls DrawPie, add two lines: one to create a new Brush
object, and a second to call the Graphics.FillPie method. Call Graphics.FillPie
immediately before you call Graphics.DrawPie so that the outline is drawn over the
filled pie. The following code uses the LinearGradientBrush class, which requires
adding the System.Drawing.Drawing2D namespace to the project. Changes are
shown in bold:
' VB
' Draw each of the pie shapes
For Each e As PieChartElement In elements
' Create a brush with a nice gradient
Dim b As Brush = New LinearGradientBrush( _
rect, colors(colorNum), Color.White, 45)
colorNum += 1
' Calculate the degrees that this section will consume
' based on the percentage of the total
Dim sweepAngle As Single = (e.value / total) * 360
240 Chapter 6 Graphics
' Draw the filled-in pie shapes
g.FillPie(b, rect, startAngle, sweepAngle)
' Draw the pie shape
g.DrawPie(p, rect, startAngle, sweepAngle)
' Calculate the angle for the next pie shape by adding
' the current shape's degrees to the previous total.
startAngle += sweepAngle
Next
// C#
// Draw each of the pie shapes
foreach (PieChartElement e in elements)
{
// Create a brush with a nice gradient
Brush b = new LinearGradientBrush(
rect, colors[colorNum++], Color.White, (float)45);
// Calculate the degrees that this section will consume
// based on the percentage of the total
float sweepAngle = (e.value / total) * 360;
// Draw the filled-in pie shapes
g.FillPie(b, rect, startAngle, sweepAngle);
// Draw the pie shape outlines
g.DrawPie(p, rect, startAngle, sweepAngle);
// Calculate the angle for the next pie shape by adding
// the current shape's degrees to the previous total.
startAngle += sweepAngle;
}
5. Now, run the application. Experiment with different brush types to find the one
that is most appealing. Notice that the lines appear a bit jagged; you can make
the lines appear smoother by setting Graphics.SmoothingMode, as the following
line demonstrates:
' VB
g.SmoothingMode = SmoothingMode.HighQuality
// C#
g.SmoothingMode = SmoothingMode.HighQuality;
No comments:
Post a Comment