Build Cross Platform Apps In Xamarin Forms - Part One

Venkat

10y14.7k20100Article

Xamarin Xamarin.FormsCross-Platform Apps

20 Comments

Join the conversation! Your thoughts help the community grow.

Guest User9y ago
Are you coding the UI and the code behind at the same time?
Bhimashankar Gangade10y ago
When i run the application that time "there were deployment errors" message getting
- Venkat10y ago
  Could you please post the error.
Bhagat Singh10y ago
Yes, Using Xamarin form develop cros-platform app
- Venkat10y ago
  Try this http://bit.ly/forms-wcf
Bhagat Singh10y ago
Can you give me full example.because i want to use this wcf in PCI not in android and use with interface.just in PCL
- Venkat10y ago
  Are u using Xamarin Forms ?.
Bhagat Singh10y ago
How to use wcf in PCl
- Venkat10y ago
  Add to some references(System.Runtime.Serialization, System.ServiceModel, System.ServiceModel.Web) public static readonly EndpointAddress EndPoint = new EndpointAddress("http://192.168.1.143:9608/HelloWorldService.svc");
- Venkat10y ago
  Install references from Nuget.
Venkat10y ago
Thanks all :)
Shobana J10y ago
Nice one
Vignesh Mani10y ago
Nice
Kishor Bikram Oli10y ago
Great
Humayun Kabir Mamun10y ago
Nice...
Vikram Chaudhary10y ago
Nice post..How can I get the cross platform project option in Visual studio. Do I need to install some plugin or package ? Thanks.
- Venkat10y ago
  Thank a lot.Try to install latest Xamarin and i used 2015 community edition
Hussain Khawaja10y ago
Good one.
Asad Ali10y ago
Nice one
kalu singh rao10y ago
Nice...

Xamarin.Forms is a cross platform that allows us to easily create a user interface layout that can be shared across Android, iOS and Windows Phone. We can share most of the code across Mobile platforms. If our resources are limited and you are mostly going to focus on the functionality rather than the design, Xamarin.Forms is the best to develop a cross platform.

Let’s start.

We will try to create a sample Application in this session, how to create a login page, and how to navigate from one form to another. In the coming articles, we will focus on the menu and toolbar.

Step 1

File->New Project ->Templates ->Visual C# ->Cross platform ->Blank App(Xamarin.Froms.Portable).

Select blank app, the project name and project location.

Once the application is created, it will look as given below. EmployeeInfo is our shared project. We can place our code and design and this project is going to be shared by both Android and iOS.

Step 2

Before doing anything, I just created some folders for my convenience and now, we have to create a login page. For this, right click in View folder and Select Add-->New Item.

Select Cross-Platform under Visual C# --> Forms ContentPage, add a name and click OK. Likewise,create MainPage.

Step 3: We can add a login form and the code is given below:

MainPage.cs

public class MainPage : ContentPage
{
public MainPage()
{
Content = new StackLayout
{
VerticalOptions = LayoutOptions.Center,
Children = {
new Label {
HorizontalTextAlignment = TextAlignment.Center,
Text = "Welcome to EmployeeInfo Xamarin Forms!"
}
}
};
}

LoginPage.cs

public class LoginPage : ContentPage
{
private readonly Entry _userName;
private readonly Entry _password;
public LoginPage()
{
var add = new Button
{
Text = "Login",
TextColor = Color.White
};
_userName = new Entry { Placeholder = "UserName" };
_password = new Entry { Placeholder = "Password", IsPassword = true };
add.Clicked += Add_Clicked;
var stackLayout = new StackLayout
{
Spacing = 20,
Padding = 50,
VerticalOptions = LayoutOptions.Center,
Children =
{
_userName,
_password ,
add
}
};
Content = stackLayout;
}
private void Add_Clicked(object sender, EventArgs e)
{
if (_userName.Text == "a" && _password.Text == "a")
{
Application.Current.MainPage = new MainPage();
}
else if (string.IsNullOrEmpty(_userName.Text) || string.IsNullOrEmpty(_password.Text))
{
DisplayAlert("Error", "Username and Password are required", "Re-try");
}
else
{
DisplayAlert("Failed", "Invalid User", "Login Again");
}
}
}

App.cs

public class App : Application
{
public App()
{
MainPage = new LoginPage();
}
protected override void OnStart()
{
// Handle when your app starts
}
protected override void OnSleep()
{
// Handle when your app sleeps
}
protected override void OnResume()
{
// Handle when your app resumes
}
}

Step 4: Run the Application.

Enter the username, password and click Login.

We created a sample EmployeeInfo Application and added Login page and added some code to navigate around the Application. In the coming articles, we will focus on the Menu and Toolbar.