Derik Whittaker

Syndication

News


Creating a Toast Like Notification Popup on WP7

If you have seen any of the demos for the Windows Phone 7 you may have seen or heard about the concept of its Toast Notification.  A Toast Notification is a way for the device to receive a message which originates from some webservice and can be used to display useful information to a user.  When the user receives a toast they are presented with a fairly unobtrusive dialog which displays the message. (see below)

image

As great as it is to be able to send a toast and have your user get the information there is one major flaw in my opinion.  This flaw is that there is no way for 3rd party developers (that would be everyone outside of Microsoft and their OEMs) to trigger this notification from the device itself.  Because this toast notification is so elegant and unobtrusive I can easily think up scenarios where a developer may want to trigger this notification within their application to tell a user about something.  However w/ v1 of the WP7 tools developers will NOT be able to trigger this without sending an request to the notification services (aka doing a full round trip to a web service and back).  This sucks, but this logic can be duplicated w/ very little effort.

How to create your own popup notification.

Creating the UserControl which will contain the main content for the notification.  When using the Popup control (from System.Windows.Controls.Primitives) you need to set the .Child property to some sort of UI element for display.  The simplest thing to do is to create a new user control which will hold your layout for your notification window.  Below is an example of my (very simple) control.
image 

Setting up your View to Create the Notification

Inside your view where you want to display this popup you will need to create and use the Popup control.  Using this is pretty easy.  Below is the code which can be used to create and display this popup.  Please keep in mind that for this post there is no 10 second timer which closes the popup, but this would be very easy to add in.  What I have done is created a single button which will toggle the state of the button and will show/hide it based on that state.

        private Popup _popup;
        private bool isActive;
        private void button_Click( object sender, RoutedEventArgs e )
        {
            if ( !isActive )
            {
                isActive = true;
                var userControl = new PopupMessageUserControl();

                userControl.Loaded += new RoutedEventHandler( _userControl_Loaded );
                userControl.Unloaded += new RoutedEventHandler( _userControl_Unloaded );
                
                _popup = new Popup();
                _popup.Child = userControl;
                _popup.IsOpen = true;
            }
            else
            {
                if ( _popup != null )
                {
                    var popupMessageUserControl = _popup.Child as PopupMessageUserControl;
                    popupMessageUserControl.OnLeave();

                    popupMessageUserControl.Loaded -= new RoutedEventHandler( _userControl_Loaded );
                    popupMessageUserControl.Unloaded -= new RoutedEventHandler( _userControl_Unloaded );

                    isActive = false;

                }
            }
        }

 

The final running product will look something live below.  Again, the styling of the usercontrol (called PopupMessageUserControl) in my sample is 100% up to you and your needs, this was simply a POC to show how it could be done.

image

 

Till next time,


Posted 08-27-2010 5:02 AM by Derik Whittaker

[Advertisement]

Comments

Alberto Silva wrote Windows Phone 7–Experiência para programadores, XXXV
on 08-29-2010 3:18 PM

Depois de uns dias fora com a família, o volume de links para artigos relacionados com o desenvolvimento

Jeff wrote re: Creating a Toast Like Notification Popup on WP7
on 09-03-2010 1:30 PM

I'm with Alberto on this one Derik.

Oleksandr Krakovetskiy blog wrote Дайджест технических материалов #5 (Windows Phone 7)
on 10-27-2010 6:54 AM

Tools, Books, Guides Windows Phone 7 Developer Tools RTM (online installer) , ISO UI Design and Interaction

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)