Complete Examples, Step by Step for Beginners: Overview of Xamarin Ecosystem - Native vs. Forms

Introduction

• Xamarin.Native: Allows developers to create platform-specific UIs using the native controls for each platform (iOS and Android) while sharing as much code as possible for business logic.
• Xamarin.Forms: Enables developers to build UIs that are shared across platforms by using XAML to define layout and controls.

In this guide, we'll cover both Xamarin.Native and Xamarin.Forms, providing simple examples to illustrate the key differences and similarities between the two approaches.

Prerequisites

• Basic knowledge of C# and .NET
• Visual Studio installed on your machine (make sure you have Xamarin installed from the Visual Studio installer)
• An emulator or physical device to run the applications

Example 1: Creating a Simple Xamarin.Native Application

Step 1: Creating a New Project

1. Open Visual Studio and select "Create a new project".
2. Choose "Mobile App (Native) and click Next.
3. Name your project (e.g., "XamarinNativeExample") and click Create.
4. Select "Blank" for both Android and iOS projects and click Create.

Step 2: Xamarin.Native Android Project

We'll add a simple button that, when clicked, will display a toast message.

MainActivity.cs

using Android.App;
using Android.OS;
using Android.Widget;
using Android.Views;

namespace XamarinNativeExample.Droid
{
    [Activity(Label = "XamarinNativeExample", MainLauncher = true)]
    public class MainActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);

            // Get our button from the layout resource,
            // and attach an event to it
            Button button = FindViewById<Button>(Resource.Id.button);
            button.Click += OnClick;
        }

        private void OnClick(object sender, EventArgs e)
        {
            // Show a toast message
            Toast.MakeText(this, "Hello from Xamarin Native!", ToastLength.Short).Show();
        }
    }
}

Main.axml (Resource Layout)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minWidth="25px"
    android:minHeight="25px">
    <Button android:id="@+id/button" 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Click Me" />
</LinearLayout>

Step 3: Xamarin.Native iOS Project

We'll add a simple button that, when clicked, will display an alert view.

ViewController.cs

using UIKit;

namespace XamarinNativeExample.iOS
{
    public partial class ViewController : UIViewController
    {
        public ViewController(IntPtr handle) : base(handle)
        {
        }

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();

            // Create a button
            UIButton button = UIButton.FromType(UIButtonType.System);
            button.SetTitle("Click Me", UIControlState.Normal);
            button.Frame = new CoreGraphics.CGRect(100, 100, 200, 40);
            button.TouchUpInside += OnClick;
            View.AddSubview(button);
        }

        private void OnClick(object sender, EventArgs e)
        {
            // Show an alert view
            UIAlertController alert = UIAlertController.Create("Hello", "Hello from Xamarin Native!", UIAlertControllerStyle.Alert);
            alert.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, null));
            PresentViewController(alert, true, null);
        }
    }
}

Step 4: Running the Application

• Set the startup project to the Android/iOS project.
• Deploy the application to an emulator or physical device.
• Click the button to see the toast/alert.

Example 2: Creating a Simple Xamarin.Forms Application

Step 1: Creating a New Project

1. Open Visual Studio and select "Create a new project".
2. Choose "Mobile App (Xamarin.Forms)" and click Next.
3. Name your project (e.g., "XamarinFormsExample") and click Create.
4. Select a template, e.g., "Blank", and choose C# for the UI framework. Click Create.

Step 2: Xamarin.Forms Project

We'll add a simple button that, when clicked, will display a message.

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamarinFormsExample.MainPage">

    <StackLayout>
        <Button Text="Click Me" 
                Clicked="Button_Clicked" 
                HorizontalOptions="Center" 
                VerticalOptions="Center" />
    </StackLayout>

</ContentPage>

MainPage.xaml.cs

using Xamarin.Forms;

namespace XamarinFormsExample
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void Button_Clicked(object sender, System.EventArgs e)
        {
            // Display a message
            DisplayAlert("Hello", "Hello from Xamarin Forms!", "OK");
        }
    }
}

Step 3: Running the Application

• Set the startup project to the .NET MAUI or Xamarin.Forms project.
• Deploy the application to an emulator or physical device.
• Click the button to see the message.

Conclusion

In this tutorial, we've covered the basics of Xamarin.Native and Xamarin.Forms. Xamarin.Native lets you create platform-specific UIs while sharing code for business logic, while Xamarin.Forms enables you to share UI code across platforms using XAML and C#.

By understanding the strengths and weaknesses of each approach, you can better decide which one is best for your next project.