Login Template Creation on Windows Phone with Navigation Service

Today, in this article let's deal with mostly used login template which is seen in most of the projects, So, today let's create this template and perform the operations on Windows Phone and we will navigate from one page to other via navigation service.

So, let's get it started off now.

The Complete Code of MainPage.xaml looks like this:

<phone:PhoneApplicationPage
x:Class="NavigationApplication.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">

<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="Vijay's Navigation Application" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Windows 7 Phone" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button Content="Click Here For Login Page" Height="72" HorizontalAlignment="Left" Margin="53,184,0,0" Name="Button1" VerticalAlignment="Top" Width="364" Click="Button1_Click" />
</Grid>

</Grid>

</phone:PhoneApplicationPage>

The Complete Code of MainPage.xaml.cs looks like this:

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 NavigationApplication
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}

private void Button1_Click(object sender, RoutedEventArgs e)
{
NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.RelativeOrAbsolute));
}

}
}

The Complete Code of Page1.xaml looks like this:

<phone:PhoneApplicationPage
x:Class="NavigationApplication.Page1"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
shell:SystemTray.IsVisible="True" >

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Height="30" FontFamily="Verdana" FontSize="25" HorizontalAlignment="Left" Margin="31,45,0,0" Name="textBlock1" VerticalAlignment="Top" Text="UserName" />
<TextBox Height="78" HorizontalAlignment="Left" Margin="225,21,0,0" Name="textBox1" Text="" VerticalAlignment="Top" Width="225" />
<TextBlock Height="30" HorizontalAlignment="Left" FontFamily="Verdana" FontSize="25" Margin="40,146,0,0" Name="textBlock2" Text="Password" VerticalAlignment="Top" />
<Button Content="Sign In" Height="72" HorizontalAlignment="Left" Margin="271,331,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="221,117,0,0" Name="textBox2" VerticalAlignment="Top" Width="229" />
<HyperlinkButton Content="Dont've Account? Register Here " Height="30" HorizontalAlignment="Left" Margin="93,182,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="357" Click="hyperlinkButton1_Click" />
<CheckBox Content="Remember Me" Height="72" HorizontalAlignment="Left" Margin="221,231,0,0" Name="checkBox1" VerticalAlignment="Top" Width="229" FontFamily="Verdana" FontSize="22"/>

</Grid>

</phone:PhoneApplicationPage>

The Complete Code of Page1.xaml.cs looks like this:

namespace NavigationApplication
{
public partial class Page1 : PhoneApplicationPage
{
public Page1()
{
InitializeComponent();
}

private void hyperlinkButton1_Click(object sender, RoutedEventArgs e)
{
NavigationService.Navigate(new Uri("/Page2.xaml", UriKind.Relative));
}

private void button1_Click(object sender, RoutedEventArgs e)
{
NavigationService.Navigate(new Uri("/Page3.xaml", UriKind.Relative));
}

}
}

The Complete Code of Page2.xaml looks like this:

<phone:PhoneApplicationPage
x:Class="NavigationApplication.Page2"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
shell:SystemTray.IsVisible="True">

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Height="30" HorizontalAlignment="Left" Margin="60,30,0,0" Name="textBlock1" FontFamily="Verdana" FontSize="22" Text="UserName" VerticalAlignment="Top" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="71,111,0,0" Name="textBlock2" FontFamily="Verdana" FontSize="22" Text="Password" VerticalAlignment="Top" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="12,185,0,0" Name="textBlock3" FontFamily="Verdana" FontSize="22" Text="Confirm Password" VerticalAlignment="Top" Width="235" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="84,263,0,0" Name="textBlock4" Text="Email" FontFamily="Verdana" FontSize="22" VerticalAlignment="Top" />
<TextBlock HorizontalAlignment="Left" Margin="35,334,0,243" Name="textBlock5" Text="Alternate Email" FontFamily="Verdana" FontSize="22" />
<Button Content="Sign Up" Height="72" HorizontalAlignment="Left" Margin="228,409,0,0" Name="button1" VerticalAlignment="Top" Width="168" Click="button1_Click" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="228,6,0,0" Name="textBox1" VerticalAlignment="Top" Width="168" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="228,84,0,0" Name="textBox2" VerticalAlignment="Top" Width="168" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="228,162,0,0" Name="textBox3" VerticalAlignment="Top" Width="168" />
<TextBox Height="72" HorizontalAlignment="Left" Margin="228,240,0,0" Name="textBox4" VerticalAlignment="Top" Width="168" />

</Grid>

</phone:PhoneApplicationPage>

The Complete Code of Page2.xaml.cs looks like this:

namespace NavigationApplication
{
public partial class Page2 : PhoneApplicationPage
{
public Page2()
{
InitializeComponent();
}

private void button1_Click(object sender, RoutedEventArgs e)
{
NavigationService.Navigate(new Uri("/Page3.xaml", UriKind.Relative));
}

}
}

The Complete Code of Page3.xaml looks like this:

<phone:PhoneApplicationPage
x:Class="NavigationApplication.Page3"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
shell:SystemTray.IsVisible="True" Loaded="PhoneApplicationPage_Loaded">

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Loaded="ContentPanel_Loaded">
<TextBlock FontFamily="Verdana" FontSize="22" Visibility="Collapsed" Margin="20,170,20,367" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="textblock6" />
<TextBox Margin="20,483,3,52" FontFamily="Verdana" FontSize="22" Visibility="Collapsed" x:Name="textblock7"/>
<HyperlinkButton Content="Log Out" Height="30" FontFamily="Verdana" FontSize="22" HorizontalAlignment="Left" Margin="346,0,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="110" Click="hyperlinkButton1_Click" />
</Grid>
</Grid>

</phone:PhoneApplicationPage>

The Complete Code of Page3.xaml.cs looks like this:

namespace NavigationApplication
{
public partial class Page3 : PhoneApplicationPage
{
public Page3()
{
InitializeComponent();
}

private void ContentPanel_Loaded(object sender, RoutedEventArgs e)
{

textblock6.Text = "Whoomp!!!....You've Registered Now.";
textblock6.Visibility = Visibility.Visible;
}

private void textblock6_Loaded(object sender, RoutedEventArgs e)
{

}

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
textblock6.Text = "Whoomp!!!....You've Logged In";
textblock6.Visibility = Visibility.Visible;

}

private void hyperlinkButton1_Click(object sender, RoutedEventArgs e)
{
NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative));

}

}
}

The Output of the Application looks like this: