VBTrain.Net Graphical Text Object
Part 2: The Advanced Guide
TUTORIAL BY Dr. med. Cecil Cheah
03 March 2004
Table of Content
Going deeper with the Graphical Text Object
Making A New Project
Adding the Graphic Text Object the hard way
Understanding the Code
Adding the Graphic Text Object the easy way
Examine The Code generated
Properties of the Graphical Text Object
Changing the properties of the Graphical Text Object in design time
Text
The General Properties of the Graphical Text Object
FONT
Sizing
Visible Region
Rotation Angle
Scale Horizontal
Scale Vertical
String Format Type
The Effect Properties of the Graphical Text Object
Solid Effect
Linear Gradient Effect with Color1 and Color2
Linear Gradient Effect with Transparency1 and Transparency2
Linear Gradient Effect with Gradient Angle
Path Gradient Arc Effect with Sweep Gradient Angle
Linear Gradient Effect, Path Gradient Rectangle, Path Gradient Ellipse
Texture Effect
Hash Effect
Changing The Properties in Runtime
Changing the General properties of the Graphical Text Object in Runtime
Text
FONT
Sizing
Visible Region
Rotation Angle
Scale Horizontal
Scale Vertical
String Format Type
Changing the Effect properties of the Graphical Text Object in Runtime.
Solid Effect
Linear Gradient Effect with Color1 and Color2
Linear Gradient Effect with Transparency1 and Transparency2
Linear Gradient Effect with Gradient Angle
Path Gradient Arc Effect with Sweep Gradient Angle
Linear Gradient Effect, Path Gradient Rectangle, Path Gradient Ellipse
Texture Effect
Hash Effect
Calling the Methods of the Graphical Text Object during runtime
StartPaint()
StopPaint()
StartPaintingAll() and StopPaintingAll()
How to contact me
Going deeper with the Graphical Text Object
Making A New Project
Now that you have some idea what the Graphical Text Object can do, we will make our own little programme with the VBTrain Graphical Text Object and at the same time get to know the Properties, methods associated with the Graphical Text Object.
First open Visual Studio and start a new project by clicking the “New Project” button.
Name the project as “MyGraphicalTextObject”. Choose any location to save your project. Click “OK”.
You will now see an empty form like the following.
As before, you need to add the reference of the Graphical Text Object to the form. So repeat the step as described above. After adding the reference, your solution explorer should look like this.
If we look back at the form1, nothing has changed. No Graphical Text Object has appeared on the form. Where did we go wrong? Try searching the Toolbox and you still will not find any Graphical Text Object at all to add to the Form1.
Are we stuck?
Adding the Graphic Text Object the hard way.
No. We are not, or you better ask PlatteCanyon to refund your money.
Select Form1.vb in the solution explorer and click the “View Code” button above.
The Code Window for Form1 will now open.
Click on the “+” sign to expand the “Windows Form Designer generated code” Code Block.
Scroll down to locate the second last “-“ sign which is included the following green typed code.
'NOTE: The following procedure is required by the Windows Form Designer
'It can be modified using the Windows Form Designer.
'Do not modify it using the code editor.
<System.Diagnostics.DebuggerStepThrough()> PrivateSub InitializeComponent()
components = New System.ComponentModel.Container()
Me.Text = "Form1"
Now insert the following text just below the green typed text.
FriendWithEvents GraphicalText1 As VBTrain.GraphicalObjects.GraphicalText
So it should look like this:
'NOTE: The following procedure is required by the Windows Form Designer
'It can be modified using the Windows Form Designer.
'Do not modify it using the code editor.
FriendWithEvents GraphicalText1 As VBTrain.GraphicalObjects.GraphicalText
<System.Diagnostics.DebuggerStepThrough()> PrivateSub InitializeComponent()
components = New System.ComponentModel.Container()
Me.Text = "Form1"
Next add the following text above the last line of code, i.e. Me.Text = “Form1”
Me.GraphicalText1 = New VBTrain.GraphicalObjects.GraphicalText()
Me.GraphicalText1.Location = New System.Drawing.Point(24, 24)
Me.GraphicalText1.Name = "GraphicalText1"
Me.GraphicalText1.OriginalSize = New System.Drawing.Size(1, 1)
Me.GraphicalText1.Size = New System.Drawing.Size(256, 88)
Me.GraphicalText1.Text = "GraphicalText1"
Me.Controls.AddRange(New System.Windows.Forms.Control(){Me.GraphicalText1})
So it looks like this:
'NOTE: The following procedure is required by the Windows Form Designer
'It can be modified using the Windows Form Designer.
'Do not modify it using the code editor.
FriendWithEvents GraphicalText1 As VBTrain.GraphicalObjects.GraphicalText
<System.Diagnostics.DebuggerStepThrough()> PrivateSub InitializeComponent()
components = New System.ComponentModel.Container()
Me.GraphicalText1 = New VBTrain.GraphicalObjects.GraphicalText()
Me.GraphicalText1.Location = New System.Drawing.Point(24, 24)
Me.GraphicalText1.Name = "GraphicalText1"
Me.GraphicalText1.OriginalSize = New System.Drawing.Size(1, 1)
Me.GraphicalText1.Size = New System.Drawing.Size(256, 88)
Me.GraphicalText1.Text = "GraphicalText1"
Me.Controls.AddRange(New System.Windows.Forms.Control() {Me.GraphicalText1})
Me.Text = "Form1"
Now switch back to Design View and magically the Graphic Text Object has now appeared on the form.
Understanding the Code
So what does all those code means?
FriendWithEvents GraphicalText1 As VBTrain.GraphicalObjects.GraphicalText
This adds the VBTrain Graphical Text Object as a Friend Data Member with or without events to the form and gives it a name called GraphicTxet1.
Me.GraphicalText1 = New VBTrain.GraphicalObjects.GraphicalText()
We use the NEW constructor to create a new instance of the Graphical Text Object and initialize it.
We could actually combine these two lines as follow:
FriendWithEvents GraphicalText1 As VBTrain.GraphicalObjects.GraphicalText = New VBTrain.GraphicalObjects.GraphicalText()
Now we want to configure our Graphical Text Box:
Me.GraphicalText1.Location = New System.Drawing.Point(24, 24)
Me.GraphicalText1.Name = "GraphicalText1"
Me.GraphicalText1.OriginalSize = New System.Drawing.Size(1, 1)
Me.GraphicalText1.Size = New System.Drawing.Size(256, 88)
Me.GraphicalText1.Text = "GraphicalText1"
Here we set the location, the original Size, the size, and the text and gives the new instance a name.
It is time to add the Graphical Text control to the Form’s Controls Collection:
Me.Controls.AddRange(New System.Windows.Forms.Control() {Me.GraphicalText1})
Adding the Graphic Text Object the easy way.
Oh, did I say we cannot find the Graphic Text Object inside the toolbox? That is not really true. What is true is we cannot really find the Graphic Text Object inside the Toolbox because we have not added the Graphic Text Object to the toolbox. So if we have added it to the toolbox, we can just drag the object to the form instead of writing our own code as above. I like to do things the hard way and I would like you to learn it the hard way. So if I would have told you this first, would you have bothered doing the above?
First remove all the text you have just added above.
Anyway to add the Graphic Text Object to the toolbox, right click inside the toolbox and select “Customize Toolbox…” (or Add / Remove Object if you are using Visual Studio 2003).
This will open the “Customize Toolbox” dialog box. Select the “.NET Framework Components” tab. Click “Browse” button and search for and locate the VBTrainGraphicalText.dll file.
Click “Open”.
Now you can see the Graphical Text object inside the list. Make sure it is selected. If it is not already selected, click the square box to select it ().
Click “OK”.
And would you believe it, the Graphical Text Object appears now in the Toolbox. So I did lie.
Now click the Graphical Text Object inside the toolbox once to select it Then draw an instance of the object on the form.
Now we have added a Graphical Text Object on the form. Much easier than before, right?
Examine The Code generated
Just out of interest, let us examine the code generated by Visual Studio after adding the Graphical Text Object. Would you believe it, it is very similar to the coded we added ourselves. So we are as good as Visual Studio can be, and better.
Code generated by Visual Studio:
'NOTE: The following procedure is required by the Windows Form Designer
'It can be modified using the Windows Form Designer.
'Do not modify it using the code editor.
FriendWithEvents GraphicalText1 As VBTrain.GraphicalObjects.GraphicalText
<System.Diagnostics.DebuggerStepThrough()> PrivateSub InitializeComponent()
Me.GraphicalText1 = New VBTrain.GraphicalObjects.GraphicalText()
Me.SuspendLayout()
'
'GraphicalText1
'
Me.GraphicalText1.Font = New System.Drawing.Font("Microsoft Sans Serif", 9.75!, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, CType(0, Byte))
Me.GraphicalText1.Location = New System.Drawing.Point(48, 56)
Me.GraphicalText1.Name = "GraphicalText1"
Me.GraphicalText1.OriginalSize = New System.Drawing.Size(1, 1)
Me.GraphicalText1.Size = New System.Drawing.Size(208, 48)
Me.GraphicalText1.TabIndex = 0
Me.GraphicalText1.TabStop = False
Me.GraphicalText1.Text = "GraphicalText1"
'
'Form1
'
Me.AutoScaleBaseSize = New System.Drawing.Size(5, 13)
Me.ClientSize = New System.Drawing.Size(292, 266)
Me.Controls.AddRange(New System.Windows.Forms.Control() {Me.GraphicalText1})
Properties of the Graphical Text Object.
We can alter the properties of the Graphical Text Object either in design time or in runtime. If you alter the properties of the Graphical Text Object in design time, you would not be able to change it in runtime without building some codes. So changing the properties of the Graphical Text Object is for you to set the initial state of the Graphical Text Object when your application first loaded. To change the properties of the Graphical Text Object during runtime, we have to behave like a real Visual Basic Programmer and started acting like a nerd and write some codes like a nerd will.
Changing the properties of the Graphical Text Object in design time.
Underneath the properties window, you will see the blue color underlined “Edit” text. Click it.
This will now open the Graphical Text editor.
To know what each property mean and what it does, what is better than playing with it?
Text
Try changing the text to “Hello”.
And click OK. Do you see what you have done now?
And how does the code change?
Before
Me.GraphicalText1.Text = "GraphicalText1"
After
Me.GraphicalText1.Text = "Hello"
Try and reset the text back to “Graphical Text 1”
The General Properties of the Graphical Text Object
Next we will look at the General Properties of the Graphical Text Object. They are Font, Sizing, Visible Region, Smoothing, Rotation Angle, Scale Horizontal, Scale Vertical, String Format Type.
FONT
The default Font is Microsoft Sans Serif, Font Style is Regular and Size is 10. Let us change the font to Arial, style to Bold and size to 18. See what the Font property does?
Code Changes (changes are marked in red):
Before:
Me.GraphicalText1.Font = New System.Drawing.Font("Microsoft Sans Serif", 9.75!, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, CType(0, Byte))
After
Me.GraphicalText1.Font = New System.Drawing.Font("Arial", 18.0!, System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Point, CType(0, Byte))
The font size does not seem to change at all. The reason is the Sizing is set to “Size To Control”.
Let us change the Sizing to Size To Font, No Wrap and font size to 10.
Code Changes:
Me.GraphicalText1.Font = New System.Drawing.Font("Arial", 9.75!, System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Point, CType(0, Byte))
Me.GraphicalText1.Sizing = VBTrain.GraphicalObjects.GraphicalText.SizingEnum.SizeToFont_NoWrap
Now change the font size to 18.
Sizing
Change the font size back to 10. Make sure it looks like this.
Change the text to “Graphical Text 1Graphical Text 1” and the Sizing property to Size To Font, Wrap
Code Changes:
Before:
Me.GraphicalText1.Sizing = VBTrain.GraphicalObjects.GraphicalText.SizingEnum.SizeToFont_NoWrap
Me.GraphicalText1.Text = "Graphical Text 1"
After
Me.GraphicalText1.Sizing = VBTrain.GraphicalObjects.GraphicalText.SizingEnum.SizeToFont_Wrap
Me.GraphicalText1.Text = "Graphical Text 1 Graphical Text 1"
Wow, but where is the extra text I have just added? Do not worry, it is still there but wrapped to underneath the text. To see the text, try and increase the height value of the Graphical Text Object.
Reset the height of the Graphical Text Object back to before.
Now change the Sizing Property to “Size To Font, No Wrap”.
Now you see the extra text back in the same line unwrapped.
Reset the Graphical Text Control back to “Graphical Text 1”, Font = Microsoft Sans Serif, Font Style is Regular and Size is 10. Sizing = Size to Control.
Visible Region
Visible Region = Text Rectangle
Code Changes:
Me.GraphicalText1.VisibleRegion = VBTrain.GraphicalObjects.GraphicalText.VisibleRegionEnum.TextRectangle
Visible Region = Text
Code Changes:
Me.GraphicalText1.VisibleRegion = VBTrain.GraphicalObjects.GraphicalText.VisibleRegionEnum.Text
Visible Region = Control
Code Changes:
Me.GraphicalText1.VisibleRegion = VBTrain.GraphicalObjects.GraphicalText.VisibleRegionEnum.Control
Reset Visible Region to Text Rectangle.
Rotation Angle
Rotation Angle = 0 (default)
Code Changes:
Me.GraphicalText1.RotationAngle = 0!
Rotation Angle = 45
Code Changes:
Me.GraphicalText1.RotationAngle = 45.0!
Reset Rotation Angle = 0.
Scale Horizontal
Scale Horizontal = 1.325 (default)
Code Changes:
Me.GraphicalText1.ScaleHorizontal = 1.325!
Scale Horizontal = 1
Code Changes:
Me.GraphicalText1.ScaleHorizontal = 1.0!
Scale Horizontal = 3
Code Changes:
Me.GraphicalText1.ScaleHorizontal = 3.0!
Reset Scale Horizontal = 1.325.
Scale Vertical
Scale Vertical = 1.325 (default)
Code Changes:
Me.GraphicalText1.ScaleVertical = 1.325!
Scale Vertical = 1
Code Changes:
Me.GraphicalText1.ScaleVertical = 1.0!
Scale Vertical = 3
Code Changes:
Me.GraphicalText1.ScaleVertical = 3.0!
Reset Scale Vertical = 1.325.
String Format Type
The String Format Type is the StringFormat to use when drawing the text.
String Format Type = Generic Default (default)
Code Changes:
Me.GraphicalText1.StringFormatType = VBTrain.GraphicalObjects.GraphicalText.StringFormatEnum.GenericDefault
String Format Type = Generic Typographic
Code Changes:
Me.GraphicalText1.StringFormatType = VBTrain.GraphicalObjects.GraphicalText.StringFormatEnum.GenericTypographic
Reset String Format Type = Generic Default.
The Effect Properties of the Graphical Text Object
Finally we will look at the various Effect Properties of the Graphical Text Object. These include Effect, Color1, Color2, Transparency1, Transparency2, Hatch Effect Style, Gradient Angle, Gradient Sweep Angle and Texture Image
Solid Effect
The various effect options include Solid, Texture, Gradient, Path Gradient Rectangle, Path Gradient Arc, Path Gradient Ellipse and Hatch
Effect = Solid
Code Changes:
Me.GraphicalText1.Effect = VBTrain.GraphicalObjects.GraphicalText.BrushTypeEnum.Solid
Linear Gradient Effect with Color1 and Color2
Color1 is the primary text color, Color2 is the secondary text color used when the Effect is Hatch, LinearGradient or one of the PathGradients.
Default value for Color1 is Black. Default value for Color2 is White.
Effect = Linear Gradient with Color1 = Black and Color2 = White
Code Changes:
Me.GraphicalText1.Effect = VBTrain.GraphicalObjects.GraphicalText.BrushTypeEnum.LinearGradient
Me.GraphicalText1.Color1 = System.Drawing.Color.Black
Me.GraphicalText1.Color2 = System.Drawing.Color.White
Effect = Linear Gradient with Color1 = Red and Color2 = Black
Code Changes:
Me.GraphicalText1.Effect = VBTrain.GraphicalObjects.GraphicalText.BrushTypeEnum.LinearGradient
Me.GraphicalText1.Color1 = System.Drawing.Color.Red
Me.GraphicalText1.Color2 = System.Drawing.Color.Black
It is interesting that you have three different options to change the colour inside the Graphic Text Editor.: Edit Color with Dialog, Edit Color with RGB or Hex and Set to Color.Transparent
Edit Color(Dialog)
Edit Color (RGB or Hex)
Set to Color.Transparent will give you this effect:
Effect = Linear Gradient with Color1 = Transparent and Color2 = Black
Code Changes:
Me.GraphicalText1.Color1 = System.Drawing.Color.Transparent
Me.GraphicalText1.Color2 = System.Drawing.Color.Black
Me.GraphicalText1.Effect = VBTrain.GraphicalObjects.GraphicalText.BrushTypeEnum.LinearGradient
Linear Gradient Effect with Transparency1 and Transparency2
Transparency1 is the transparency of the primary color (Color1). Transparency2 is the transparency of the secondary color (Color2)
Default setting for Transparency1 and Transparency2 is 255.
Effect = Linear Gradient with Color1 = Red and Color2 = Lime and Transparency1 = 255 and Transparency2 = 255
Code Changes:
Me.GraphicalText1.Color1 = System.Drawing.Color.Red
Me.GraphicalText1.Color2 = System.Drawing.Color.Lime
Me.GraphicalText1.Effect = VBTrain.GraphicalObjects.GraphicalText.BrushTypeEnum.LinearGradient
Me.GraphicalText1.Transparency1 = 255
Me.GraphicalText1.Transparency2 = 255
Effect = Linear Gradient with Color1 = Red and Color2 = Lime and Transparency1 = 125 and Transparency2 = 255
Code Changes:
Me.GraphicalText1.Color1 = System.Drawing.Color.Red
Me.GraphicalText1.Color2 = System.Drawing.Color.Lime
Me.GraphicalText1.Effect = VBTrain.GraphicalObjects.GraphicalText.BrushTypeEnum.LinearGradient
Me.GraphicalText1.Transparency1 = 125
Me.GraphicalText1.Transparency2 = 255
Effect = Linear Gradient with Color1 = Red and Color2 = Lime and Transparency1 = 255 and Transparency2 = 0
Code Changes:
Me.GraphicalText1.Color1 = System.Drawing.Color.Red
Me.GraphicalText1.Color2 = System.Drawing.Color.Lime
Me.GraphicalText1.Effect = VBTrain.GraphicalObjects.GraphicalText.BrushTypeEnum.LinearGradient
Me.GraphicalText1.Transparency1 = 255
Me.GraphicalText1.Transparency2 = 0
Linear Gradient Effect with Gradient Angle
The Gradient Angle is
- The gradient orientation when the Effect is LinearGradient.
- The start angle of the arc when the Effect is PathGradient_Arc.
Default Gradient Angle Value = 0
Effect = Linear Gradient with Color1 = Red and Color2 = Lime and Transparency1 = 255 and Transparency2 = 255 and Gradient Angle = 0
Code Changes:
Me.GraphicalText1.Color1 = System.Drawing.Color.Red
Me.GraphicalText1.Color2 = System.Drawing.Color.Lime
Me.GraphicalText1.Effect = VBTrain.GraphicalObjects.GraphicalText.BrushTypeEnum.LinearGradient
Me.GraphicalText1.Transparency1 = 255
Me.GraphicalText1.Transparency2 = 255
Me.GraphicalText1.GradientAngle = 0.0!
Effect = Linear Gradient with Color1 = Red and Color2 = Lime and Transparency1 = 255 and Transparency2 = 255and Gradient Angle = 90
Code Changes:
Me.GraphicalText1.Color1 = System.Drawing.Color.Red
Me.GraphicalText1.Color2 = System.Drawing.Color.Lime
Me.GraphicalText1.Effect = VBTrain.GraphicalObjects.GraphicalText.BrushTypeEnum.LinearGradient
Me.GraphicalText1.Transparency1 = 255
Me.GraphicalText1.Transparency2 = 255
Me.GraphicalText1.GradientAngle = 90.0!
Path Gradient Arc Effect with Sweep Gradient Angle
The Sweep Gradient Angle is the sweep angle of the arc when the Effect is PathGradient_Arc.
The Default value is 360.
Effect = Path Gradient Arc with Color1 = Red and Color2 = Lime and Transparency1 = 255 and Transparency2 = 255and Gradient Angle = 0 and Sweep Gradient Angle = 360
Code Changes:
Me.GraphicalText1.Color1 = System.Drawing.Color.Red
Me.GraphicalText1.Color2 = System.Drawing.Color.Lime
Me.GraphicalText1.Effect = VBTrain.GraphicalObjects.GraphicalText.BrushTypeEnum.PathGradient_Arc
Me.GraphicalText1.Transparency1 = 255
Me.GraphicalText1.Transparency2 = 255
Me.GraphicalText1.GradientAngle = 0.0!
Me.GraphicalText1.GradientSweepAngle = 360.0!
Effect = Path Gradient Arc with Color1 = Red and Color2 = Lime and Transparency1 = 255 and Transparency2 = 255and Gradient Angle = 0 and Sweep Gradient Angle = 180
Code Changes:
Me.GraphicalText1.Color1 = System.Drawing.Color.Red
Me.GraphicalText1.Color2 = System.Drawing.Color.Lime
Me.GraphicalText1.Effect = VBTrain.GraphicalObjects.GraphicalText.BrushTypeEnum.PathGradient_Arc
Me.GraphicalText1.Transparency1 = 255
Me.GraphicalText1.Transparency2 = 255
Me.GraphicalText1.GradientAngle = 0.0!
Me.GraphicalText1.GradientSweepAngle = 180.0!
Effect = Path Gradient Arc with Color1 = Red and Color2 = Lime and Transparency1 = 255 and Transparency2 = 255and Gradient Angle = 0 and Sweep Gradient Angle = 270