Breadcrumbs

[Codex]

Hello,

//This was originally posted on my site by me.
//For the original topic, visit: http://codexvideos.com/notification-slider/

Have you ever wondered how to make the sliding effect like on MSN when someone comes/goes online/offline or when you receive a email ?
In this tutorial you will learn how to make that effect.

Lets start by adding 2 sliders, SlideUp and SlideDown, leave enabled = false and put interval to 1
Now add 2 buttons;
Button1's text will be "Slide up"
Button2's text will be "Slide down"

Now we are going to add our notification form, make the width: 269 and the height: 180. I called my form noti
Go to the form's properties and put None next to FormBorderStyle.


Now lets start coding.
Double click your newly created form (noti) and add

Code: Select all

Me.Location = New Point(My.Computer.Screen.WorkingArea.Width - Me.Width, My.Computer.Screen.WorkingArea.Height)

This will make the form appear in bottom right corner.

Next we are going to go back to form1 and double click SlideUp and add this code:

Code: Select all

        If Not noti.Location.Y = My.Computer.Screen.WorkingArea.Height - noti.Height Then
            noti.Location = New Point(noti.Location.X, noti.Location.Y - 4)
        End If

Which will make the form slide up until it is fully visible. Note that the form goes up 4 pixels every 1 millisecond, so if you have changed the height of the notification form make sure that you change the 4 to a appropriate number.

To start the slideup effect we need to add this code to Button1:

Code: Select all

        noti.Show()
        SlideDown.Stop()
        SlideUp.Start()

First, it will make the notification form appear, then it will stop the slide down effect in case it's still working, and lastly start sliding up.
To make it slide down again double click the Button2 and add this code:

Code: Select all

        SlideUp.Stop()
        SlideDown.Start()

This will stop the slide up effect and start the slide down effect.

Now lastly we need to add the code for the sliding down effect, double click SlideDown and add this code:

Code: Select all

        If Not noti.Location.Y = My.Computer.Screen.WorkingArea.Height Then
            noti.Location = New Point(noti.Location.X, noti.Location.Y + 4)
        Else
            noti.Close()
            SlideDown.Stop()
        End If

This code will make the form slide down until it's not visible, so when it's not visible, it will close the notification form and stop the slide down effect.

Thats all,
- CodexVideos