Windows Phone 7: Login UI Sample Code and Coding4Fun

image_4

The Coding4Fun library (http://coding4fun.codeplex.com) for Windows Phone 7 includes many super useful classes that will save you time when writing Windows Phone 7 applications. My favorite is their implementation of very the professional looking and easily extensible user prompts.

While a good assortment of prompts, utilities and other controls have been implemented in coding4fun, what is missing is a login prompt. In this post I’ll review how I’ve used Coding4Fun to create a login prompt.

Can’t I just use a login page?

Many developers have struggled with the Microsoft enforced application navigation flow that mandates:
1) Pressing the Back button must return the application to the previous page or return to any previous page within the back stack.
2) Pressing the Back button from the first screen of an application must close the application.

These rules are difficult to reconcile with an application that has a login prompt on the first page. A couple of problems with this:
1) After the user has successfully logged in, and they have navigated away from the login page, it is confusing if pressing BACK returns them to the Login screen. The expectation is that once they have logged in they should not see the login screen again.
2) Even if you structure the program to navigate to the Login page automatically from the main page if the user has not yet logged in, this gets rid of the ‘BACK navigates to the Login screen’ problem, but it violates the first rule above where BACK on the first screen should exit the app.

See Peter Torr’s article, Introducing the concept of “Places”, for a way to think of ‘places’ and ‘transient UI’. In Peter’s article, he recommends one way to handle the login scenario is with the use of a popup. Enter Coding4Fun.

How It Works

The Coding4Fun’s MessagePrompt class, includes a Body property that you can use to add code on the fly. For example:

messagePrompt.Body = new TextBlock { Text = "Hello World!", Foreground = new SolidColorBrush(Colors.Green),

FontSize = 30.0}

I extended this idea to include, a user control ‘LoginUserControl’ which contains the XAML layout and Username and Password members which are databound to the user control.

In the code below I instantiate the LoginUserControl control, add it to the Body member of an instance of MessagePrompt, display the prompt, and process the user results.

private void Button_Click(object sender, RoutedEventArgs e)
{
    var luc = new LoginUserControl(); // Customer user control with Login UI

    MessagePrompt messagePrompt = new MessagePrompt(); // Coding4Fun extensible MessagePrompt
    messagePrompt.IsCancelVisible = true; // Show cancel button
            
    messagePrompt.Body = luc; // Add user control as body of MessagePrompt
    messagePrompt.Completed += (str, res)=> // Handler for MessagePrompt user action
    {
 
       if (res.PopUpResult == PopUpResult.Cancelled)
        {
            luc.Username = luc.Password = "";
            MessageBox.Show("Login Cancelled");
        }
        else
        {
            MessageBox.Show(string.Format("Username: {0}, Password: {1}", luc.Username, luc.Password));
        }
    };
            
    messagePrompt.Show(); 
}

You can download the sample code here.

Mike

3 comments

Leave a Reply

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