Locking System in Windows Phone 7

Introduction

In this article we will implement a locking system for Windows Phone 7 applications. To implement this application we will use the isolated storage system of Windows Phone to store the word of the locking application, so we will use a text file to write and retrieve the word. Here we will use an image gallery locked by a user word, so open the image gallery folder; first the user enters his word; if the word is valid then the user is navigated to the image gallery page otherwise the user is not able to open the image gallery. So on MainPage.xaml we will take an image, a word box and a button control; on the click event of the button control we will check whether the word is valid or not; if valid then the control of flow es to the gallery page.

To implement an image gallery, we will add a pivot page on our project and take a number of image controls; on it according to our need (number of images as you want to add in the image gallery).

Step 1 : Open Visual Studio.

Select new -> project
Select your preferred language
Select Silverlight for Windows Phone application
Name the project
Now name the project "WindowsPhoneApplication"

Step 2 : In the design page we will use an image control, a word box and a button control to customize the control as shown below.

Code

</StackPanel>

</Grid>

Step 3 : The whole code of the MainPage.xaml page is:

Code

<phone:PhoneApplicationPage

x:Class="PhoneApp8.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

FontFamily="{StaticResource PhoneFontFamilyNormal}"

FontSize="{StaticResource PhoneFontSizeNormal}"

Foreground="{StaticResource PhoneForegroundBrush}"

SupportedOrientations="Portrait" Orientation="Portrait"

shell:SystemTray.IsVisible="True" Loaded="PhoneApplicationPage_Loaded">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</StackPanel>

</Grid>

</Grid>
</phone:PhoneApplicationPage>

Step 4 : Now we will add a pivot page on our project to implement image gallery, the customize code of this page is given below.

Code

<phone:PhoneApplicationPage

x:Class="PhoneApp8.PivotPage1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

FontFamily="{StaticResource PhoneFontFamilyNormal}"

FontSize="{StaticResource PhoneFontSizeNormal}"

Foreground="{StaticResource PhoneForegroundBrush}"

SupportedOrientations="Portrait" Orientation="Portrait"

shell:SystemTray.IsVisible="True">

<controls:Pivot Title="Album" Visibility="Visible">

<controls:Pivot.Background>

</LinearGradientBrush>

</controls:Pivot.Background>

<controls:PivotItem Header=">>Image1 " FontSize="8" Height="Auto" >

</controls:PivotItem>

<controls:PivotItem Header=">>Image2 " FontSize="8">

</controls:PivotItem>

<controls:PivotItem Header=">>Image3 " FontSize="8">

</controls:PivotItem>

<controls:PivotItem Header=">>Image4 " FontSize="8">

</controls:PivotItem>

<controls:PivotItem Header=">>Image5 " FontSize="8">

</controls:PivotItem>

<controls:PivotItem Header=">>Image6 " FontSize="8">

</controls:PivotItem>

</controls:Pivot>

</phone:PhoneApplicationPage>

Step 5 : Now we will go to the code behind file of the MainPage.xaml page to write the code for On click event of button control.

Code

private void Button_Click(object sender, RoutedEventArgs e)

{

// Obtain a virtual store for the application.

IsolatedStorageFile myStore = IsolatedStorageFile.GetUserStoreForApplication();

// Create a new folder and call it "MyFolder".

myStore.CreateDirectory("MyFolder");

// Specify the file path and options.

using (var isoFileStream = new IsolatedStorageFileStream("MyFolder\\myFile.txt", FileMode.OpenOrCreate, FileAccess.Write, myStore))

{

//Write the data

using (var isoFileWriter = new StreamWriter(isoFileStream))

{

isoFileWriter.WriteLine("12345");

}

try

{

// Specify the file path and options.

using (var isoFileStream = new IsolatedStorageFileStream("MyFolder\\myFile.txt", FileMode.Open, myStore))

{

// Read the data.

using (var isoFileReader = new StreamReader(isoFileStream))

{

str1 = isoFileReader.ReadLine();

if (str1 == wordBox1.word)

{

NavigationService.Navigate(new Uri("/PivotPage1.xaml", UriKind.Relative));

}

else

{

wordBox1.Focus();

}

catch

{

// Handle the case when the user attempts to click the Read button first.

textBlock1.Text = "Need to create directory and the file first.";

}

Step 6 : The final source code of the MainPage.xaml.cs file is:

Code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

using System.IO.IsolatedStorage;

using System.IO;

namespace PhoneApp8

{

public partial class MainPage : PhoneApplicationPage

{

String str1;

// Constructor

public MainPage()

{

InitializeComponent();

}

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)

{

}

private void mouse_Click(object sender, MouseButtonEventArgs e)

{

textBlock1.Visibility = System.Windows.Visibility.Visible;

wordBox1.Visibility = System.Windows.Visibility.Visible;

button1.Visibility = System.Windows.Visibility.Visible;

}

private void Button_Click(object sender, RoutedEventArgs e)

{

// Obtain a virtual store for the application.

IsolatedStorageFile myStore = IsolatedStorageFile.GetUserStoreForApplication();

// Create a new folder and call it "MyFolder".

myStore.CreateDirectory("MyFolder");

// Specify the file path and options.

using (var isoFileStream = new IsolatedStorageFileStream("MyFolder\\myFile.txt", FileMode.OpenOrCreate, FileAccess.Write, myStore))

{

//Write the data

using (var isoFileWriter = new StreamWriter(isoFileStream))

{

isoFileWriter.WriteLine("12345");

}

try

{

// Specify the file path and options.

using (var isoFileStream = new IsolatedStorageFileStream("MyFolder\\myFile.txt", FileMode.Open, myStore))

{

// Read the data.

using (var isoFileReader = new StreamReader(isoFileStream))

{

str1 = isoFileReader.ReadLine();

if (str1 == wordBox1.word)

{

NavigationService.Navigate(new Uri("/PivotPage1.xaml", UriKind.Relative));

}

else

{

wordBox1.Focus();

}

catch

{

// Handle the case when the user attempts to click the Read button first.

textBlock1.Text = "Need to create directory and the file first.";

}

Step 7 : Press F5 to run the application.

Output

Click on the image gallery folder to open the gallery:

Now enter the word:

Click on the OK button:

If the word is a valid word then the gallery will be opened
Otherwise the control sets the focus on the word box

Resources

Task System in Windows Phone 7
System Tray ProgressIndicator in Windows Phone 7.5 / Mango phone
Working With Various Phone Tasks in Windows Phone 7
Page Stack in Windows Phone