Xamarin Forms – Build Mobile App

XAMARIN :

Xamarin is that the application user interface uses native controls on each platform, creating apps (for iOS and Android respectively).

Xamarin applications are written in C#, a modern language that includes significant improvements over Objective-C and Java .

 

Developing First Cross Platform Mobile App Using Visual Studio 2017

INTRODUCTION

In Visual Studio 2017,we an develop the Cross Platform  MOBILE APP using XAMARIN. XAMARIN is a platform to develop the MOBILE APP for different OS in shared code resource. To Develop the Cross Platform MOBILE APP in XAMARIN,We need to know the basic C-SHARP and XAML Language Knowledge.

REQUIREMENTS

• Visual Studio 2017 –https://visualstudio.microsoft.com/
• windows 10 – OS

Step-1: To Download the Visual Studio – Community 2017

Step-2:  To install the Visual Studio with Workloads

Now,Run your VisualStudio Application and Start the Cross Platform Mobile App Development in Xamarin Forms.

Step-3:  File->New->Project(crtl+shift+N)

 

Step-4:  Installed-> visual c#-> web ->Cross Platform->mobile App(Xamarin

Forms)

 

Step-5: Select BLANK page app(To Make an Simple App to Navigate Two Pages) and Mark all the OS in the Platform

 

Step-6 : Main page.xaml and Main page.xaml.cs will opened with default syntax.

MAINPAGE.XAML

 

• The two XML namespace ( xmlns) declarations refer to URIs, the first seemingly on Xamarin’s web site and the second (x) on Microsoft’s. Don’t bother checking what those URIs point to.
• stackLayout is less complex than other views. Simple linear interfaces can be created by just adding views to a StackLayout, and more complex interfaces created by nesting them.
• You Can add the FONT SIZE,BACKGROUND COLOUR,FONT FAMILY,FONT COLOUR in the label.

MAINPAGE.XAML.CS

 

• Class would be a Partial Class, To have a single class implementation in multiple .cs files using the partial modifier keyword. The partial modifier can be applied to a class, method, interface or structure.

 

Step-7 : Goto App-8(as you named)-> Add ->New Item ->Content Page

 

Page1.xaml(as you named) will be opened.

Open the PAge1.xaml.cs

click App-8 ->Page1.xaml ->PAge1.xaml.cs

The Default Syntax in the Page1.xaml and Page.xaml.cs is same as the Mainpage.xaml and Mainpage.xaml.cs

 

Step-8: Navigate the main page and page1.

• Open the app.xaml.cs(as you named the project)
• click app8(as you named) ->app.xaml ->app.xaml.cs and

            Type “MainPage = new NavigationPage(new MainPage()); “.

Step-9:  Insert the Button in Xaml file in Both Mainpage and Page1. Then,Edit and insert the font size,font family,background colour,vertical and horizontal options of both label and the Button.

Mainpage.xaml

In Buton,insert the CLICKED in both xaml file.

Page.xaml

.

Step-10: Using the Event handler Delegate Method to invoke and call the two pages by use of button in both Mainpage and Page1 (as you named)”.cs”

Mainpage.xaml.cs

Type ” private async void NavigateButton_OnClicked(object sender, EventArgs e) {

await Navigation.PushAsync(new Page1());   }  “

Page1.xaml.cs

Type ”  private async void NavigateButton_OnClicked(object sender, EventArgs e)

{  await Navigation.PopAsync()   }”

 

Step-11 : Click ->BUILD -> Build solution to run and Then,Debug the project(no errors while buid the solution) ->Start Debugging.

 

 

 

If Button1 is Clicked It’s moved to page-2(page1 in project) and then if Button-2 is clicked it’s moved to page-1(mainpage in project).

Step-12 : Disable Back Button

There’s another problem,we can move to previous page by using back button on Android phone or by using back button displaying on the top of Windows desktop application. If we want  to not to go on the previous page(To Mainpage) again.

Type in page1.xaml.cs ” protected override bool OnBackButtonPressed()  {

return true; }”

Developing URL-LINK(in Gesture) Cross Platform Mobile App Using Visual Studio 2017

As Same as above Fom Step-3 to Step-6 and Then,Edit the Mainpage.xaml and Mainpage.xaml.cs

Mainpage.xaml

Type ”  <Label Text=”Google”> <Label.GestureRecognizers>  <TapGestureRecognizer Tapped=”GoGoogle” /> </Label.GestureRecognizers></Label> “

Mainpage.xaml.cs

Type “protected void GoGoogle(object sender, EventArgs e) {

Device.OpenUri(new Uri(“http://www.google.com”)  } ”

Eventually,Build and Debug the Program