Xamarin Forms Cross Platform HelloWorld App for Android and iOS
by admin • May 8, 2017 • Xamarin Cross Platfrom Mobile Apps, Xamarin Mobile App Development, Xamarin.Forms • 0 Comments
In this post, we’ll into look very basic HelloWorld example of Xamarin.Forms cross platform mobile apps. We’ll create a simple Hello World app using Xamarin Forms which will be cross platform. Later on, we’ll run this app both on Android and iOS, and I’ll show you both apps running on emulators. You’ll notice how easy it is to build cross platform apps with Xamarin Forms.
First, create a New Project in Visual Studio and from templates category select Cross-Platform and from templates select Cross Platform App.
This will bring up another dialog where you have to select App type, UI technology, and code sharing strategy. You can select Blank App, Xamarin Forms, and Portable Class Library (PCL) as shown in the screenshot.
Once your solution is created successfully, you’ll notice that it has created four projects. One PCL for cross-platform code, while one for each of the Android, iOS, and UWP apps. Before doing anything else, you need to update your packages from NuGet. For that, right click your solution, select NuGet Package Manager, and then select Xamarin.Forms package and click Install or Update as appropriate in your case.
Now, you need to add code in the MainPage.Xaml file for UI and in MainPage.Xaml.cs for the C# code to run behind the UI. First, I’ll share the XAML for MainPage.Xaml file and then I’ll show you the code for C# file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:HelloXamarinForms" x:Class="HelloXamarinForms.MainPage"> <ContentPage.Padding> <OnPlatform x:TypeArguments="Thickness" iOS="20, 40, 20, 20" Android="20, 20, 20, 20" WinPhone="20, 20, 20, 20" /> </ContentPage.Padding> <ContentPage.Content> <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Orientation="Vertical" Spacing="15"> <Label x:Name="helloLabel" Text="Say Hello to Xamarin Forms!" /> <Entry x:Name="helloText" Text="Xamarin Forms!" /> <Button x:Name="sayHelloButton" Text="Say Hello!" IsEnabled="True" Clicked="OnClick" /> </StackLayout> </ContentPage.Content> </ContentPage> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Xamarin.Forms; namespace HelloXamarinForms { public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); } void OnClick(object sender, EventArgs e) { string name = helloText.Text; helloLabel.Text = "Hello " + name; } } } |
This is very simple code just to show you how we can create cross-platform interface and then bind it with the code behind. It shows you a Label, a Text Box and a Button. On clicking button, it shows the message in the label after reading name from the text box. Now, let me show you the running app in Android and iOS.
Android App:
iOS App:
Now, you might have got good idea how to start building cross-platform apps with Xamarin Forms. Try it out and see what you can build from here on. I’ll be back with more examples. The sample project can be downloaded from Github.
