A recent post in the VBCityForums has just reminded me of a technique that I meant to blog, but don't think I ever got round to doing. This is to show how you can customise a label so that you can have text that uses different fonts on the same label.
Normally of course, you set the font and forecolor in the Properties Window at design time, although you can also set or change them at run time too via the Font and ForeColor properties. But the key thing is that you can only have one font, one font size, one text color and one fontstyle for the whole label if you do this.
So what happens if you want to create something that has, for instance, a heading in red text - bold style and underlined and a second line with a message in black text - regular style font ?
In this case you need to draw the text yourself using DrawString. It's really very easy to do as you'll see. Although you could squash it all into about four lines of code, it isn't so easy to see what's happening if you do that. That also means that it's a lot harder to debug if you make a mistake in the syntax or you just want to change something later.
So breaking it down into logical steps, these are:
- Create the string for the heading
- Create the string for the message
- Create the font for the heading
- Create the font for the message
- Get the Graphics Object of the Label
- Draw the Heading
- Draw the Message.
Here's the code. Note that it is placed in the Paint event of the label. Doing this will ensure that any time the label requires to be redrawn as the application is running, your text will be refreshed as necessary.
Private Sub Label1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Label1.Paint
' Save the text in string variables
Dim TopLine As String = "Warning!"
Dim Detail As String = "Too much font is bad for your health."
' Create fonts and save them in font variables
Dim topFont As New Font("Verdana", 10, FontStyle.Bold Or FontStyle.Underline)
Dim detailFont As New Font("Verdana", 9, FontStyle.Regular)
' Get the Graphics Object of the label control
Dim g As Graphics = e.Graphics
' Draw the two lines of text.
g.DrawString(TopLine, topFont, Brushes.Red, 10, 10)
g.DrawString(Detail, detailFont, Brushes.Black, 10, 35)
End Sub
And that's all there is to it. You can mix and match the colors, sizes, start positions of the text, etc, as much you like. Good design advice is to keep to one font type (e.g. all Verdana or all Arial, etc) as studies have shown that most users don't like a mixture of fonts in one small area.
You can still add an image to the label using the Properties Window and place it where you want it. Alternatively you can add an image as a Resource to your project and then draw the image too at run time. The following example will draw a resource image named "Alert" in the top right area of the label. This code would be inserted immediately above the "End Sub" statement of the original code block above.
' Add an icon
g.DrawImage(My.Resources.Alert, 250, 10)
Here's the finished product:
