With reference to my article How to make pop-up / Notification bar with Message Ticker (smooth message scroller) over the Task Bar in C#.NET , I have been getting inquiries on how to handle certain mouse events. so in this post I will explain how you can make the scroller stop/start on mouse hover/leave events respectively.

before we go ahead, I feel its important for you as reader to know that this is the third article in the chain.following are reference to the previous articles ( for those who are interested )

1. How to make pop-up / Notification bar with Message Ticker (smooth message scroller) over the Task Bar in C#.NET | Download Source Code
2. How to create (make a Windows Form act like) a Docking Window without a container in C#.NET | Download Source Code

moving on.

we have two labels which are working as a smooth vertically scrolling set of messages, this scroll effect is given by a Thread we created with the name BeginScroll, so in order to make the labels stop we have to some how make the infinite loop in the BeginScroll thread to stop and vice versa in case of start it again. for that to happen we are going to use a a concept straight out of the operating system textbook i.e. Semaphore/Mutex.

we have to develope a machanism that would allow us to use Signal/Wait strategy. For that .NET Framework has a handy feature called ManualResetEvent(details of this is out of the scope of this article, so I would prefer you to look here for further information ) 

(You can use any of the source code mentioned in the above two articles,I will be using source code from the second article mentioned above in this example)

• Add the following two global declarations to the code (NotificationTiker.cs)

        public ManualResetEvent signalThread = new ManualResetEvent(false);
        private bool keepScrolling;
 

• now add the MouseHover and MouseLeave events for the both the labels such that they should match the following code.

private void lblMessageOne_MouseHover(object sender, EventArgs e)
        {
            //Set KeepSrcolling variable to false so that the loop
            //in the thread terminates
            keepScrolling = false;
            //Reset Event of the ManualResetEvent will make WaitOne
            //Event in the BeginScroll Thread to block and effectively
            //stopping the scroll effect
            signalThread.Reset();
        }

        private void lblMessageOne_MouseLeave(object sender, EventArgs e)
        {
            //Set Event of the ManualResetEvent will release the blocked
            //Thread (blocked by the WaitOne Method)
            signalThread.Set();
        }

        private void lblMessageTwo_MouseHover(object sender, EventArgs e)
        {
            //Set KeepSrcolling variable to false so that the loop
            //in the thread terminates
            keepScrolling = false;
            //Reset Event of the ManualResetEvent will make WaitOne
            //Event in the BeginScroll Thread to block and effectively
            //stopping the scroll effect
            signalThread.Reset();
        }

        private void lblMessageTwo_MouseLeave(object sender, EventArgs e)
        {
            //Set Event of the ManualResetEvent will release the blocked
            //Thread (blocked by the WaitOne Method)
            signalThread.Set();
        }

now after making some changes to the scroll function, it should contain the following code

        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;
            bool firstEntry = true;
            while (true)
            {
                if (!firstEntry)
                    signalThread.WaitOne();
                keepScrolling = true;
                while (keepScrolling)
                {
                    firstEntry = false;
                    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);
                }
            }
        }

• this is it, now Run(F5) the application and test the mouse over and leave events.
• Cheers, dont forget to leave comments/feedback.
• Download Source Code Here.

Time to share another interesting requirement I had to deal with when I was working on messaging application some time back(just in case if somebody is interested, I wrote about the Notification bar with smooth message/label scroller), which was how to make a Docking Window without a container.

Since there is no built in feature in the .NET Framework 2.0 to facilitate this, I decided to yet again  tinkle up with the dynamic positioning of the form on the screen. All I needed was a windows form which could act like Docking Window on the Right of the screen.

I will integrate this piece in the previous application I buit on How to make pop-up / Notification bar with Merssage Ticker (smooth message scroller) over the Task Bar in C#.NET

• Create a new Windows application (C#.NET) or Download the application I mentioned above.
• Add a new windows form with the name “DockingWindow”
• Re-Size it such that it looks like a Docking Window ( set Size 310, 450 ), also set ControlBox Property to False and FormBorderStyle to None. This will remove the windows normal controls to Close,Minimize and Restore.
• Now Add a Panel (ID: pVisiblePart) and set it Dock Property to Left.

An Illustration of Initial Version of Docking Window

Since Docking Window is required to stick to the right side of the desktop and also should resize dynamically such that it matches the height of the working area. Also we would require a Button which will allow us to Dock(>>)/UnDock(<<) the Window.

Dock (>>)

This would require us to set the Location of the Docking Window such that only the panel (pVisiblePart) is visible, with the Button Available to UnDock the Window

Un-Dock(<<)

This would require us to set the Location back to normal but still sticking to the right side of the screen, with a Button Available to Dock again.

so for the code should look like this.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

namespace _DotToString_NotificationBarTicker
{
    public partial class DockingWindow : Form
    {
        public DockingWindow()
        {
            InitializeComponent();
            configureThis();
        }
        ///
        /// Gets The Screen Width Available for Work
        ///
        /// Working Width Area
        private int getScreenWidth()
        {
            Rectangle recWorkingArea = new Rectangle();
            recWorkingArea = Screen.PrimaryScreen.WorkingArea;
            return recWorkingArea.Width;
        }
        ///
        /// Gets The Screen Height Available for Work
        ///
        /// Working Height Area
        private int getScreenHeight()
        {
            Rectangle recWorkingArea = new Rectangle();
            recWorkingArea = Screen.PrimaryScreen.WorkingArea;
            return recWorkingArea.Height;
        }
        ///
        /// Initialize the Docking Window Start Location
        ///
        private void configureThis()
        {
            //Dynamically resizing the form to match the height available on the screen
            this.Size = new Size(this.Width, getScreenHeight());
            //Calculating the Horizontal Location of the Form (Docking Window)
            //such that only the panel having the Docking Window's Navigation Control
            //will be visible
            int EndX = getScreenWidth() - pVisiblePart.Width;
            this.Location = new System.Drawing.Point(EndX, 0);
            //Setting the Text of the Button which will act at the Navigation for Docking Window
            this.btnDockUnDock.Text = "<<";
        }
    }
}

I have documented through the code so that it helps you understand various code statements.

• Now Run(F5) your project
• you should be able to see the following

An Illustration of Initial Docking Window

• now we just need to take care of two things,
  • how to Un-Dock the Docking Window?
  • how to Dock the Docking Window?

How to Un-Dock the Docking Window?

on the click event of the button we will now change the location of the window such that it gives an effect of coming out from the left.

        private void btnDockUnDock_Click(object sender, EventArgs e)
        {
            if (btnDockUnDock.Text.Trim().Equals("<<"))
                DockOut();
            else
                DockIn();
        }
        ///
        /// Docking Window is brought to the front
        ///
        public void DockOut()
        {
            //Starting Location of the Docking Window
            int StartX = this.Location.X;
            //Calculating the final X Coordinate at which the docking window should
            //settle in order to be completely visible
            int EndX = getScreenWidth() - this.Width;
            //This loops does the trick for us, this will effectively simulate the
            //coming out effect to the docking window, eventually making the window
            //completely visible
            for (int i = StartX; i >= EndX; i--)
            {
                this.Location = new System.Drawing.Point(i, 0);
            }
            //Setting the final location (ensuring the final location)
            this.Location = new System.Drawing.Point(EndX, 0);
            this.btnDockUnDock.Text = ">>";
        }
        ///
        /// Docking Window is Docked Back In
        ///
        public void DockIn()
        {
            //Getting the Start Location for the loop
            int StartX = this.Location.X;
            //Calculation the final x coordinate for the loop to finish
            int EndX = getScreenWidth() - pVisiblePart.Width;
            //This is loop will dock the window back in
            for (int i = StartX; i <= EndX; i++)
            {
                this.Location = new System.Drawing.Point(i, 0);
            }
            this.Location = new System.Drawing.Point(EndX, 0);
            this.btnDockUnDock.Text = "<<";
        }

An Illustration of Docking Window in Visible Mode: Dock Out

• BINGO!  thats just about it, Docking Window is there to be used.
• you can continue adding contents to the form’s working area just like a common form.
• Cheers, don’t forget to leave in your comments/feedback.
• Download the complete source code here

Related Articles:

• How to make pop-up / Notification bar with Message Ticker (smooth message scroller) over the Task Bar 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

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