Create Login And Registration Form in Windows Phone 7

In this article we are going to understand the creation of login and registration pages in Windows Phone 7. The login page is the one important aspect of each and every application. For the new user, you need to register yourself at very first.


Introduction

Hi guys. In this article we are going to understand the creation of login and registration pages in Windows Phone 7. The login page is the one important aspect of each and every application. A new user needs to register first.

Here are the steps to follow:

Step 1: Open your Visual Studio - select new - project - select Silverlight Windows Phone - select Windows Phone Application.

vs new.jpg

 

vs aa.jpg

Step 2 : Designing Part. CreateTake two textboxes, a textblock and a button in your form, so your phone looks like:

homepage.jpg


Design code for above form or MainPage.xaml

<phone:PhoneApplicationPage
    x:Class="signin_App.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">
    <!--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="PageTitle" Text="HOME PAGE" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontSize="56" FontFamily="Comic Sans MS" />
        </StackPanel>
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.Background>
                <ImageBrush />
            </Grid.Background>
            <TextBox Height="76" HorizontalAlignment="Left" Margin="28,111,0,0" Name="textBox1" Text="" VerticalAlignment="Top" Width="422" />
            <TextBox Height="72" HorizontalAlignment="Left" Margin="28,254,0,0" Name="textBox2" Text="" VerticalAlignment="Top" Width="422" />
            <Button Content="Sign in " Height="72" HorizontalAlignment="Left" Margin="251,361,0,0" Name="button1" VerticalAlignment="Top" Width="180" Click="button1_Click" />
            <Button Content="Create New Account !" Height="72" HorizontalAlignment="Left" Margin="33,489,0,0" Name="button2" VerticalAlignment="Top" Width="398" Click="button2_Click" />
            <TextBlock Height="30" HorizontalAlignment="Left" Margin="46,75,0,0" Name="textBlock1" Text="User Name" VerticalAlignment="Top" Foreground="White" FontWeight="Normal" FontFamily="Verdana" FontSize="24" />
            <TextBlock Height="30" HorizontalAlignment="Left" Margin="46,0,0,396" Name="textBlock2" Text="Password" VerticalAlignment="Bottom" Foreground="White" FontWeight="Normal" FontFamily="Verdana" FontSize="24" />
        </Grid>
    </Grid>
</
phone:PhoneApplicationPage>

Coding for the Home page or MainPage.xaml.cs

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.Xml.Serialization;
using System.IO;
namespace signin_App
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }
        private void button1_Click(object sender, RoutedEventArgs e)
        {
        }
        private void button2_Click(object sender, RoutedEventArgs e)
        {
            NavigationService.Navigate(new Uri("/registration.xaml", UriKind.Relative));
        }
    }
}


Step 3 :
For new account creation just click the create New account button then you get a registration form.

regis.jpg


Design code for above form or registration.xaml

<!--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="PageTitle" Text="Registration form" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontSize="40" FontFamily="Comic Sans MS" Foreground="#FFFFFFB2" />
        </StackPanel>
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <TextBox Height="72" HorizontalAlignment="Left" Margin="51,60,0,0" Name="textBox1" Text="TextBox" VerticalAlignment="Top" Width="374" Background="#BFF8F8F8" />
            <TextBox Height="72" HorizontalAlignment="Left" Margin="51,199,0,0" Name="textBox2" Text="TextBox" VerticalAlignment="Top" Width="374" />
            <TextBox Height="72" HorizontalAlignment="Left" Margin="51,330,0,0" Name="textBox3" Text="TextBox" VerticalAlignment="Top" Width="374" />
            <TextBox Height="72" HorizontalAlignment="Left" Margin="51,442,0,0" Name="textBox4" Text="TextBox" VerticalAlignment="Top" Width="374" />
            <Button Content="Save it !" Height="83" HorizontalAlignment="Left" Margin="9,550,0,0" Name="button1" VerticalAlignment="Top" Width="229" Click="button1_Click" />
            <TextBlock Height="37" HorizontalAlignment="Left" Margin="69,31,0,0" Name="textBlock1" Text="Username" VerticalAlignment="Top" />
            <TextBlock Height="30" HorizontalAlignment="Left" Margin="69,163,0,0" Name="textBlock2" Text="Password" VerticalAlignment="Top" />
            <TextBlock Height="30" HorizontalAlignment="Left" Margin="69,294,0,0" Name="textBlock3" Text="e-mailaddess" VerticalAlignment="Top" />
            <TextBlock Height="30" HorizontalAlignment="Left" Margin="69,420,0,0" Name="textBlock4" Text="Mobile " VerticalAlignment="Top" />
          </Grid>
    </Grid>

Coding for the registration.cs file  

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.Xml;
using System.IO.IsolatedStorage;
using System.Xml.Serialization;
using System.IO;
namespace signin_App
{
    public partial class registration : PhoneApplicationPage {
        public registration()
        {
            InitializeComponent();
            textBox1.Text = "";
            textBox2.Text = "";
            textBox3.Text = "";
            textBox4.Text = "";      
        }
        public class UserInfo
        {
            string uname;
            string pwd;
            string email;
            int mno;
            public string Username
            {
                get { return uname; }
                set { uname = value; }
            }
            public string Password
            {
                get { return pwd; }
                set { pwd = value; }
            }
            public string EmailAdd
            {
                get { return email; }
                set { email = value; }
            }
 
            public int Mobile
            {
                get { return mno; }
                set { mno = value; }
            }
        }
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            if (textBox1.Text == "") { MessageBox.Show("Plz. enter the username"); }
            if (textBox2.Text == "") { MessageBox.Show("Plz. enter the Password"); }
            if (textBox3.Text == "") { MessageBox.Show("Plz. enter the e-mail add"); }
            if (textBox4.Text == "") { MessageBox.Show("Plz. enter the mobile number"); }
            // Write to the Isolated Storage
            XmlWriterSettings xmlWriterSettings = new XmlWriterSettings();
            xmlWriterSettings.Indent = true;
            using (IsolatedStorageFile myIsolatedStorage = IsolatedStorageFile.GetUserStoreForApplication())
            {
                using (IsolatedStorageFileStream stream = myIsolatedStorage.OpenFile("People.xml", FileMode.Create))
                {
                    XmlSerializer serializer = new XmlSerializer(typeof(List<UserInfo>));
                    using (XmlWriter xmlWriter = XmlWriter.Create(stream, xmlWriterSettings))
                    {
                        serializer.Serialize(xmlWriter, GeneratePersonData());
                        NavigationService.Navigate(new Uri("/congate.xaml", UriKind.Relative));
                    }
                }
            }
        }
        private List<UserInfo> GeneratePersonData()
        {
            List<UserInfo> data = new List<UserInfo>();
            UserInfo ui = new UserInfo();
            ui.Username = textBox1.Text;
            ui.Password = textBox2.Text;
            ui.EmailAdd = textBox3.Text;
            ui.Mobile = Convert.ToInt32(textBox4.Text);
            data.Add(ui);
            return data;
        }
    }
}

Step 4 : Give the inputs to the entries and if you leave some entries unfilled the validation part appears. Suppose you didn't fill in the username and mobile number; when you try to save it then the application shows the messages.

vd 1.jpg   

For a missing unfilled mobile number:

vd 2.jpg

For correct entries:

enterthe input.jpg

Step 5 : After successful entries into the
registration.xaml and pressing the save it button you will successfully registered your self.

congrates.jpg

Design code for above form or congate.xaml

<!--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"></StackPanel>
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <HyperlinkButton Content="Sign in " Height="30" HorizontalAlignment="Left" Margin="118,251,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="200" Click="hyperlinkButton1_Click" />
            <TextBlock Height="106" HorizontalAlignment="Left" Margin="9,153,0,0" Name="textBlock1" Text="You have successfully registered !" VerticalAlignment="Top" Width="441" FontFamily="Verdana" FontSize="24" TextWrapping="Wrap"
FontStretch="Normal" />
            <TextBlock Height="84" HorizontalAlignment="Left" Margin="9,35,0,0" Name="textBlock2" Text="Congratulation !!!!       " VerticalAlignment="Top" Width="379" FontSize="40" />
        </Grid>
    </Grid>

Coding for  congate.xaml.cs file  

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;
namespace signin_App
{
    public partial class congate : PhoneApplicationPage
    {
        public congate()
        {
            InitializeComponent();
        }
        private void hyperlinkButton1_Click(object sender, RoutedEventArgs e)
        {
            NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
        }
    }
}

When you click the "Sign in" hyperlink of
congate.xaml, you will be returned to the Home page.

homepage.jpg

Thanks !