How to Build a Cross-Platform Mobile App with .NET MAUI

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.