Text scroll effect

Introduction

In this tutorial, you will learn how to make a text scrolling effect using a label control. It's really quite simple, and it has a cool visual effect. To follow this tutorial step-by-step you will need .NET Framework and Visual Studio .NET installed on your machine.

Getting to work

Let's begin by creating a new C# Project using Visual Studio .NET. Select File -> New Project -> Visual C# Project -> Windows Application. Name your project however you want, I will call it TextScroll.

You are now in front of the Design view of your interface. First, we must create the user interface, after witch we will begin the coding part. The first thing we will do is add a Label control. To do that, select View -> Toolbox (or press Ctrl + Alt +X ). Select the Label control, drag and drop it onto our form. Now, we will need to adjust some properties of the Label. Select the Property window (if it's not visible, select View -> Properties Window, or just press F4). Change the TextAlign property to MiddleCenter ( by doing that, the text of the label will be displayed centered ). Also, the Text property of the label needs to display no text(from the Properties window, remove the text "label1", witch Visual Studio .NET adds it by default). It is preferred that we change the BackColor property (I changed it to SlateGray color, but you can use almost any color as long as the BackColor and ForeColor are different). Now change the ForeColor to LightSalmon. Let's add a Button for starting the scroll. Set its Text property to Start Scrolling and the Name to btn_start. The next thing we need to add is a TextBox control, to allow the user to input the string that he wants to scroll. Visual Studio .NET will name the TextBox to textBox1, we will change this Name to tb_scroll. Go to the Text property and remove "textBox1" string.

Another property we will need to change is MaxLength property to 30. This is the maximum number of characters that we allow the user to type into this control. The reason that we do this is that for a rather large number of characters, let's say 50, the label that we created earlier will display the text on two columns, making the scroll look rather ugly.

Put a Label control above the TextBox created earlier, and set the Text property to "Please enter the string to be scrolled:". For now, the design part is over.

After there steps, your form should look something like this:

Let's start creating some code, shall we?

Double-click the TextBox control. Visual Studio .NET created a method called tb_text_TextChanged. As its name says, this method occurs whenever the Text property of the TextBox changes. What we want to do is disable btn_start if we have no text in the TextBox. To do this, we need to add the following code:

if (tb_text.Text.Trim()="")

btn_start.Enabled = false;

else

btn_start.Enabled = true;

The Trim() method, called with no argument, removes the extra spaces from the beginning and the end of the text. If the text property of tb_text is "", we want btn_start to be disabled, else we enable it.

In the Design view, double-click the form's surface and a method called Form1_Load is created. In this method, we need to add the following:

btn_start.Enabled=false;

The reason we do this is that when our application starts, the TextBox has no text in it, and we want btn_start to be disabled, because we have no text to scroll.

Let's go back to Design view and double-click btn_start. Visual Studio will create a method called btn_start_Click. In this method we will write some code to begin the scrolling.

First, we must understand how this scrolling works. We have a string, let's say "string to test the scrolling effect ". To create the effect, we must remove the last character of the string and set the label's Text property to the new string "string to test the scrolling effect". Now we must place the removed character(' ') in the first position of the string, so that we have " string to test the scrolling effect". We must repeat this action until we have the same string that we had when we started. The steps are:

string to test the scrolling effect
string to test the scrolling effect
t string to test the scrolling effec
ct string to test the scrolling effe
ect string to test the scrolling eff
fect string to test the scrolling ef
ffect string to test the scrolling e
effect string to test the scrolling
effect string to test the scrolling
g effect string to test the scrollin
......................................................
string to test the scrolling effect

So we will have to create a function that executes the scrolling until the form is closed.

Now, we have to create a method that handles the scrolling, and call this method in the btn_start_Click method. Let's create the following method:

private void ScrollText()
{
}

Now we need to create the code that does the job.

System.Text.StringBuilder sb = new System.Text.StringBuilder(tb_text.Text+" ");

StringBuilder class helps up to manipulate strings. We call the constructor that takes a string that we will play with. The reason that a space is appended at the end of the text is to separate the last and the first character. We need this class' methods Insert (to insert the character we remove from the end at the beginning of the string ) and Remove ( to remove the last character from the string ).

while (true)
{

char ch = sb[sb.Length-1];
sb.Remove(sb.Length-1,1);
sb.Insert(0,ch);
label1.Text = sb.ToString();
label1.Refresh();
System.Threading.Thread.Sleep(100);

}

We do the scrolling until the user closes the window. We declare a variable of type char to hold the last character from the string,whitch we will remove using Remove() method. Next, we insert that character into the beginning of the string. We set the label text as the new text, refresh it and then we use the Sleep() method to pause the execution for 100 miliseconds. And that's the scroll.

All we have to do now is call the ScrollText() method in the btn_start_Click method. We also need to add some extra code:

btn_start.Enabled=false;
ScrollText();

Run the application and see this working.

The main problem of the application is a non-responsive user interface. That's because we do the scroll operation is performed on the same thread that the user interface function run on. To avoid this, we need to create an asynchronous delegate.

The first step is to declare a delegate at the beginning of the class and create an instance of it.

public delegate void ScrollDelegate();
private ScrollDelegate s_del;

The next step is to initialize it in the Form_Load method.

s_del = new ScrollDelegate(ScrollText);

Now, when we call the BeginInvoke() method of s_del, the scrolling will occur. We win call BeginInvoke() in the btn_start_Click method, replacing the call to ScrollText method.

s_del.BeginInvoke(null,null);

Let's run the application again now. You notice how improvement we've created by adding 4 lines of code?

Here is the application when I run it on my computer:

You can play around with the sleep interval(make the interval smaller to have a faster and smoother scroll, and make it bigger to have a "lazy" scroll).

Well, we've reached the end of this lesson. I hope you had as much fun as I did!