MSDN Documentation

Xamarin.Forms Basics

Welcome to the foundational tutorial for Xamarin.Forms. This guide will introduce you to the core concepts and building blocks necessary to start developing cross-platform mobile applications with Xamarin.Forms.

What is Xamarin.Forms?

Xamarin.Forms is an open-source UI toolkit that allows developers to build native UIs for iOS, Android, and Windows from a single, shared C# codebase. It abstracts away platform-specific UI elements and provides a consistent API for creating user interfaces that look and feel native on each platform.

Key Concepts

• XAML: Extensible Application Markup Language is an XML-based markup language used to define user interfaces declaratively.
• C#: The primary programming language used to implement application logic and behavior.
• Shared Codebase: A single project structure that contains shared UI definitions and business logic, deployed to multiple platforms.
• Platform Abstraction: Xamarin.Forms handles the translation of shared UI elements into their native counterparts on each target platform.

Getting Started: Your First Xamarin.Forms App

To begin, you'll need to set up your development environment. This typically involves installing Visual Studio with the Xamarin workload.

1. Project Setup

Create a new project in Visual Studio and select the "Mobile App (Xamarin.Forms)" template.

2. Understanding the Project Structure

A typical Xamarin.Forms project consists of:

• Solution: Contains multiple projects.
• Platform Projects: Separate projects for iOS, Android (and potentially UWP) that contain platform-specific code and build processes.
• .NET Standard Library Project: This is where your shared UI code (XAML) and business logic (C#) reside.

3. The `App` Class

Located in the .NET Standard library project, the `App.xaml.cs` file contains the entry point for your application. The App class typically inherits from Application and its constructor sets the initial page.

using Xamarin.Forms;

public partial class App : Application
{
    public App()
    {
        InitializeComponent();

        MainPage = new NavigationPage(new Views.HomePage());
    }

    protected override void OnStart()
    {
        // Handle when your app starts
    }

    protected override void OnSleep()
    {
        // Handle when your app sleeps
    }

    protected override void OnResume()
    {
        // Handle when your app resumes
    }
}

4. XAML for UI Definition

User interfaces are often defined using XAML. This allows for a clear separation of concerns between UI design and application logic.

Here's a simple example of a XAML page:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppName.Views.HomePage"
             Title="Home">

    <StackLayout Padding="10" Spacing="10">
        <Label Text="Welcome to Xamarin.Forms!"
               FontSize="Large"
               HorizontalOptions="Center" />
        <Button Text="Click Me"
                Clicked="OnButtonClicked"
                HorizontalOptions="Center" />
    </StackLayout>

</ContentPage>

5. C# Code-Behind

The code-behind file (e.g., `HomePage.xaml.cs`) contains the logic for the UI defined in XAML.

using Xamarin.Forms;

namespace YourAppName.Views
{
    public partial class HomePage : ContentPage
    {
        public HomePage()
        {
            InitializeComponent();
        }

        void OnButtonClicked(object sender, System.EventArgs e)
        {
            DisplayAlert("Button Clicked", "You pressed the button!", "OK");
        }
    }
}

Next Steps

Now that you have a basic understanding of Xamarin.Forms, you can explore more advanced topics such as building complex layouts, implementing data binding, and handling navigation between pages.