WP7 ToastPrompt in depth

published on: 2/24/2011 | Views: N/A | Tags: C4FToolkit

by WindowsPhoneGeek

In this article I am going to talk about the ToastPrompt control from the Coding4fun Toolkit in details. I will explain everything about the main features, available public API, and will  give lots of examples in different scenarios.

Basically ToastPrompt is an UI component that derives from the toolkit`s abstract PopUp<string, PopUpResult> class . As its name says it is a kind of extended popup  that performs toast like notification: when a background process (such as an async download) has completed notifies the user.

Toast Notification is shown when the application is not running. When using ToastPrompt  it will appear for a few seconds on the top of the screen and will disappear. When this notification appears, if the user taps on toast message appeared, the application will launch.

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 dialog which displays the message.

NOTE: Be careful not to overuse toast notifications and only pass them when an important event connected to the application happens.

NOTE: In this article I will use the latest Coding4Fun.Phone.Toolkit v1.2 (the assembly is attached to the sample project at the end of the article).

Getting Started

Basic Structure

  

To begin using ToastPrompt first  add a reference to  the Coding4Fun.Phone.Controls.dll assembly.

NOTE: You have to download and rebuild the Coding4Fun Toolkit project in order to generate the assembly.

Generally the ToastPrompt is designed to be used in code. The sample code should looks like:

private void Button_Click(object sender, RoutedEventArgs e)
{
    ToastPrompt toast = new ToastPrompt();
    
    toast.Title = "ToastPrompt";
    toast.Message = "Some message";
    toast.FontSize = 50;
    toast.TextOrientation = System.Windows.Controls.Orientation.Vertical;
    toast.ImageSource = new BitmapImage(new Uri("ApplicationIcon.png", UriKind.RelativeOrAbsolute));
    
    toast.Completed += toast_Completed;
    toast.Show();
}

void toast_Completed(object sender, PopUpEventArgs<string, PopUpResult> e)
{
    //add some code here
}

Key Properties

• MillisecondsUntilHidden

      This is a dependency property of type int. It gets or sets the MillisecondsUntilHidden value of the ToastPrompt control.

• IsTimerEnabled

      This is a dependency property of type bool. It enables/disables the timer of the ToastPrompt control.

• Title

       This is a dependency property of type string. It gets or sets the Title of the ToastPrompt control.

• Message

       This is a dependency property of type string. It gets or sets the Message of the ToastPrompt control.

• ImageSource

       This is a dependency property of type ImageSource. It gets or sets the ImageSource of the ToastPrompt control.

• TextOrientation

       This is a dependency property of type Orientation. It determines the Text orientation of the ToastPrompt control.

• Overlay

      This is a dependency property of type Brush. It gets or sets the overlay of the ToastPrompt control.

• IsOpen

       Determine whether the popup is opened or not.

• HasGesturesDisabled

      This is a dependency property of type bool. It determines whether Gestures are disabled or not disabled.The default value is true.

NOTE: With the current Gesture Service in the Silverlight Toolkit (November 2010 release), if two controls are overlapped and the bottom control has a listener attached, events will still bubble through with no way to cancel it without putting on a listener.  In a control that is called PopUp, it is self defeating to have this bubble through effect happening.  If the SL toolkit corrects the behavior then the Coding4fun team will remove this as it would no longer be needed.  This would also remove the dependency on the Silverlight Toolkit.

Key Methods and Events

• Show()

       This method shows the ToastPrompt control.

• Completed event

       This event Occurs when the popup is closed.

Examples

1.Simple usage

In this example I will demonstrate how to use the ToastPrompt in the easiest way.

private void Button_Click(object sender, RoutedEventArgs e)
{
    var toast = new ToastPrompt
    {
        Title = "Simple usage",
        Message = "Message",
        ImageSource = new BitmapImage(new Uri("..\\ApplicationIcon.png", UriKind.RelativeOrAbsolute))
    };
    toast.Show();
}

2. Custom colors

In this example I will  add some colors in order  to customize the UI.

private void btnCustomizedToastPrompt_Click(object sender, RoutedEventArgs e)
{
     SolidColorBrush gray = new SolidColorBrush(Colors.LightGray);
     SolidColorBrush orange = new SolidColorBrush(Color.FromArgb(200, 255, 117, 24));
     
    ToastPrompt toast = new ToastPrompt
    {
        Background = gray,
        Foreground = orange,
        Title = "Customized",
        Message = "Custom colors",
        FontSize = 30,
        TextOrientation = System.Windows.Controls.Orientation.Vertical,
        ImageSource =
            new BitmapImage(new Uri("ApplicationIcon.png", UriKind.RelativeOrAbsolute))
    };

    toast.Completed += toast_Completed;
    toast.Show();
}

3. Vertical orientation

In this example I will demonstrate how to use the ToastPrompt  basic properties and how to have a Vertical orientation of the text.

private void btnVerticalText_Click(object sender, RoutedEventArgs e)
{
    ToastPrompt toast = new ToastPrompt();

    toast.Title = "Vertical";
    toast.Message = "Vertical text message";
    toast.FontSize = 40;
    toast.TextOrientation = System.Windows.Controls.Orientation.Vertical;
    toast.ImageSource = new BitmapImage(new Uri("ApplicationIcon.png", UriKind.RelativeOrAbsolute));

    toast.Show();
}

4. Horizontal Orientation

In this example I will demonstrate how to use the ToastPrompt  basic properties and how to have a Horizontal orientation of the text.

private void btnHorizontalText_Click(object sender, RoutedEventArgs e)
{
    ToastPrompt toast = new ToastPrompt();
    toast.FontSize = 30;
    toast.Title = "Horizontal";
    toast.Message = "Horizontal text";
    toast.TextOrientation = System.Windows.Controls.Orientation.Horizontal;
    toast.ImageSource = new BitmapImage(new Uri("ApplicationIcon.png", UriKind.RelativeOrAbsolute));

    toast.Show();
}

That was all about the ToastPrompt control from the Coding4fun Toolkit in depth.  You can find the full source code here:

I hope that the article was helpful.

Here are some helpful resources related to Toast Notification implementation:

• Windows Phone 7 - Step by Step how to create WP7 Toast Notification using Windows Azure Cloud Service with WCF Service Web Role
• Toast - Microsoft Push Noification In Windows Phone 7 (WP7)
• Architecting WP7 - Part 8 of 10: Toast Push Notifications

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'WP7 ToastPrompt in depth'

Title Your Name

Comment