Coffeehouse Thread

7 posts

Forum Read Only

This forum has been made read only by the site admins. No new threads or comments can be added.

Outlook Style Notifications (Revisited)

Back to Forum: Coffeehouse
  • User profile image
    Angus

    I am writing an application that will be released, I hope, on the Sandbox in a few weeks, but I am in need of some help. I remember the thread by PeterH that was about the Outlook Style Notifications, I need just those notifications for my application, though sadly as he states, he has not kept a hard copy, and he changed hosts.

    So, my real question is, did anybody download and keep this file, if so can you please give me a link so I can download it because I need it a lot to complete the project I am currently working on.

    Thanks in advance

    Angus Higgins

  • User profile image
    Travis H

    Outlook style notifications, or notifications in general are very easy to make.  You may also add some jazzy touches to them to make it more appealing, and user friendly when displayed.

    I'm assuming by what you are saying that you wish to show an outlook style notification based on a certain event being fired, right?

    Either way, what I would do first is create a form that will overall be used to display the notification.

    Below are the steps I've done to create notifications in my application, as well as the code snippets.

    Outlook Style Notification Steps
    Step 1:
    You need to create a new form in your solution that will be used as the notification form.  Since you are wanting it to look like the outlook 2003 style notifications, you should download the following image.

    Notification Background: http://download.elwoh.com/Popup.png

    You should set the notification form's background image to the "popup.png" image.  Furthermore, if you wish to not use the image, you can insert panels.  Basically, just design the form as you want it to appear in the bottom right side of the screen.


    Step 2:
    Now that we have the basic layout of the notification form, let's add a few different labels.  You may add whatever different labels you wish to, however I've created one label called "NotificationText".

    This will be the main text, or informaton to display within the notification.


    Step 3:
    Create a OnLoad event for the notification form.  You will need to set the text of the notification here, there are several different ways you can dynamically set the text.

    You may create a property, use a module, whatever you want.  In this case I'm using a module that has a public variable of "NotificationTextStr".

    Public NotificationTextStr As String


    Back to the "OnLoad" event for the notification form, depending on how you have your notification text stored, you will change the label in different ways.  Using the module based way that I'm using you will simply change it like so:

    Me.NotificationText.Text = DBM_Info.NotificationText()
    *Where DBM_Info is the name of the module where the variable is declared.

    And voila, the text of your notification dialog will be dynamically set on it's load.


    Step 4:
    Depending on where you want the notification to display, you will either set the location in the OnLoad event, or in the sub or function that actually calls the opening of the form.

    In this case, I will display the notification in the right side of the screen, and I'll set the location of the dialog from the "OnLoad" event.

    Dim rect As System.Drawing.Rectangle
    rect = System.Windows.Forms.Screen.GetWorkingArea(Me)

    If System.Windows.Forms.Screen.GetWorkingArea(Me).Top > 0 Then
       Me.Location = New Point(rect.Width - Me.Width - 2, rect.Top)
    Else
       Me.Location = New Point(rect.Width - Me.Width - 2, rect.Height - Me.Height - 2 + rect.Top)
    End If

    You can see from the above code that we are setting the location of the notification dialog 2 pixels from the right, bottom of the currently active screen.


    Step 5:
    Now that we have the notification dialog created, we can call it to be shown on any event.

    To make things easier as time goes on, I'd create a sub to set the text, and open the notification dialog so that you don't have to keep typing the same code all over again Smiley

    So let's make a sub called "ShowNotification", and make it public.

    Public Sub ShowNotification(ByVal NotificationText As String)
       [...]
    End Sub

    Inside this sub we will have the code to set the text of the notification, and to open the notification dialog.  If you chose to set the location of the dialog from the calling function or sub, this is the place to do it.

    Public Sub ShowNotification(ByVal NotificationText As String)
       Dim NotificationDialog As New NotificationPop

       DBM_Info.NotificationText = NotificationText

       NotificationDialog.ShowDialog(Me)
    End Sub

    So now, when we call the "SnowNotification" sub, we will create a new instance of the NotificationPop form (The notification form), set the text of the notification dialog, and then show the dialog.


    Adding extras:
    It's always nice to have extra cool things, isn't it Smiley  Other times it just makes the users mad as I found out last night in the conference call.

    In my notification dialog I wanted to make it fade in, and then fade out.  To do this, I create a timer and changed the opacity.

    The first thing you should do is create a new timer on the NotificationPop form (The notification form).  Name the timer something like "FadeTimer".

    You should also create a private variable called "FadeIn", which should contain a boolean value.

    Private FadeIn As Boolean = True

    Now that we have the timer created, and the FadeIn variable created we need to add a Tick event to the timer.

    Private Sub FadeTimer_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles FadeTimer.Tick
       [...]
    End Sub

    Within this event, we will find out whether or not we are to fade in, or fade out the form.

    The variable that we created earlier, "FadeIn" will be used to tell us whether we are going to Fade In (True), or Fade Out (False) the form.

    If (FadeIn) Then
       [...]
    Else
       [...]
    End If

    Basically to make the form fade in, we just change the opacity from 0 to 1, so in the tick event of the FadeTimer we will insert the code to change the forms opacity level.

    If (FadeIn) Then
       If Me.Opacity = 1 then
          FadeTimer.Stop()
          FadeIn = False
       Else
          Me.Opacity = (Me.Opacity + 0.1)
       End If
    Else
       [...]
    End If

    You can see by the above code that each time that the FadeTimer Tick event fires, we are adding 0.1 to the overall opacity of the form, which is 10%.

    If we see that the form's opacity is already at 100% (1), then we will stop the FadeTimer, and set the fade action to Fade Out (FadeIn = False).


    The fade out code should follow the same structure as the fade in code, except that we should subtract 10%, rather than add.

    If (FadeIn) Then
       If Me.Opacity = 1 then
          FadeTimer.Stop()
          FadeIn = False
       Else
          Me.Opacity = (Me.Opacity + 0.1)
       End If
    Else
       If Me.Opacity = 1 then
          FadeTimer.Stop()
          Me.Close()
       Else
          Me.Opacity = (Me.Opacity - 0.1)
       End If
    End If

    On the FadeOut code, I've made it close the notification dialog so that it doesn't stay open, but hidden.

    Now that you know what is going on with the fading, you can tell that the interval of the FadeTimer will make the speed of the fade transition faster or slower.

    I've got my timer interval set on 250, which is 250 MS.


    So we have the FadeTimer event all setup so that the form will fade in, and fade out.  Now we need to change the opacity of the form to 0%, and start the FadeTimer.  We will do this in the "OnLoad" event of the form.

    Private Sub NotificationPop_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        [...]
       Me.Opacity = 0

       FadeTimer.Start()
    End Sub
    *Note: This is not the entire OnLoad event code, only the code for the fade.

    So now when the NotificationPop form is shown, we will see a nice smooth (if the timer interval is set low) fade transition.


    You may also add more functionality to the notification dialog, such as a close buttom, MouseOver events to trigger the form to show or disapper, etc.  It's up to you.

    I will now add another timer to the form that will wait 7 seconds, and then close the notification.

    To do this, all you need to do is create another timer called "DisplayTimer", and set it's interval to 7000 (7000 MS = 7 S; S * 1000 = MS).

    We should create a new variable called "BeginClose", as a boolean value.

    Private BeginClose As Boolean = False

    Then create a OnTick event handler for the DisplayTimer.  In this event we will want to stop the display timer, set the BeginClose variable to True, set the fade action to FadeOut (FadeIn = False), and start FadeTimer.

    Private Sub DisplayTimer_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles FadeTimer.Tick
       DisplayTimer.Stop()
       FadeIn = False
       BeginClose = True

       FadeTimer.Start()
    End Sub

    Okay, It's looking pretty good now.  We have the DisplayTimer set so that the notification will display for 7 seconds, and then fade out and close.  However, we aren't catching mouse events to stop the display timer yet.

    If we want to insure that when the mouse comes into the range of the notification dialog, the dialog will not disappear, nor will it continue to fade out if it's already started to close we must add some more code to the form.

    We need to add two more event handles to the notification dialog in order to make this work.  Create an event handler for the MouseEnter, and MouseLeave events.

    No very much code will be placed within these events, just basic start and stop events for the two timers.

    In the MouseEnter sub, we should both stop the DisplayTimer, and stop the FadeTimer.

    Private Sub NotificationPop_MouseEnter(ByVal sender As Object, ByVal e As System.EventArgs) Handles NotificationPop.MouseEnter
       FadeTimer.Stop()
       DisplayTimer.Stop()

       Me.Opacity = 1
    End Sub

    For the MouseLeave event we should determine whether or not the DisplayTimer had already fired.  Depending on whether or not it fired we will either start the DisplayTimer again, or directly go to the FadeOut.

    Private Sub NotificationPop_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) Handles NotificationPop.MouseLeave
       If (BeginClose) Then
          FadeIn = False
          FadeTimer.Start()
       Else
          DisplayTimer.Start()
       End If
    End Sub

    Another cool option that you should add to the notification dialog is a close button.  You can create a basic button with an X, or you can create a nice image and use it as the close button.

    In my notification dialog I've created a close image to use.  You may download the two state images below for the close button.

    Close Button Regular: http://downloads.elwoh.com/Close_up.bmp
    Close Button Hover: http://downloads.elwoh.com/Close_over.bmp

    In order to use these two images in the dialog as they are meant to be used, you will need to add them both to the solution as embedded resources.

    Then on the notification dialog, define two variables to hold the images as a bitmap.

    Private Close_Over As Bitmap = New System.Drawing.Bitmap(System.Reflection.Assembly.GetExecutingAssembly().GetManifestResourceStream("E_SDB.Close_over.bmp"))

    Private Close_Off As Bitmap = New System.Drawing.Bitmap(System.Reflection.Assembly.GetExecutingAssembly().GetManifestResourceStream("E_SDB.Close_up.bmp"))

    *Note: "E_SDB" should be the name of the assembly.

    Now then in the designer view of the notification dialog, add a new PictureBox, and set it's image to the Close_Up.bmp file.

    You should either resize the picture box to fit the image, or turn on the AutoSize function.

    To enable the two different image states we need to add event handles for two different events.  Much like the main form we need to have handlers for MouseEnter, and MouseLeave.

    In the event handler sub for MouseEnter we should set the image of the picture box, or close button to Close_Over.

    Private Sub CloseButton_MouseEnter(ByVal sender As Object, ByVal e As System.EventArgs) Handles CloseButton.MouseEnter
       CloseButton.Image = Close_Over
    End Sub

    The same goes for the MouseLeave event, except we need to set the image to Close_Off, which is the normal state for the close button.

    Private Sub CloseButton_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) Handles CloseButton.MouseLeave
       CloseButton.Image = Close_Off
    End Sub

    Last, but not least we need to add the basic function to the close button.  To do this, you will need to add another event handler for the OnClick event of the Close Button.

    Within this handler, you can either start the fade out, and close the form or you can directly close the form, which will elminate the 7 second fade time.

    Private Sub CloseButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles CloseButton.Click
       Me.Close()
    End Sub


    Summary:
    Okay, so in summary of this notification dialog, with all features we have a single dialog with one label that will be used to display the text of the notification, two simple fade events (Fade in, and Fade out), a simple close button with two states (hover, and regular).

    Below is the code for the notification form.

    Private Close_Over As Bitmap = New System.Drawing.Bitmap(System.Reflection.Assembly.GetExecutingAssembly().GetManifestResourceStream("E_SDB.Close_over.bmp"))

    Private Close_Off As Bitmap = New System.Drawing.Bitmap(System.Reflection.Assembly.GetExecutingAssembly().GetManifestResourceStream("E_SDB.Close_up.bmp"))

    Private FadeIn As Boolean = True
    Private BeginClose As Boolean = False

    Private Sub NotificationPop_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
       Dim rect As System.Drawing.Rectangle
       rect = System.Windows.Forms.Screen.GetWorkingArea(Me)

       If System.Windows.Forms.Screen.GetWorkingArea(Me).Top > 0
       Then
          Me.Location = New Point(rect.Width - Me.Width - 2, rect.Top)
       Else
          Me.Location = New Point(rect.Width - Me.Width - 2, rect.Height - Me.Height - 2 + rect.Top)
       End If

       Me.Opacity = 0

       FadeTimer.Start()
    End Sub

    Private Sub FadeTimer_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles FadeTimer.Tick
    If (FadeIn) Then
       If Me.Opacity = 1 then
          FadeTimer.Stop()
          FadeIn = False
       Else
          Me.Opacity = (Me.Opacity + 0.1)
       End If
    Else
       If Me.Opacity = 1 then
          FadeTimer.Stop()
          Me.Close()
       Else
          Me.Opacity = (Me.Opacity - 0.1)
       End If
    End If
    End Sub


    Private Sub DisplayTimer_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles FadeTimer.Tick
       DisplayTimer.Stop()
       FadeIn = False
       BeginClose = True

       FadeTimer.Start()
    End Sub

    Private Sub NotificationPop_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) Handles NotificationPop.MouseLeave
       If (BeginClose) Then
          FadeIn = False
          FadeTimer.Start()
       Else
          DisplayTimer.Start()
       End If
    End Sub

    Private Sub NotificationPop_MouseEnter(ByVal sender As Object, ByVal e As System.EventArgs) Handles NotificationPop.MouseEnter
       FadeTimer.Stop()
       DisplayTimer.Stop()

       Me.Opacity = 1
    End Sub

    Private Sub CloseButton_MouseEnter(ByVal sender As Object, ByVal e As System.EventArgs) Handles CloseButton.MouseEnter
       CloseButton.Image = Close_Over
    End Sub

    Private Sub CloseButton_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) Handles CloseButton.MouseLeave
       CloseButton.Image = Close_Off
    End Sub

    Private Sub CloseButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles CloseButton.Click
       Me.Close()
    End Sub


    And the code for the main function that will show the notification dialog.

    Public Sub ShowNotification(ByVal NotificationText As String)
       Dim NotificationDialog As New NotificationPop

       DBM_Info.NotificationText = NotificationText

       NotificationDialog.ShowDialog(Me)
    End Sub

  • User profile image
    XiXora

    cool, i'm bookmarking this Big Smile
    although, i'd have to c#ise the code for my app Wink

  • User profile image
    Travis H

    XiXora wrote:
    cool, i'm bookmarking this
    although, i'd have to c#ise the code for my app


    Here is the C# code that corresponds to the article above.

    Notification Dialog:
    private Bitmap Close_Over = new System.Drawing.Bitmap( System.Reflection.Assembly.GetExecutingAssembly().GetManifestResourceStream( "E_SDB.Close_over.bmp" ) );

    private Bitmap Close_Off = new System.Drawing.Bitmap( System.Reflection.Assembly.GetExecutingAssembly().GetManifestResourceStream( "E_SDB.Close_up.bmp" ) );

    private bool FadeIn = true;
    private bool BeginClose = false;

    private void NotificationPop_Load( System.Object sender, System.EventArgs e ) {

    System.Drawing.Rectangle rect = null;

    rect = System.Windows.Forms.Screen.GetWorkingArea( this );

    if ( System.Windows.Forms.Screen.GetWorkingArea( this ).Top > 0 ) {

    this.Location = new Point( rect.Width - this.Width - 2, rect.Top );

    }

    else {

    this.Location = new Point( rect.Width - this.Width - 2, rect.Height - this.Height - 2 + rect.Top );

    }

    this.Opacity = 0;

    this.NotificationText.Text = DBM_Info.NotificationText;

    FadeTimer.Start();

    }

    private void FadeTimer_Tick( System.Object sender, System.EventArgs e ) {
    if ( ( FadeIn ) ) { 
       if ( this.Opacity == 1 ) { 
          FadeTimer.Stop(); 
          FadeIn = false; 
       } 
       else
       { 
          this.Opacity = ( this.Opacity + 0.1 ); 
       }
    }
    else 

       if ( this.Opacity == 1 ) 
       { 
          FadeTimer.Stop(); 
          this.Close(); 
       } 
       else
       { 
          this.Opacity = ( this.Opacity - 0.1 ); 
       }
    }
    }

    private void DisplayTimer_Tick( System.Object sender, System.EventArgs e ) { 
       DisplayTimer.Stop(); 
       FadeIn = false; 
       BeginClose = true; 
       FadeTimer.Start();
    }

    private void NotificationPop_MouseLeave( Object sender, System.EventArgs e ) { 
       if ( ( BeginClose ) ) { 
          FadeIn = false; 
          FadeTimer.Start(); 
       } 
       else
       {

          DisplayTimer.Start(); 
       }
    }

    private void NotificationPop_MouseEnter( Object sender, System.EventArgs e ) { 
       FadeTimer.Stop(); 
       DisplayTimer.Stop(); 
       this.Opacity = 1;
    }

    private void CloseButton_MouseEnter( Object sender, System.EventArgs e ) { 
       CloseButton.Image = Close_Over;
    }

    private void CloseButton_MouseLeave( Object sender, System.EventArgs e ) { 
       CloseButton.Image = Close_Off;
    }

    private void CloseButton_Click( Object sender, System.EventArgs e ) { 
       this.Close();
    }


    Function To Show Notification:

    public void ShowNotification( string NotificationText ) { 
       NotificationPop NotificationDialog = new NotificationPop(); 
       DBM_Info.NotificationText = NotificationText; 
       NotificationDialog.ShowDialog( this );
    }

  • User profile image
    Angus

    I am very grateful for your time and help. I have made a simple test application in C# that uses this, the exact code you have written, on a button click it should display a notification, however it has not done so, it seems as if the application should be displaying one as the original form becomes off focus, yet no dialog is displayed. Also what are the assembly things you talk of and where are they.

    Thanks

    Angus Higgins

  • User profile image
    Travis H

    I'm not sure exactly what code you are writting, and how you are doing it, so I've made two example solutions with the code I've written above (In C#, and VB.NET).

    Visual Basic.NET Solution:
    http://downloads.elwoh.com/NotificationDialog.rar (43.22KB)
    http://downloads.elwoh.com/NotificationDialog.zip (47.20KB)

    C-Sharp (C#) Solution:
    http://downloads.elwoh.com/NotificationDialog_CS.rar (22.09KB)
    http://downloads.elwoh.com/NotificationDialog_CS.zip (24.46KB)

    Let me know how it goes once you download these examples.

  • User profile image
    Angus

    Thanks, worked.

    Angus Higgins

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.