Developing First Cross Platform Mobile App Using Visual Studio 2017

Introduction

In Visual Studio 2017 we can develop Cross Platform apps using Xamarin. Xamarin is a platform to develop apps for multiple mobile operating systems by a shared code base. In xamarin we can develop separate UI apps or shared UI apps. Shared UI apps are developed through xamarin forms.

In this article we can develop basic android, windows and ios applications by using xamarin forms.

Target Audience

Beginners with basic C# and XAML coding knowledge

Technical Requirements

• Windows 10 OS
• Visual Studio 2017
• Developer mode should be enable on your OS

Installation

Download visual Studio Installer from here.

Firstly you can install Visual Studio 2017 with a Xamarin workload.

Make sure that Mobile development with .NET is checked. By installing it all the required components are installed.

Create a Project

Let’s start development. Run your visual studio 2017

Click File -> New -> Project

Goto Templates -> Visual C# -> Cross-Platfom -> Cross Platform App (Xamarin.Forms or Native) -> Write name for you application -> Select location for your project -> click ok

Select Blank app -> Xamarin.Forms -> Portable Class Library (PCL) -> Ok

Select Target Version and Minimum Version for your windows project and click OK.

Note

For iOS development with Visual Studio on Windows, you also need to set up a Mac with the Xamarin tools.

If you don’t have Mac available then close this.

Development

Now all things are ready to start development: In the right block of solution explorer you can see 4 projects in your solution; i.e., Portable project, Android, iOS and UWP Project. UWP is universal windows platform application. Applications made by this project work on both windows 10 phone and windows 10 desktop.

We will code in Portable project using c# and xaml. And it works on all three platforms.

Now Expand Portable project -> MainPage.xaml

Here you see a label with text “Welcome to xamarin form”

Now make a quick login form. Replace the label with the following code, 

<StackLayout>
    <Label Text="Email"></Label>
    <Entry Placeholder="Enter Your Email"></Entry>
    <Label Text="Password"></Label>
    <Entry Placeholder="Enter Your Password"></Entry>
    <Button Text="Login"></Button>
</StackLayout>

Now see this code output on windows and android Emulator.

Start Android Project using Android Emulator.

Paste the code -> select android option from drop down menu -> click start button

After starting the application you can see the following result.

This is what your Android os application looks like. Now start windows application to start UWP application and keep these steps in your mind:

1. Select Universal Windows from drop down box on left side of play button.
2. Than right click on your solution -> go to properties
   
   
   
   
3. Go to configuration Properties -> check the build and deploy box of UWP
4. Click apply -> than ok
   
   
   

Now you can your windows application on your local machine. Now click on play button to start your application. You will see the result deployed on your windows.

This is all you need. Now you can start development and start exploring all the folders and files to learn more about xamarin forms. With every .xaml file there is a file combined with .xamal.cs extension this is a Csharp file and you can code your logic here in Csharp.

Now you are done with developing your first cross platform app.

Keep Exploring Keep Learning.