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:

  • Single codebase for Android and iOS

  • Native performance

  • Access to device features like camera, GPS, and storage

  • Strong integration with .NET ecosystem

Prerequisites for .NET MAUI Development

Before starting, make sure your system is ready.

Requirements:

  • Install Visual Studio with .NET MAUI workload

  • Install Android SDK and Emulator

  • Install Xcode (for iOS development on Mac)

Why this matters:

  • Ensures smooth development experience

  • Avoids setup issues later

Step 1: Create a New .NET MAUI Project

Open Visual Studio and select:

  • Create a new project

  • Choose ".NET MAUI App"

Project structure includes:

  • Platforms (Android, iOS)

  • Resources (images, fonts)

  • MainPage.xaml (UI)

  • MainPage.xaml.cs (logic)

Step 2: Understand the Project Structure

.NET MAUI uses a single project structure.

Important folders:

  • Platforms: Platform-specific code

  • Resources: Images, fonts, styles

  • App.xaml: Global styles and configuration

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:

  • Clean separation of UI and logic

  • Easy to maintain and update design

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

  • Select Android Emulator

  • Click Run

You will see your app running on Android.

Step 6: Run the App on iOS Simulator

  • Connect Mac (required for iOS)

  • Select 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:

  • Better separation of concerns

  • Easier testing

  • Cleaner code structure

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:

  • GPS tracking

  • Camera apps

  • File storage

Step 9: Add Navigation Between Pages

Example:

await Navigation.PushAsync(new SecondPage());

Why this matters:

  • Enables multi-screen apps

  • Improves user experience

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:

  • Fetching data from servers

  • Building real-world apps

Step 11: Optimize Performance

Best practices:

  • Use async/await

  • Avoid heavy UI operations

  • Optimize images

Why:

  • Improves app speed

  • Enhances user experience

Step 12: Test Your App

Testing ensures your app works correctly.

Types of testing:

  • UI testing

  • Unit testing

  • Device testing

Step 13: Publish Your App

Steps:

  • Build release version

  • Generate APK/IPA

  • Upload to Play Store / App Store

Real-World Example

Imagine building a To-Do app:

Features:

  • Add tasks

  • Delete tasks

  • Save data locally

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

Common Mistakes to Avoid

  • Not using MVVM pattern

  • Ignoring performance optimization

  • Hardcoding UI values

  • Not testing on real devices

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.