Introduction

Building mobile apps for both Android and iOS usually requires learning multiple technologies. However, with .NET MAUI (Multi-platform App UI), you can build cross-platform mobile applications using C# and a single codebase.

.NET MAUI is the evolution of Xamarin.Forms and is designed for modern, scalable, and high-performance mobile and desktop applications. It allows developers to write once and run on Android, iOS, Windows, and macOS.

In this article, we will walk step-by-step through how to build a cross-platform mobile app from scratch using .NET MAUI in simple words, with practical examples and best practices.

What is .NET MAUI?

.NET MAUI is a cross-platform framework that enables developers to create native mobile apps using C# and XAML.

Key benefits:

Prerequisites for .NET MAUI Development

Before starting, make sure your system is ready.

Requirements:

Why this matters:

Step 1: Create a New .NET MAUI Project

Open Visual Studio and select:

Project structure includes:

Step 2: Understand the Project Structure

.NET MAUI uses a single project structure.

Important folders:

This structure helps in maintaining a clean and scalable codebase.

Step 3: Design the UI Using XAML

XAML is used to design the user interface.

Example:

<VerticalStackLayout Padding="20">
    <Label Text="Welcome to .NET MAUI" FontSize="24" />
    <Button Text="Click Me" Clicked="OnButtonClicked" />
</VerticalStackLayout>

This creates a simple UI with a label and a button.

Why this is useful:

Step 4: Add Code Behind Logic

In MainPage.xaml.cs:

private void OnButtonClicked(object sender, EventArgs e)
{
    DisplayAlert("Hello", "Button clicked!", "OK");
}

This handles user interaction.

Step 5: Run the App on Android Emulator

You will see your app running on Android.

Step 6: Run the App on iOS Simulator

This ensures your app works on both platforms.

Step 7: Use MVVM Pattern (Best Practice)

MVVM (Model-View-ViewModel) helps organize code.

Benefits:

Example ViewModel:

public class MainViewModel
{
    public string Title { get; set; } = "Hello MAUI";
}

Step 8: Access Device Features

.NET MAUI allows access to native features.

Example: Get device location

var location = await Geolocation.GetLastKnownLocationAsync();

Use cases:

Step 9: Add Navigation Between Pages

Example:

await Navigation.PushAsync(new SecondPage());

Why this matters:

Step 10: Handle Data and APIs

You can call APIs using HttpClient.

Example:

var client = new HttpClient();
var data = await client.GetStringAsync("https://api.example.com/data");

This is useful for:

Step 11: Optimize Performance

Best practices:

Why:

Step 12: Test Your App

Testing ensures your app works correctly.

Types of testing:

Step 13: Publish Your App

Steps:

Real-World Example

Imagine building a To-Do app:

Features:

This simple app can run on both Android and iOS using the same code.

Common Mistakes to Avoid

Summary

.NET MAUI makes it easy to build cross-platform mobile applications for Android and iOS using a single codebase and C#. By following a structured approach, using XAML for UI, MVVM for architecture, and best practices for performance, developers can create scalable, high-performance mobile apps. It is a powerful solution for modern mobile app development, helping developers save time, reduce costs, and deliver high-quality applications efficiently.