few weeks ago I had to work on an application that had a client piece which was required to act like the a one-way messenger e.g. Supervisors wanted to send in messages to their sub ordinates. one of the requirements was whenever a new message arrived, a notification bar should pop-up over the task bar with all the new messages appearing in a ticker fashion ( also messages should scroll smoothly).

There is no .net control available to achieve this. so I searched the internet in hope to get hold of some (free) third party custom controls, but dint find anything of significant help, all I found was how to make characters within the label text scroll horizontally. so I decided to make something of my own.

problems I had to cope with here were:

• how to make a windows form act as a pop-up/Notification bar over the task bar?
• how to implement message ticker (i.e. smooth scrolling of the messages on the pop-up/Notification bar)?

how to make a windows form act as a pop-up/Notification bar over the task bar?

• As always, we begin by creating a new Windows Application (C#.NET)

An illustration of creating a new windows application (C#.NET)

• now by quickly doing the following:
  • Rename the Form1.cs with something meaningful, such as “NotificationTicker.cs”, Press “Yes” when it asks for renaming reference content.
  • Re size the form such that it looks like a notification bar.
  • Drop in a group box from the toolbox and re size it to stretch towards the boundaries.
  • Drop in a label in the group box area and assign some dummy text to it.
  • Set ControlBox Property of the Form to false.
  • Set ShowInTaskbar Property of the Form to false.

  we get

Notification Ticker Initial Form Sample

• verify that everything is working fine by compiling and running the application (F5)
• Width of the form should be equal to the width of the user screen, this is simple, all we need here is to find out the working area of the client machine.
• Working Area of the Client Machine is the space on screen available for the Forms to appear (excluding Taskbars, Docked Windows e.t.c).
• we get this space in the form of rectangle.

Rectangle recWorkingArea = new Rectangle();
recWorkingArea = Screen.PrimaryScreen.WorkingArea;

• by using the working area and a bit of mathematics we can get what we want.

        private int getScreenWidth()
        {
            Rectangle recWorkingArea = new Rectangle();
            recWorkingArea = Screen.PrimaryScreen.WorkingArea;
            return recWorkingArea.Width;
        }
        private int getScreenHeight()
        {
            Rectangle recWorkingArea = new Rectangle();
            recWorkingArea = Screen.PrimaryScreen.WorkingArea;
            return recWorkingArea.Height;
        }
        private void FitToScreen()
        {
            this.Size = new Size(getScreenWidth(), this.FormHeight);
            this.Location = new System.Drawing.Point(0, this.Location.Y);
        }

• FitToScreen() when called will span the form to the width of the user screen.
• Now we need to re size the group box as well, that’s also done with a bit of simple mathematics

private void SetGroupBox()
{
    int diff = (this.Location.X + this.Width) - (this.gbNotificationCenter.Location.X + gbNotificationCenter.Width);
    this.gbNotificationCenter.Size = new Size((getScreenWidth() - diff) - this.gbNotificationCenter.Location.X, this.gbNotificationCenter.Height);
}

• call these functions ( FitToScreen and SetGroupBox ) in the below sequence in the form constructor and then Run(F5) your application

        public NotificationTicker()
        {
            InitializeComponent();
            SetGroupBox();
            FitToScreen();
        }

• if you have done everything as right, you should see a form with the same height (as in the design time) but with a width equal to the your screen width.

now the pop-up part, this requires a bit of tinkling with the Location.Y ( Top-Left ) of the form. if we can somehow place the form initially at the height of the working area and then start decrementing it till Location.Y(of the form) + Height(of the form) equals Height of the working area, this would do the trick. Also note that all of this code would be written in Activated Event of the form, so that whenever the form is activated this form gives an effect of pop-up notification bar.

define a variable FormHeight and initialize it to a static value of the form height shown at the design time. because of at the runtime Height (of the form) becomes (form height (at design time) + ControlBox height).

private void NotificationTicker_Activated(object sender, EventArgs e)
{
    //firsttime is a global boolean variable initialized to true
    if (firsttime)
    {
        //setting this to false, right away. because activated is called again whenever
        //form gets the focus.
        firsttime = false;
        //Initializing the form to the bottom of the working area ( out of visible area )
        this.Location = new System.Drawing.Point(0, getScreenHeight());
        this.Refresh();
        //Read about the below line in the next section, where we will enable it
        //InitiateScrollingThread();
        //calculating the seed, so that opacity increases from 0% to 100% during the course of popping up.
        double opacityIncreaseSeed = 100.0 / (Convert.ToDouble(this.FormHeight) * 100.0);
        //Starting Index for the loop
        int ScreenHeight = getScreenHeight();
        //End Index for the loop to stop
        int StartY = getScreenHeight() - this.FormHeight;
        for (int i = ScreenHeight; i >= StartY; i--)
        {
            //Increasing opacity gradually
            this.Opacity = this.Opacity + opacityIncreaseSeed;
            //updating the location to give the move up effect
            this.Location = new System.Drawing.Point(0, i);
            this.Refresh();
            //to put some delay.
            Thread.Sleep(10);
        }
        //finally setting Opacity of the form to 100%
        this.Opacity = 1.0;
    }
}

• Run(F5) the application and there you have a smooth and graceful pop-up notification bar coming out over the taskbar.
• Download Source Code up till here

moving on to the second problem

how to implement message ticker (i.e. smooth scrolling of the messages on the pop-up/Notification bar)?

This is a bit tricky, but the idea is pretty simple. if you think you can implement smooth scrolling / ticker with two labels potentially. All you need to do is move one label out of the view and simultaneously moving the other one into view, assign a new message to the label that went out of the view and start to move it into the view again while the other one goes out of the view so on and so forth.

to accomplish this we need to drop in a panel and two labels, NOTE: Labels should be placed such that, they are inside the panel.

Demonstration of Notification Ticker with Two labels

here we need to understand that scrolling will be a continuous event and therefore we cannot have this method in the same application thread. we need to create a separate thread to handle the scrolling.

all of this is handled by the following two functions

private void InitiateScrollingThread()
{
    //Bottom of the Panel, will be used for hiding one of the two labels
    int PanelBottom = panel1.Height;
    //Setting the second label below the panel (effectively taking it out of view)
    lblMessageTwo.Location = new Point(lblMessageTwo.Location.X, PanelBottom);
    // we have to set this to false, otherwise we wont able to update the location
    // of the labels from the scrolling thread.
    System.Windows.Forms.Control.CheckForIllegalCrossThreadCalls = false;
    //Initializing the scrollerThread(defined globally, Thread scrollerThread)
    scrollerThread = new Thread(BeginScroll);
    //Starting the BeginScroll Function at a separate thread
    scrollerThread.Start();
}
private void BeginScroll()
{
    //This variable will take label out of view
    int LabelHeight = -lblMessageOne.Height;
    //This variable will be used to assign out of view variable to bottom of the panel, to re-enter
    int PanelBottom = panel1.Height;
    while (true)
    {
        if (lblMessageOne.Location.Y == LabelHeight)
        {
            //when label one goes out of view, it is configured to re enter again
            lblMessageOne.Location = new Point(lblMessageOne.Location.X, PanelBottom);
        }
        else
        {
            //Scrolling label by decrementing it y-axis location
            int MessageOneY = lblMessageOne.Location.Y - 1;
            lblMessageOne.Location = new Point(lblMessageOne.Location.X, MessageOneY);
        }
        if (lblMessageTwo.Location.Y == LabelHeight)
        {
            //when label one goes out of view, it is configured to re enter again
            lblMessageTwo.Location = new Point(lblMessageTwo.Location.X, PanelBottom);
        }
        else
        {
            //Scrolling label by decrementing it y-axis location
            int MessageTwoY = lblMessageTwo.Location.Y - 1;
            lblMessageTwo.Location = new Point(lblMessageTwo.Location.X, MessageTwoY);
        }
        this.Refresh();
        Thread.Sleep(50);

    }
}

• make a call to InitiateScrollingThread() funcation in the Activated Event defined above (in the if condition after setting the Location of the form)
• and that’s it, we are done.
• Run (F5) the application and the see smooth pop-up notification bar over the taskbar and then the smoothly scrolling messages.
• Download Source Code Here
• Cheers (don’t forget to leave your feedback/concerns)

Related Articles:

• How to create (make a Windows Form act like) a Docking Window without a container in C#.NET
• How to make pop-up / Notification bar with Message Ticker (smooth message scroller) over the Task Bar in C#.NET – How to Stop/Start the Ticker on Mouse Hover/Leave