Introduction:

  • In this article we will learn how to create Cross Platform application using Xamarin in Visual Studio 2017 or how to Develop First Cross Platform Mobile App Using Visual Studio 2017 with example step by step.


Description:

 

In Visual Studio 2017 we can develop Cross Platform application 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.

 

Now let’s create a simple Cross Platform  app(Xamarin) using Visual Studio 2017.

 

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

 


 

After clicking OK to create the solution, you’ll see two templates for creating app. Choose Blank app template with with UI technology Xamarin.Forms and Code Sharing Strategy Portable Class Libary (PCL). Click ok

 


 

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

 


 

It will create a Xamarin Forms application with four projects targeting Android, iOS and Windows UWP app. Within each native project you have access to the native designer for the corresponding platform and can implement platform specific screens and functionality as needed.

 


 

Now build the application and run it for Android device. You will get the following output in your Visual Studio Android Emulator.

 


 

 

 

Now open the MainPage.xaml and add the following code.

 

 <StackLayout Padding="20"  BackgroundColor="#3a93b5">
   <Label Text="Create account" TextColor="Red" FontSize="15"></Label>
   <Entry x:Name="FirstName" Placeholder="First Name"  FontSize="10" WidthRequest="150"></Entry>
   <Entry x:Name="MiddleName" Placeholder="Middle Name"  FontSize="10" WidthRequest="150"></Entry>
   <Entry x:Name="LastName" Placeholder="Last Name"  FontSize="10" WidthRequest="150"></Entry>
    <StackLayout Orientation="Horizontal">
       <Label Text="Date of Birth" FontSize="10" TextColor="Red" VerticalOptions="End"/>
       <DatePicker x:Name="Date"/>
    </StackLayout>
     <StackLayout Orientation="Horizontal">
        <Button BackgroundColor="red" TextColor="White" Text="Save"/>              
     </StackLayout>
</StackLayout>

 

Now build the application and run it for Android device. You will get the following output in your Visual Studio Android Emulator.

 


 

I hope it will help to you.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

you may also like