Improving Coding4Fun’s AboutPrompt 1

Windows Phone 7

AboutPromptWhile creating the Windows Phone7 version of my Master Thesis project, I needed to show some custom dialogs. Since Coding4Fun has some very nice dialogs, I explored the way that they might be customized to fit my needs. I needed a quick solution to a pressing problem.

I got in touch with this controls through WinPhoneGeek’s article Coding4Fun Toolkit for WP7 Overview and Getting Started, where he presented from the eagle’s eye the controls in the package. I was interested more in AboutPrompt control, but unfortunately he didn’t had it presented in the detail.

After opening the assembly and navigate to the class, you can see this:

AboutPrompt Class

What is the most interesting is that we can have access to the (String)Title, (Object)Body and  (Object)Footer properties. This opens a lot of possibilities, since what I wanted was to create a custom body in which to show an Error, Warning or Notification.

So let’s dig into some code!

First, create a new Windows Phone 7 application in Visual Studio 2010 (if you are tired and just want to read this article, please do so – the full code is attached at the end of the article). You can create any flavor of WP7 application, as my code will be as unobtrusive as possible.

Add a button to your MainPage.xaml in new Windows Phone 7 applicationThen, download and add references to the Coding4Fun assemblies. You can read how to do this in the WinPhoneGeek’s article. Next add a button on the MainPage.xaml (or any desired xaml page) and then hook it to the code.

Next, in the button click we need to create the message view, hook its Completed action and show it. The Completed event is very important – will give you the possibility of interacting with the user, recover from the error by restarting the erroneous action or just navigate through your app to a e-mail submission form, allowing user to describe the issue encountered while using your app – very important, while you want your WP7 application to get only high reviews and this can be accomplished only keeping the users happy.

Since the customization is quite simple, I took the pattern of the desktop messages, displaying only the essential:

  • Title of the notification,
  • a icon describing the gravity of the notification,
  • a succinct description of the notification
  • more detailed description

 

The code to do this is the following (double click to select all code):

private void button1_Click ( object sender, RoutedEventArgs e ) {
    ModalNotification( "My Fancy Error", "Error while coding", "Silence! I will debug you!", Notification.Warning );
}

private void button1_Click ( object sender, RoutedEventArgs e ) {    ModalNotification( "My Fancy Error", "Error while coding", "Silence! I will debug you!", Notification.Warning );}public void ModalNotification ( string title, string semiTitle, String message, Notification notification ) {
    var about = new AboutPrompt( );
    about.Completed += new System.EventHandler>( about_Completed );
    about.Title = title;
    var panel = new WrapPanel {
        HorizontalAlignment = HorizontalAlignment.Stretch,
        VerticalAlignment = VerticalAlignment.Stretch
    };

    Uri myUri = notification == Notification.Error ?
        new Uri( "images/error.png", UriKind.RelativeOrAbsolute )
        : new Uri( "images/warn.png", UriKind.RelativeOrAbsolute );
    ImageSource imgSource = new BitmapImage( myUri );
    var imgVisual = new Image { Source = imgSource, Height = 64, Width = 64 };

    var tbSemiTitle = new TextBlock {
        Text = semiTitle,
        Margin = new Thickness { Top = 8, Left = 18 },
        FontSize = 30
    };

    var tbMessage = new TextBlock {
        HorizontalAlignment = HorizontalAlignment.Stretch,
        VerticalAlignment = VerticalAlignment.Stretch,
        TextWrapping = TextWrapping.Wrap,
        Margin = new Thickness { Top = 20 },
        Text = message
    };

    panel.Children.Add( imgVisual );
    panel.Children.Add( tbSemiTitle );
    panel.Children.Add( tbMessage );
    about.Body = panel;

    about.Show( );
}

void about_Completed ( object sender, PopUpEventArgs e ) {
    // Implement here the logic to handle the return from Modal AboutPrompt
    throw new System.NotImplementedException( );
}

public enum Notification {
    Warning,
    Error
} ;

My fancy error shown on Windows Phone 7 Now let’s see what code does: First, it instantiates a new instance of AboutPrompt and hooks its Completed event to a proper handler. Here you can write your logic to handle the user confirmation.

Because  I wanted a clean, nice look which would be also familiar, I choose the layout of the Windows MessageBox. As for the main title it was pretty easy, since I had access to the about.Title string property. But with the rest it got a little complicated, since about.Body doesn’t specify which kind of control desires. By looking into the sources of the project, I noticed that it needs a Container – so I provided a Wrap Panel, in which I added a Image and two TextBlocks. The visual can be seen in the left:

The code can be freely downloaded from here.

Leave a comment

Your email address will not be published. Required fields are marked *