(Print this page)

Scrolling text
Published date: Thursday, December 1, 2005
On: Moer and Éric Moreau's web site

Have you ever wanted to have scrolling text on your forms? You can display many things in this format such as stock quotes, temperatures of major cities around the world, sports scores, news headlines and so on. Are you convinced now that you may use that kind of control to fulfill many different requirements?

Define what you need to display

A very simple solution would be to scroll a Label control containing your information on the screen. This solution would be correct for some kinds of data like news headlines but is not the most appropriate for temperature, stocks quotes, sports scores … where you have at least two parts of data (a description and at least one value) and each part would benefit in being displayed differently so that the reading is easier. For example, when you see stocks quotes, you normally see the variation in green or red saying that the stock is up or down. Not only colors can help readability. Font style and size can also greatly help.

Example 1: Showing news headlines

This example will be very simple. A Label control will be used

To replicate this example, create a new form in your application. Add a Panel control on your form and set its Dock property to Top. Add a Label control into that panel control. Finally, add a Timer control.

In the Load event of the form, copy this code that will set different properties of the Label control and the Timer control:

'Initialize the content of the label
Dim strText As String
strText = "This is the title of your first news."
strText += " - This is your second announcement."
strText += " - Will you wait long enough to see that one too?"
Label1.Text = strText
Label1.BackColor = Color.SkyBlue
'Be sure that the label fits the content
Label1.AutoSize = True
'Start with the message completely to right
Label1.Left = Panel1.Width

'Start the timer
Timer1.Interval = 25
Timer1.Start()
Probably the most important property here is the AutoSize property of the Label control. It is set to true to make the Label control fits the length of its content.

In the Tick event of the Timer control, you will need this code to move the Label control to the left by 1 pixel every time each time the event is called:

Label1.Left -= 1
If Label1.Left + Label1.Width < 0 Then
    'Restart on the right side of the form
    Label1.Left = Panel1.Width
End If
If you download my example, you will see that I have added a “Horizontal Scrollbar” control to let you play with the speed of the scrolling. When its value changed, the Interval property of the Timer control is simply set.

So if your needs are not much then a simple text with not much of formatting, don’t look further. It is quite simple to have a scrolling effect using a Label control.

Example 2: Showing temperatures around the World

Figure 1: Demo app in action

For the second example, I will use temperatures (in Celsius) that are real at the time of writing to show you we can customize each element of data we want to scroll.

The city names are displayed in a different font from the temperature value. Also, colors are used to emphasize on the temperature value (blue is cold, red is hot, black is comfortable).

I strongly suggest that you download the code of this column (if not already done) because I will not copy each single line of code of this example here.

To create this other example, you better create a new form (mine is fTemperature). A Timer control is added to this form. It will be used to make the text scrolls (simply by invalidating the complete form).

The Load event of the form fills an array of values (city names and a temperature). Then the Timer is initialized and started. Up to this point, it is much the same thing as the previous example.

The interesting code, the real meal of this example lies into the Paint event of the Form. There you will find everything that displays the scrolling text using different fonts and colors. The first part of this event procedure calculates the width of each character to display. Because this calculation can take some time (if you have many elements), we do not want to recalculate these values again and again. A special Static variable (sblnFirstLoopDone) is used to keep track of if we are doing the first loop or not.

The second important part of this procedure starts with:

If Not sarrSizes Is Nothing Then

From this point, the color to display each element is determined according to its temperature. Then the name of the city and the temperature are drawn on the form using the Graphics.DrawString method each using a different font and a color related to their current temperature.

Finally, the next position is calculated and affected to static variables.

That’s it! For anything you want to display using specific formatting, the only place you need play with is this event. Everything is done in a single place and it is not as daunting as it may looks at the first reading.

What you need to do is to build a structure of data (don’t forget that you will probably need to refresh this data from time to time) and customize the Paint method. Not much to do for a flashing interface.

Conclusion

I have shown you to method of having text scrolling on a form. The first was really simple but a bit too limiting in terms of distinct elements formatting. The second method is not that long but gives you full control.

Up to you to decide which one to use!

I hope you appreciated the topic and see you next month.


(Print this page)