Professional Documents
Culture Documents
Table of Contents
Lab: Drawing to a Windows Form 1
Information in this document, including URL and other Internet Web site references, is subject to change
without notice. Unless otherwise noted, the example companies, organizations, products, domain names, e-
mail addresses, logos, people, places, and events depicted herein are fictitious, and no association with any
real company, organization, product, domain name, e-mail address, logo, person, place, or event is intended or
should be inferred. Complying with all applicable copyright laws is the responsibility of the user. Without limiting
the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval
system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or
otherwise), or for any purpose, without the express written permission of Microsoft Corporation.
The names of manufacturers, products, or URLs are provided for informational purposes only and Microsoft
makes no representations and warranties, either expressed, implied, or statutory, regarding these
manufacturers or the use of the products with any Microsoft technologies. The inclusion of a manufacturer or
product does not imply endorsement of Microsoft of the manufacturer or product. Links are provided to third
party sites. Such sites are not under the control of Microsoft and Microsoft is not responsible for the contents of
any linked site or any link contained in a linked site, or any changes or updates to such sites. Microsoft is not
responsible for webcasting or any other form of transmission received from any linked site. Microsoft is
providing these links to you only as a convenience, and the inclusion of any link does not imply endorsement of
Microsoft of the site or the products contained therein.
Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights
covering subject matter in this document. Except as expressly provided in any written license agreement from
Microsoft, the furnishing of this document does not give you any license to these patents, trademarks,
copyrights, or other intellectual property.
Microsoft, Microsoft Press, Active Directory, Authenticode, BizTalk, Excel, IntelliSense, Internet Explorer, MSDN,
PowerPoint, SQL Server, Verdana, Visual Basic, Visual C#, Visual Studio, Win32, Windows, Windows Live and
Windows Server are either registered trademarks or trademarks of Microsoft Corporation in the United States
and/or other countries.
The names of actual companies and products mentioned herein may be the trademarks of their respective
owners.
Version 1.2
Lab Answer Key for Module 1: Enhancing User Interfaces by Using System.Drawing 1
[Visual Basic]
DrawAdventureWorksImage(e.Graphics)
DrawFeedbackBar(e.Graphics)
End Sub
5. On the Build menu, click Build Solution, and then correct any compiler errors.
[Visual Basic]
Private _progressBarOutlinePen As Pen = New Pen(Color.Black)
[Visual Basic]
Private _progressBarFillBrush As Brush = New SolidBrush(Color.Blue)
4. Locate the comment TODO: Create a Rectangle for the progress bar outline.
Underneath the comment, add code to create two instances of the Rectangle class
that are called _progressBarOutlineRectangle and _progressBarFillRectangle. To
create _progressBarOutlineRectangle, use a new Point instance with an X value of
10 and a Y value of 300 and a new Size instance with a Width value of 100 and a
Height value of 15. Repeat this for _progressBarFillRectangle, and change the
Lab Answer Key for Module 1: Enhancing User Interfaces by Using System.Drawing 3
Width value to 0. Your code should resemble the statements in the following code
examples.
[Visual C#]
private Rectangle _progressBarOutlineRectangle = new Rectangle(
new Point(10,300), new Size(100,15));
private Rectangle _progressBarFillRectangle = new Rectangle(
new Point(10,300), new Size(0,15));
[Visual Basic]
Private _progressBarOutlineRectangle As Rectangle = New Rectangle( _
New Point(10, 300), New Size(100, 15))
Private _progressBarFillRectangle As Rectangle = New Rectangle( _
New Point(10, 300), New Size(0, 15))
5. On the Build menu, click Build Solution, and then correct any compiler errors.
[Visual Basic]
graphic.DrawRectangle(Me._progressBarOutlinePen, Me._progressBarOutlineRectangle)
3. Locate the comment TODO: Draw the progress fill for a progress bar. Underneath
the comment, set the _progressBarFillRectangle.Width property to the same value
as the numericUpDown.Value property. This ensures that the rectangle is the correct
width to represent the scale percentage for the image.
Your code should resemble the statements in the following code examples.
[Visual C#]
_progressBarFillRectangle.Width = (int)this.numericUpDown.Value;
[Visual Basic]
_progressBarFillRectangle.Width = CType(Me.numericUpDown.Value, Integer)
4 Lab Answer Key for Module 1: Enhancing User Interfaces by Using System.Drawing
4. Underneath the previous line of code, add code to call the FillRectangle method for
the Graphics object. Pass in the _progressBarFillBrush and
_progressBarFillRectangle objects.
Your code should resemble the statement in the following code examples.
[Visual C#]
graphic.FillRectangle(_progressBarFillBrush, _progressBarFillRectangle);
[Visual Basic]
graphic.FillRectangle(_progressBarFillBrush, _progressBarFillRectangle)
5. On the Build menu, click Build Solution, and then correct any compiler errors.
Exercise 2
Drawing a Feedback Pie Chart
f Task 1: Modify the Main_Paint event handler to call the
DrawFeedbackPie method
1. Start Visual Studio 2005.
2. Open the ImageScaler solution from the E:\Labfiles\Starter\CS\Ex2\ImageScaler
folder (if you are using Visual C#) or the E:\Labfiles\Starter\VB\Ex2\ImageScaler
folder (if you are using Visual Basic).
3. In the Main_Paint event handler, add a call to the DrawFeedbackPie method and
pass in the Graphics object from the PaintEventArgs input parameter.
Your code should resemble the statements in the following code examples.
[Visual C#]
DrawFeedbackBar(e.Graphics);
DrawFeedbackPie(e.Graphics);
}
[Visual Basic]
DrawAdventureWorksImage(e.Graphics)
DrawFeedbackBar(e.Graphics)
DrawFeedbackPie(e.Graphics)
End Sub
4. On the Build menu, click Build Solution, and then correct any compiler errors.
f Task 2: Create Pen, Brush, and Rectangle objects to draw a pie chart
1. In the Main.cs file (if you are using Visual C#) or the Main.vb file (if you are using
Visual Basic), locate the comment TODO: Add variables for drawing a pie
segment.
2. Underneath the comment, add code to create an instance of the Pen class that is
called _piePen. Specify a Color of Black and a Width of 2.5.
Your code should resemble the statements in the following code examples.
[Visual C#]
private Pen _piePen = new Pen(Color.Black, 2.5f);
[Visual Basic]
Private _piePen As Pen = New Pen(Color.Black, 2.5F)
3. Underneath the _piePen instance declaration, add code to create an instance of the
SolidBrush class that is called _pieFillingBrush. Specify a Color of Red.
Your code should resemble the statements in the following code examples.
[Visual C#]
private Brush _pieFillingBrush = new SolidBrush(Color.Red);
[Visual Basic]
Private _pieFillingBrush As Brush = New SolidBrush(Color.Red)
[Visual C#]
private Rectangle _pieRectangle = new Rectangle(
new Point(10, 100), new Size(100, 100));
[Visual Basic]
Private _pieRectangle As Rectangle = New Rectangle( _
New Point(10, 100), New Size(100, 100))
5. On the Build menu, click Build Solution, and then correct any compiler errors.
[Visual Basic]
graphic.FillPie(_pieFillingBrush, _pieRectangle, _
270.0F, CType((3.6 * CType(Me.numericUpDown.Value, Double)), Single))
3. At the top of the Main.cs file (if you are using Visual C#) or the Main.vb file (if you
are using Visual Basic), add a using statement (if you are using Visual C#) or an
Imports statement (if you are using Visual Basic) for the
System.Drawing.Drawing2D namespace. This will enable you to access the
DashStyle enumeration.
Your code should resemble the statements in the following code examples.
[Visual C#]
using System.Drawing.Drawing2D;
[Visual Basic]
Imports System.Drawing.Drawing2D
4. Locate the comment TODO: Draw the outline for the pie segment. Underneath the
comment, set the _piePen.DashStyle property to DashStyle.Dash. This changes the
style of the pen. On the next line, call the DrawPie method for the Graphics object.
Lab Answer Key for Module 1: Enhancing User Interfaces by Using System.Drawing 7
Pass in the _piePen and _pieRectangle objects. Specify a start angle of 270.0 and a
sweep angle of 3.6 times the value of the NumericUpDown control.
Your code should resemble the statements in the following code examples.
[Visual C#]
_piePen.DashStyle = DashStyle.Dash;
graphic.DrawPie(_piePen, _pieRectangle,
270.0f, (float)(3.6 * (double)this.numericUpDown.Value));
[Visual Basic]
_piePen.DashStyle = DashStyle.Dash
graphic.DrawPie(_piePen, _pieRectangle, _
270.0F, CType((3.6 * CType(Me.numericUpDown.Value, Double)), Single))
5. Locate the comment TODO: Draw an Ellipse as an outline for the pie. Underneath
the comment, set the _piePen.DashStyle property to DashStyle.Solid. This changes
the style of the pen back to the original DashStyle value. On the next line, call the
DrawEllipse method for the Graphics object. Pass in the _piePen and
_pieRectangle objects.
Your code should resemble the statements in the following code examples.
[Visual C#]
_piePen.DashStyle = DashStyle.Solid;
graphic.DrawEllipse(_piePen, _pieRectangle);
[Visual Basic]
_piePen.DashStyle = DashStyle.Solid
graphic.DrawEllipse(_piePen, _pieRectangle)
6. On the Build menu, click Build Solution, and then correct any compiler errors.
Exercise 3
Implementing an Automatic Double Buffer
f Task 1: Modify the ImageScaler application to enable double
buffering
1. Start Visual Studio 2005.
2. Open the ImageScaler solution from the E:\Labfiles\Starter\CS\Ex3\ImageScaler
folder (if you are using Visual C#) or the E:\Labfiles\Starter\VB\Ex3\ImageScaler
folder (if you are using Visual Basic).
3. In the Main.cs file (if you are using Visual C#) or the Main.vb file (if you are using
Visual Basic), locate the comment TODO: Add code for automatic double-
buffering.
4. Underneath the comment, add a call to the SetStyle method on the form and pass in
the following control styles: AllPaintingInWmPaint, UserPaint, and DoubleBuffer.
Finally, pass in a True value to enable the styles.
Your code should resemble the statements highlighted in bold in the following code
examples.
[Visual C#]
public Main()
{
InitializeComponent();
this.SetStyle(ControlStyles.AllPaintingInWmPaint |
ControlStyles.UserPaint |
ControlStyles.DoubleBuffer, true);
[Visual Basic]
Public Sub New()
InitializeComponent()
End Sub
5. On the Build menu, click Build Solution, and then correct any compiler errors.
2. In the ImageScaler window, use the NumericUpDown control to change the scale
value rapidly.
3. Verify that the ImageScaler window no longer flickers when it redraws your graphics.
4. Close the ImageScaler window.
5. Close Visual Studio 2005.
Exercise 4
Adding Fonts to Your Application
f Task 1: Modify the Main_Paint event handler to call the
DrawImageSize method
1. Start Visual Studio 2005.
2. Open the ImageScaler solution from the E:\Labfiles\Starter\CS\Ex4\ImageScaler
folder (if you are using Visual C#) or the E:\Labfiles\Starter\VB\Ex4\ImageScaler
folder (if you are using Visual Basic).
3. In the Main_Paint event handler, add a call to the DrawImageSize method and pass
in the Graphics object from the PaintEventArgs input parameter.
Your code should resemble the statements highlighted in bold in the following code
examples.
[Visual C#]
[Visual Basic]
DrawAdventureWorksImage(e.Graphics)
DrawFeedbackBar(e.Graphics)
DrawFeedbackPie(e.Graphics)
DrawImageSize(e.Graphics)
End Sub
4. On the Build menu, click Build Solution, and then correct any compiler errors.
10 Lab Answer Key for Module 1: Enhancing User Interfaces by Using System.Drawing
[Visual Basic]
Private _imageSize As String = ""
[Visual Basic]
Private _font As Font = New Font(New FontFamily("Arial"), 14.0F)
4. Underneath the _font instance declaration, add code to create an instance of the
SolidBrush class that is called _fontBrush. Specify a Color of Black.
Your code should resemble the statements in the following code examples.
[Visual C#]
private Brush _fontBrush = new SolidBrush(Color.Black);
[Visual Basic]
Private _fontBrush As Brush = New SolidBrush(Color.Black)
5. On the Build menu, click Build Solution, and then correct any compiler errors.
is four times the _imageWidth value and a height value that is three times the
_imageHeight value.
Note: The image width is scaled by a factor of four and the image height is scaled
by a factor of three when it was originally displayed in the
DrawAdventureWorksImage image. This scaling is performed because otherwise
the image is very small.
Your code should resemble the statements in the following code examples.
[Visual C#]
_imageSize = String.Format("{0} x {1}", (_imageWidth * 4), (_imageHeight * 3));
[Visual Basic]
_imageSize = String.Format("{0} x {1}", (_imageWidth * 4), (_imageHeight * 3))
3. Underneath the previous line of code, add code to call the DrawString method for
the Graphics object. Pass in the _imageSize string, the _font object, the _fontBrush
object, and specify X and Y values of 200.0 and 320.0.
Your code should resemble the statements in the following code examples.
[Visual C#]
graphic.DrawString(_imageSize,_font, _fontBrush,200.0f, 320.0f);
[Visual Basic]
graphic.DrawString(_imageSize, _font, _fontBrush, 200.0F, 320.0F)
4. On the Build menu, click Build Solution, and then correct any compiler errors.
Exercise 5
Saving Your Scaled Image
f Task 1: Add a button to the ImageScaler application
1. Start Visual Studio 2005.
2. Open the ImageScaler solution from the E:\Labfiles\Starter\CS\Ex5\ImageScaler
folder (if you are using Visual C#) or the E:\Labfiles\Starter\VB\Ex5\ImageScaler
folder (if you are using Visual Basic).
3. In the ImageScaler project, in Solution Explorer, right-click Main.cs (if you are using
Visual C#) or Main.vb (if you are using Visual Basic), and then click View Designer.
4. On the Toolbox tab, drag a button onto the lower-right corner of the ImageScaler
application.
5. In the Properties pane, change the Name to button and the Text property to Save
Image.
6. In the Properties pane, click Events. In the list of events, double-click the Click
event. This automatically generates an event handler.
7. On the Build menu, click Build Solution, and then correct any compiler errors.
[Visual Basic]
Imports System.Drawing.Imaging
a Size object that has a Width value that is four times the _imageWidth value and a
Height value that is three times the _imageHeight value.
Your code should resemble the statements in the following code examples.
[Visual C#]
Bitmap newBitmap = new Bitmap(
_bitmap, new Size((_imageWidth * 4), (_imageHeight * 3)));
[Visual Basic]
Dim NewBitmap As Bitmap = New Bitmap( _
_bitmap, New Size((_imageWidth * 4), (_imageHeight * 3)))
3. Underneath the previous line of code, add code to create a string that is called
savePath. This represents the path to which you will save your images. For this
exercise, you must use the path E:\Labfiles\Images\. Also remember that you must
specify the name of the file in the form of Output(Width x Height).jpg. The
complete savePath string must be of the form E:\Labfiles\Images\Output(Width x
Height).jpg. Note that you can use the _imageSize string to get the Width x Height
part of the path.
Your code should resemble the statements in the following code examples.
[Visual C#]
string savePath = String.Format(@"E:\Labfiles\Images\Output({0}).jpg",_imageSize);
[Visual Basic]
Dim savePath As String = String.Format( _
"E:\Labfiles\Images\Output({0}).jpg", _imageSize)
4. Underneath the previous line of code, add code to save the newBitmap object to your
savePath string. Ensure that you specify an ImageFormat of Jpeg.
Your code should resemble the statement in the following code examples.
[Visual C#]
newBitmap.Save(savePath, ImageFormat.Jpeg);
[Visual Basic]
NewBitmap.Save(savePath, ImageFormat.Jpeg)
5. On the Build menu, click Build Solution, and then correct any compiler errors.
3. In the ImageScaler window, use the NumericUpDown control to change the scale
value.
4. In the ImageScaler window, click Save Image.
5. In Windows Explorer, browse to the E:\Labfiles\Images folder.
6. Verify that your image has saved correctly.
7. Close Windows Explorer.
8. Close the ImageScaler window.
9. Close Visual Studio 2005.