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"

clock1.gif

clock2.gif

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 x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

 <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>

 <TextBlock x:Name="PageTitle" Text="LockingSystem" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

</StackPanel>

 

<!--ContentPanel - place additional content here-->

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

 <Image Height="150" HorizontalAlignment="Left" Margin="116,123,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="/PhoneApp8;component/Images/folder-png-i6.png" MouseLeftButtonDown="mouse_Click" />

 <wordBox Height="72" HorizontalAlignment="Left" Margin="170,365,0,0" Name="wordBox1" VerticalAlignment="Top" Width="280" Visibility="Collapsed" />

 <TextBlock Height="49" HorizontalAlignment="Left" Margin="12,376,0,0" Name="textBlock1" Text="ward" VerticalAlignment="Top" Width="140" FontSize="32" Visibility="Collapsed" />

 <Button Content="OK" Height="72" HorizontalAlignment="Left" Margin="173,495,0,0" Name="button1" VerticalAlignment="Top" Width="110" Click="Button_Click" Visibility="Collapsed" />

</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">

 

    <!--LayoutRoot is the root grid where all page content is placed-->

    <Grid x:Name="LayoutRoot" Background="Transparent">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

 

        <!--TitlePanel contains the name of the application and page title-->

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>

            <TextBlock x:Name="PageTitle" Text="LockingSystem" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

        </StackPanel>

 

        <!--ContentPanel - place additional content here-->

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <Image Height="150" HorizontalAlignment="Left" Margin="116,123,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="/PhoneApp8;component/Images/folder-png-i6.png"
               MouseLeftButtonDown="mouse_Click" /> 

            <wordBox Height="72" HorizontalAlignment="Left" Margin="170,365,0,0" Name="wordBox1" VerticalAlignment="Top" Width="280" Visibility="Collapsed" />

            <TextBlock Height="49" HorizontalAlignment="Left" Margin="12,376,0,0" Name="textBlock1" Text="ward" VerticalAlignment="Top" Width="140" FontSize="32" Visibility="Collapsed" />

            <Button Content="OK" Height="72" HorizontalAlignment="Left" Margin="173,495,0,0" Name="button1" VerticalAlignment="Top" Width="110" Click="Button_Click" Visibility="Collapsed" />

        </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">

 

    <!--LayoutRoot is the root grid where all page content is placed-->

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

        <controls:Pivot.Background>

            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                <GradientStop Color="White" Offset="0.192" />

                <GradientStop Color="Black" Offset="0.92400000244379044" />

            </LinearGradientBrush>

        </controls:Pivot.Background>

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

            <Image Source="/PhoneApp8;component/Images/Chrysanthemum.jpg"></Image>

        </controls:PivotItem>

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

            <Image Source="/PhoneApp8;component/Images/dreamhome.jpg"></Image>

        </controls:PivotItem>

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

            <Image Source="/PhoneApp8;component/Images/image2.jpg"></Image>

        </controls:PivotItem>

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

            <Image Source="/PhoneApp8;component/Images/images1.jpg"></Image>

        </controls:PivotItem>

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

            <Image Source="/PhoneApp8;component/Images/Lighthouse1.jpg"></Image>

        </controls:PivotItem>

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

            <Image Source="/PhoneApp8;component/Images/Tulips.jpg"></Image>

        </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

img1.gif

  • Click on the image gallery folder to open the gallery:

img2.gif

  •  Now enter the word:

img3.gif

  • Click on the OK button:

img4.gif

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

img5.gif

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

Up Next
    Ebook Download
    View all
    Learn
    View all