Creating an app lock for Windows Phone 8 with numeric password

Windows Phone still doesn’t allow its developers to integrate a universal app lock with third party apps. Still you could let the users put a lock on your app and prevent unrestricted access. This is a feature which some messaging apps should offer because friends and colleagues often breach the privacy. Their intended fun is often very annoying to the actual user of the app. So you as an app developer could let your users put a lock on his app. In this tutorial I will show how it could be done. We have three primary goals.

  • Let the user choose to have an app lock or not to have it
  • If he chooses to have an app lock then let him set the pin. We should also handle the situation where a pin is already set and the user wants to change it
  • When the app is launched it should check for a pin and if the app is locked then the user should be prompted for a password otherwise proceed normally

Here is how you can integrate it with your app. If you are struck, download the source code before-hand and use it as a reference.

Step 1. Creating a SetLock page to set and change pin

The user should be able to set a 4 digit pin and change it if it is already set. The screenshot shows the design view of the page.

  • I have placed a CheckBox which when checked to true, sets the visibility of textbox to visible.
  • There are 3 textboxes old_pin, pin, confirm_pin. When a user is setting a pin for the first time then only pin and confirm_pin are visible to him and when he tries to change his pin then old_pin is also visible.


Here is the XAML code to get a similar design for your page.


Step 2. Action for applock_Checked event handler on changing check status of check box


The code is self-explanatory.

  • It checks the status of check box
  • If it is checked to true then pin and confirm_pin is set to visible. If a pin was already set then old_pin is also set to visible
  • If it is checked to false then the textboxes are collapsed and the isolated storage settings is updated to reflect the change

Step 3. Set the key up event handler for the textbox

This is required to ensure that the user doesn’t set a pin of more than 4 digits. This event handler handles this situation and is used for all the 3 textboxes.
Step 4. Save pin event handler to set the pin This event handler saves the pin in isolated storage settings.

    • Checks if the app was already locked with a pin. If yes then it matches the old pin with the pin entered as old_pin. If they match a function is called to set the new pin

 

    • If the app wasn’t locked already then simply setpin() function is called

 

    • Setpin() function saves the pin in the isolated storage settings

 

Step 5. Handle the layout root loaded event to set the status of check box and textbox visibility When the page is loaded this event handler checks whether the app is locked or not and shows the appropriate options to the user
Step 6. Setting variables to store password and islocked status when the app launches
When the app is launched, set islocked and password from isolated storage settings.
Step 7. Designing the page to enter the pin when the app is launched The page contains a textbox where the user will enter his pin. I have edited the style template of the textbox to give it a better look and fill. We haven’t used a password box as it doesn’t support Numeric input scope. It would not look good if the user is not presented a numeric keyboard upfront. So we use a textbox with numeric input scope and use a key_up function to alter the displayed characters of the textbox.    

    • The layout root event handler checks whether the app is pin locked. If it is then it sets the password box to focus otherwise navigates to the MainPage of the app.
  • The key_up event handler of the textbox handles the following
      • It saves the input pin to a variable

     

  • It gets the length of the input string and displays as many password characters in the textbox instead of the entered pin
  • If the length equals 4 then it automatically checks the entered string against the pin and provides or denies access

 

 


Step 8. Finally edit WMAppManifest.xml to set the default page as Lock.xaml when the app launches.

Set the navigation page as Lock.xaml so that it is the first page that opens when the app is launched.


 

Here is how the app looks when it runs. The lock screen and the set lock screen are shown below.

Download full project Lock.zip