LoginPage Design With StackLayout In Xamarin.Forms

Introduction

 

Xamarin.Forms is a mobile application framework for building mobile app user interfaces(UI). The cross-platform UI toolkit allows developers to easily create native user interface layouts that can be shared across Android, iOS, and Windows Phone.

 

A new version of Xamarin.Forms has been published recently.

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 coding.

 

Tools

 

I am using Windows10 operating system and Visual Studio 2017 with Xamarin installed in it. You can also develop Xamarin.Forms applications using 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 websites, 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# 8.0 released this year.

 

Login

 

Our login page consists of the following controls.

• Stack Layout
• Label
• Image
• Entry
• Button

StackLayout

 

In stack layout, we use different elements to design a UI. In a stack layout, we use Margin and Padding properties to add margins and padding. The Image element is used to display images. Label and Text elements are used for label and text. Text element settings include text, text color, and font size. Next element is Entry. We use Entry as a placeholder. The last element is a Button.

 

Button is used on the Login page. Once the button is clicked, the next page navigates to the Signup or Layout.

 

Creating a Xamarin.Forms Project

 

Follow these steps to create a new project.

 

Open Visual Studio. Go to File>New Project>Cross Platform and then select Mobile App (Xamarin.Forms).

 

 

Now, select the following settings on the next screen:

• Blank app
• Forms
• .Net Standard

 

 

Press OK to create the project.

 

Now, your project is ready and you can start designing your UI, add code behind, build, test, and run.

 

 

If you look at the Solution Explorer, there are three projects in this solution:

• Android project.
• iOS project
• Window project

Visual Studio keeps a seperate project for separate platform.

 

Now, open MainPage.xaml and write some code in xaml and design our UI. This is what XAML looks like with various controls we discussed above.

 

Xaml 

<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <Image Source="ins.png" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="70"></Image>
        <Label Text="Instagram" FontSize="Large" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="Start" TextColor="Black"></Label>
        <Entry Placeholder="Phone Number,UserName,Email"></Entry>
        <Entry Placeholder="Passward" IsPassword="True"></Entry>
        <Label Text="Forgot Passward?" TextColor="DarkBlue" HorizontalOptions="End" VerticalOptions="End" >
            <Label.GestureRecognizers>
                <TapGestureRecognizer
                    Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
            </Label.GestureRecognizers>
        </Label>
        <Button Text="Log In" x:Name="bilal" Clicked="Bilal_Clicked" TextColor="White" WidthRequest="100" BackgroundColor="SkyBlue"></Button>
        <Label Text="OR"  TextColor="Black" HorizontalOptions="Center" VerticalOptions="Center" ></Label>
        <Label Text="Log in with Facebook"  HorizontalOptions="Center" VerticalOptions="Center" TextColor="DarkBlue" WidthRequest="150">
            <Label.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1"></TapGestureRecognizer>
            </Label.GestureRecognizers>
        </Label>
        <StackLayout HorizontalOptions="Center" VerticalOptions="Center" Padding="0,30,0,0">
            <Label Text="Don't have an accaount?" WidthRequest="170"></Label>
            <Button Text="Sign up" HorizontalOptions="Center" VerticalOptions="End" x:Name="signup" Clicked="Signup_Clicked" TextColor="SkyBlue"></Button>

        </StackLayout>
    </StackLayout>

The entire UI uses a StackLayout as the parent container. 

 

The content page is used and content page contains only one main element in it. Thus, we use Stack Layout in our content page.

• Another stack layout with horizontal orientation

• Entry with placeholder of the first name.
• 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
• Stack layout with orientation Horizontal

• Label with text needs to be UserName and password needs to be entered
• Use label gesture for forgot passward and another things.

• A Sign In button
• A Sign Up button
• Use page navigation
• Labels with text already have the account.

Refer to the screenshot given below.