Xamarin

Signup And Signin Page With Pop-UP In Xamarin.Forms

Introduction

 
Xamarin.Forms is a mobile application framework for building User interfaces(UI) and a cross-platform UI toolkit that allows developers to easily create native user interface layouts that can be shared across Android, iOS, and Windows Phone.
 
Xamarin.Forms new version has been published:
  1. Stable Release: Xamarin.Forms 2.4.0.280
XAML
 
XAML stands for extensible Application Mark up Language. The XAML file describes the interface with all its elements, while the Code Behind handles all the events and has access to manipulate the XAML controls.
 
Tools
 
I am using Windows 10 and Visual Studio 2017 with Xamarin installed in it. You can also develop Xamarin.Forms applications in Visual Studio.
 
C#
 
C# was designed by Anders Hejlsberg, and its development team is currently led by Mads Torgersen .C# has already been used for projects as diverse as dynamic Web sites, development tools, and even compilers. C# is a new language created by Microsoft and submitted to the ECMA for Standardization. The most recent version is C# 7.3. Which was released in 2018 alongside Visual Studio 2017 version 15.7.2
 

Login

 
Our login page has the following components
  • AbsoluteLayout
  • Stack Layout
  • Label
  • Image
  • Entry
  • Button
StackLayout
 
In stacklayout we use different tags to design an app. In stacklayout first we use Margin and Padding etc. The next step is we use the tag of an image and set the image in it. After using the tag of the image we use the tag of Label. In Label we used Text, Text color and Fontsize. Next tag is Entry. In Entry we use placeholder. Last tag is button. In button we use the tag of Login page when we click the tag Login to next page. On the next page we use the tag of Navigation push async it is used to the next page and sign up or Logout.
 
AbsoluteLayout
 
Sometime when we developing an application we face some situations in layouts where we have a design that needs to implement different layouts that are not the ones we normally use for stacklayout etc.
 
Let’s create an absolutelayout .we always need to define absolutelayout Tag, declare all the graphic elements that we need, and then, set the properties that allow us to position these elements on the screen use LayoutBounds(Absolutelayout.layoutbound”X,Y,Width,Height”) and LayoutFlag(All,Height proportional…etc. I will be explaining this below.
 

Creating a Xamarin.Forms Project

 
Follow these steps to create a new application project.
 
Open visual studio. Go to file>New Project>select Cross platform and then select cross platform app(xamarin.forms)
 
Signup And Signin Page With Pop-UP In Xamarin.Forms 
 
Now, set the setting given below.
  • Blank app
  • Forms
  • .Net Standard
And then click ok.
 
Signup And Signin Page With Pop-UP In Xamarin.Forms 
 
Now, your project is created and starts for development.
 
Signup And Signin Page With Pop-UP In Xamarin.Forms 
 
Here, you see 3 projects,
  • Android project.
  • IOS project
  • Window project
Now, open mainpage.xaml and write some code in XAML and design our frontend page.
 
Xaml
  1. <AbsoluteLayout>  
  2.   
  3.     <StackLayout   AbsoluteLayout.LayoutBounds="0.1,0,400,100" AbsoluteLayout.LayoutFlags="XProportional">  
  4.         <Label Text="Hello" TextColor="Black" FontSize="Medium" HorizontalOptions="Start" VerticalOptions="Start" Margin="20,10,0,0"></Label>  
  5.         <Label Text="You can use your email or passward, or you can continue with your social account" TextColor="Black" HorizontalOptions="Start" VerticalOptions="Start" WidthRequest="250" HeightRequest="50" Margin="20,10,0,0" ></Label>  
  6.     </StackLayout>  
  7.     <StackLayout AbsoluteLayout.LayoutBounds="0.5,370,400,130" AbsoluteLayout.LayoutFlags="XProportional" Margin="0,20,0,0">  
  8.         <Button Text="REGISTER" x:Name="rgstr" Clicked="Rgstr_Clicked" TextColor="White" BackgroundColor="OrangeRed" HeightRequest="40" WidthRequest="300" HorizontalOptions="Center"></Button>  
  9.         <Button Text="SIGN IN" x:Name="signin" Clicked="Signin_Clicked" TextColor="OrangeRed" BackgroundColor="AntiqueWhite" HeightRequest="40" WidthRequest="300" HorizontalOptions="Center"></Button>  
  10.         <Label Text="or sign in with" HorizontalOptions="Center"></Label>  
  11.     </StackLayout>  
  12.     <StackLayout  AbsoluteLayout.LayoutBounds="0.5,502,400,100" AbsoluteLayout.LayoutFlags="XProportional" Orientation="Horizontal" HorizontalOptions="Center">  
  13.         <ImageButton Source="facebook.png" x:Name="face" Clicked="Face_Clicked" HeightRequest="50" WidthRequest="50" Aspect="AspectFit" BackgroundColor="Transparent" Margin="0,0,10,0" ></ImageButton>  
  14.         <ImageButton Source="google.png" HeightRequest="50" WidthRequest="50" Aspect="AspectFit" BackgroundColor="Transparent" Margin="10,0,0,0"></ImageButton>  
  15.         <ImageButton Source="instagram.png" HeightRequest="50" WidthRequest="50" Aspect="AspectFit" BackgroundColor="Transparent" Margin="14,0,0,0"></ImageButton>  
  16.   
  17.     </StackLayout>  
  18.   
  19.     <StackLayout AbsoluteLayout.LayoutBounds="0.5,100,350,300" AbsoluteLayout.LayoutFlags="XProportional"  >  
  20.         <ContentView x:Name="overlay"    
  21.          AbsoluteLayout.LayoutBounds="0.5, 0, 1, 1"    
  22.          AbsoluteLayout.LayoutFlags="All"    
  23.          IsVisible="False"    
  24.          BackgroundColor="#C0808080"    
  25.          Padding="10, 0">  
  26.   
  27.             <StackLayout WidthRequest="400" Orientation="Vertical"     
  28.            BackgroundColor="White"     
  29.            HorizontalOptions="Center"     
  30.            VerticalOptions="Center"     
  31.            Padding="10">  
  32.   
  33.                 <Label FontSize="18"     
  34.                TextColor="Green"     
  35.                HorizontalOptions="Center"  
  36.                VerticalOptions="Center"  
  37.                Text="SIGN UP PAGE" />  
  38.   
  39.                 <Entry      
  40.                Placeholder="Name"   x:Name="Name1"  
  41.                TextColor="Black"     
  42.                VerticalOptions="CenterAndExpand"     
  43.                HorizontalOptions="FillAndExpand"/>  
  44.   
  45.                 <Entry      
  46.                Placeholder="Enter your email"   x:Name="Email1"  
  47.                TextColor="Black"     
  48.                VerticalOptions="CenterAndExpand"     
  49.                HorizontalOptions="FillAndExpand"/>  
  50.   
  51.                 <Entry      
  52.                Placeholder="passward"   IsPassword="True"  
  53.                TextColor="Black"   x:Name="Passward1"  
  54.                VerticalOptions="CenterAndExpand"     
  55.                HorizontalOptions="FillAndExpand"/>  
  56.   
  57.                 <Entry      
  58.                Placeholder="Entre your address"   x:Name="address1"  
  59.                TextColor="Black"     
  60.                VerticalOptions="CenterAndExpand"     
  61.                HorizontalOptions="FillAndExpand"/>  
  62.   
  63.                 <StackLayout Orientation="Horizontal" HorizontalOptions="Center">  
  64.   
  65.                     <Button Text="Cancel" FontSize="Large"    
  66.               VerticalOptions="CenterAndExpand"    
  67.               HorizontalOptions="Center"    
  68.                             BorderRadius="10"  
  69.               x:Name="cncll" Clicked="Cncll_Clicked" />  
  70.   
  71.                     <Button Text="singup" FontSize="Large"    
  72.                 VerticalOptions="CenterAndExpand"    
  73.                 HorizontalOptions="Center"    
  74.                             BorderRadius="10"  
  75.                 x:Name="enntr" Clicked="Enntr_Clicked"  />  
  76.                 </StackLayout>  
  77.             </StackLayout>  
  78.   
  79.         </ContentView>  
  80.         <ContentView x:Name="overlay1"    
  81.          AbsoluteLayout.LayoutBounds="0.5, 0, 1, 1"    
  82.          AbsoluteLayout.LayoutFlags="All"    
  83.          IsVisible="False"    
  84.          BackgroundColor="#C0808080"    
  85.          Padding="10, 0">  
  86.             <StackLayout Orientation="Vertical"  WidthRequest="400"   
  87.            BackgroundColor="White"     
  88.            HorizontalOptions="Center"     
  89.            VerticalOptions="Center"     
  90.            Padding="10">  
  91.                 <Label FontSize="18"     
  92.                TextColor="Green"     
  93.                HorizontalOptions="Center"  
  94.                VerticalOptions="Center"  
  95.                Text="Login in page" />  
  96.                 <Entry      
  97.                Placeholder="Enter your email"   x:Name="logemail"  
  98.                TextColor="Black"     
  99.                VerticalOptions="CenterAndExpand"     
  100.                HorizontalOptions="FillAndExpand"/>  
  101.                 <Entry      
  102.                Placeholder="your passward" IsPassword="True" x:Name="logpassward"  
  103.                TextColor="Black"     
  104.                VerticalOptions="CenterAndExpand"     
  105.                HorizontalOptions="FillAndExpand"/>  
  106.   
  107.                 <StackLayout Orientation="Horizontal" HorizontalOptions="Center">  
  108.   
  109.                     <Button Text="close" FontSize="Large"    
  110.               VerticalOptions="CenterAndExpand"    
  111.               HorizontalOptions="Center"    
  112.               BorderRadius="10"  
  113.               x:Name="cncll1" Clicked="Cncll1_Clicked" />  
  114.   
  115.                     <Button Text="Signin" FontSize="Large"    
  116.                 VerticalOptions="CenterAndExpand"    
  117.                 HorizontalOptions="Center"    
  118.                 BorderRadius="10"  
  119.                 x:Name="enntr1" Clicked="Enntr1_Clicked"  />  
  120.                 </StackLayout>  
  121.             </StackLayout>  
  122.         </ContentView>  
  123.     </StackLayout>  
  124. </AbsoluteLayout>   
Here,I add the code given below to make this Layout.
  • Stack Layout
  • Absolute Layout
The content page is used and the content page contains only one main element in it. Thus, we use Stack Layout in our content page.
  • Another stack layout with horizontal orientation
    1. Entry with placeholder of the first name.
    2. Entry with placeholder of the last name.
  • Entry with placeholder Email.
  • Entry with placeholder Password.
  • Entry with placeholder to User Name.
  • Lable with tapped Gesture
  • Label With Text
  • Image button
  • Content view
  • Stack layout with orientation Horizontal
    1. Label with text needs to be UserName and password needs to be entered
    2. Register button tap to user registration page appear and fill all entry and then click signup button. Now user is register and then Next Step click sign in button and appear login page
    3. Sign in button tab and then appear login page
  • A Signup button click then appear signup page
  • A Sign Up button then show you sing in page
  • A Login button place
  • Use page navigation
  • Labels with text already have the account.
Refer to the screenshot given below.
 
Signup And Signin Page With Pop-UP In Xamarin.Forms 
 
1st  Reference
 
Signup And Signin Page With Pop-UP In Xamarin.Forms
 
Signup And Signin Page With Pop-UP In Xamarin.Forms
 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found