Login application for windows phone



Now we have configured windows phone SDK in Visual studio (if not go here). Lets go ahead and create a simple login application in windows phone.
Its quite simple enough to create application in Visual studio as it comes with an excellent UI. Design mode in visual studio facilitates programmer for drag and drop options making programming less difficult.
This login application accepts username and password and displays information about the Sign In process. I have created one page MainPage.xaml, this will contain all the UI controls required and MainPage.xaml.cs will contain the functionalities and events of these controls.  Let me explain the controls and functionalities of these.


Controls used



  • Textblock tblMsg is used to display message after validating the username and password credentials in the code behind page MainPage.xaml.cs
  • tbluname, tblpword are two textblocks to display Username and Password text.
  • tbxUname is the textbox that accepts username corresponding to textblock tbluname
  • tbxpwd is the PasswordBox corresponding to tblpword. This control encrypts the text typed as this is used to display password.
  • signin is a textbox with a event Click="signin_Click" . This event is triggered when the button is clicked, code for this event is written in the code behind page MainPage.xaml.cs
Just drag and drop these controls from the toolbox one by one and place it in the UI as you wish.

 private void signin_Click(object sender, RoutedEventArgs e)
        {
            if(tbxUname.Text.Equals("admin"))
            {
                if (tbxpwd.Password.Equals("admin"))
                {
                    tblMsg.Text = "Login Successful..";                   
                }
                else
                {
                    tblMsg.Text = "Incorrect Credentials";
                }
            }
            else
            {
                tblMsg.Text="Incorrect Credentials";
            }
        }


Here the password is validated and corresponding message is displayed
  • In the similar way Cancel button has a method Click="cancel_Click" which resets the texbox and message info.
 private void cancel_Click(object sender, RoutedEventArgs e)
        {
            tblMsg.Text = "";
            tbxUname.Text = "";
            tbxpwd.Password = "";
        }

This is all about the major controls and functionalities in the application.
  • The pagetitle - "SignIn" at the top has a background in it. Since the textblock in silverlight does not has a background property, I have place the textblock inside <Border></Border> tag and colored this background.
<Border Background="Gray">
<TextBlock x:Name="PageTitle"  Foreground="#FF6600" Text="SignIn" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" />
</Border>

That's all about the code used here, and finally we have created login application for windows phone.

Don't get panic with the code size below, just drag and drop the controls visual studio will take care of the rest.

Share your thoughts and comments.....

Code

MainPage.xaml

<phone:PhoneApplicationPage 
    x:Class="Login_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="ApplicationTitle" Text="Login Application" Style="{StaticResource PhoneTextNormalStyle}"/>
            <Border Background="Gray">
                <TextBlock x:Name="PageTitle"  Foreground="#FF6600" Text="SignIn" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" />
            </Border>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <TextBlock Height="30" HorizontalAlignment="Left" FontSize="24" Margin="38,143,0,0" Name="tbluname" Text="Username" VerticalAlignment="Top" Width="111" />
            <TextBlock Height="46" HorizontalAlignment="Left" FontSize="24" Margin="38,222,0,0" Name="tblpword" Text="Password" VerticalAlignment="Top" Width="111"  />
            <Button Content="SignIn"  Background="Gray" Foreground="#FF6600" HorizontalAlignment="Left" Margin="60,274,0,249" Name="signin" Width="144" BorderBrush="Gray" Click="signin_Click" />
            <Button Content="Cancel" Background="Gray" Height="82" Foreground="#FF6600" HorizontalAlignment="Left" Margin="210,274,0,0" Name="cancel" VerticalAlignment="Top" Width="146" BorderBrush="Gray" Click="cancel_Click" />
            <Grid Height="100" HorizontalAlignment="Left" Margin="182,168,0,0" Name="grid1" VerticalAlignment="Top" Width="200">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="38*" />
                    <ColumnDefinition Width="100*" />
                    <ColumnDefinition Width="62*" />
                </Grid.ColumnDefinitions>
                <PasswordBox Height="72" HorizontalAlignment="Left" Margin="-16,37,0,0" Name="tbxpwd" VerticalAlignment="Top" Width="216" Grid.ColumnSpan="3" />
            </Grid>
            <TextBox Height="72" HorizontalAlignment="Left" Margin="164,126,0,0" Name="tbxUname" Text="" VerticalAlignment="Top" Width="218" />
            <TextBlock HorizontalAlignment="Left" FontSize="25" Margin="53,48,0,495" Name="tblMsg"  Foreground="Red" Width="318" />
        </Grid>
        <TextBox Grid.Row="1" Height="72" HorizontalAlignment="Left" Margin="485,393,0,0" Name="textBox1" Text="TextBox" VerticalAlignment="Top" Width="460" />
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

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;
namespace Login_app
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
            tblMsg.Text = "";
        }       
        private void signin_Click(object sender, RoutedEventArgs e)
        {
            if(tbxUname.Text.Equals("admin"))
            {
                if (tbxpwd.Password.Equals("admin"))
                {
                    tblMsg.Text = "Login Successful..";                   
                }
                else
                {
                    tblMsg.Text = "Incorrect Credentials";
                }
            }
            else
            {
                tblMsg.Text="Incorrect Credentials";
            }
        }
        private void cancel_Click(object sender, RoutedEventArgs e)
        {
            tblMsg.Text = "";
            tbxUname.Text = "";
            tbxpwd.Password = "";
        }
    }
}




Reactions:

0 comments :

Post a Comment