Create A Simple Sign Up Page In Xamarin.Forms

Introduction

Xamarin.forms are used to make cross platform mobile Applications. A Xamrin.Forms mobile application runs on mobile operating systems which consist of Windows, Android and iOS. In Xamarin.Forms Application, our code and User Interface is shared between all the projects.

Target audience

Target audience refers to the people with basic knowledge of XAML and C# or the people who want to learn them.

Tools

In this example, I am using Windows operating system and Visual Studio 2017 with Xamarin installed in it. You can also develop Xamarin.Forms Applications in Xamarin Studio.

Creating a Xamarin.Forms project

Follow the steps to create your application project.

Open Visual Studio. Go to File-> New Project. Select Cross-Platfom -> Cross Platform App (Xamarin.Forms or Native) -> click OK.

Now, set the settings as given below.

• Blank app
• Forms
• Portable Class Library (PCL)

Now, click OK.



Click OK by selection Target version and Minimum version of your Universal Windows Project.



If you have MAC available for development with Xamarin installed in it, click Add Mac, otherwise close it. I don’t have MAC available so I simply close it. Don’t worry your iOS project is still created but you can’t test it on Windows OS.



Now, your first project is created and you are ready for development.



Here, you see 4 projects,

• Portable Project.
• Android Project.
• IOS Project.
• Windows Project.

99 percent of our code is shared and is done in portable projects.

Now, open MainPage.xaml file present in Portable project and write some XAML in it and design our sign up page.

XAML

<StackLayout VerticalOptions="CenterAndExpand" Padding="5">
      <StackLayout Orientation="Horizontal">
          <Entry Placeholder="First Name"></Entry>
          <Entry Placeholder="Last Name"></Entry>
      </StackLayout>
      <Entry Placeholder="Email"></Entry>
      <Entry Placeholder="Password" IsPassword="True"></Entry>
      <Entry Placeholder="Confirm Password" IsPassword="True"></Entry>
      <Label Text="Date Of Birth"></Label>
      <DatePicker></DatePicker>
      <Label Text="Address"></Label>
      <Editor></Editor>
      <StackLayout Orientation="Horizontal">
          <Label Text="Save Password"></Label>
          <Switch IsToggled="False"></Switch>
      </StackLayout>
      <Button Text="Sign Up"></Button>
      <Label Text="Already have account? Sign In" TextColor="Blue"></Label>
  </StackLayout>

Here, I add the things given below to make this layout:

• Stack Layout

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

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 confirm Password.
• Label with text Date of Birth Picker.
• A Date Picker to pick Date of birth.
• Label With Text Address.
• Editor to enter address.
• Stack layout with orientation Horizontal

1. Label with text needs to be saved and password needs to be entered.
2. Switch with IsToggled property is set as false.

• A Signup button
• Labels with text already have the account.

Refer to the screenshot given below.