Step-by-Step Guide to Building Your First .NET MAUI App (A to Z)

This guide will walk you through creating, building, and deploying a .NET MAUI app for Android/iOS (even if you're a complete beginner).

---

🔹 Step 1: Install Prerequisites

Before coding, ensure you have the right tools:

1. Install Visual Studio 2022 (Windows/Mac)

• Download Visual Studio 2022 (Community Edition)

• Select .NET Multi-platform App UI development workload:

  • Windows:
    

    Visual Studio 2022 Setup for .NET MAUI (Windows)

    Step 1: Install the .NET MAUI Workload

    1. Open Visual Studio Installer (search for it in the Start menu).

    2. Click Modify on your installed Visual Studio 2022 version.

    3. Under Workloads, select:

       • .NET Multi-platform App UI development
         (This includes Android, iOS, and Windows support.)

       https://learn.microsoft.com/en-us/dotnet/maui/media/installation/vs-workloads.png?raw=true
       (Source: Microsoft Docs)

    4. Click Modify to install.

  • Mac: Install .NET MAUI via Visual Studio for Mac.

2. Install .NET 8.0+ SDK

• Download from dotnet.microsoft.com

3. Enable Developer Mode (Windows only)

• Go to Settings → Update & Security → For Developers → Enable Developer Mode.

4. (Optional) Android Emulator / iOS Simulator

• Android: Install via Tools → Android → Android Device Manager.

• iOS (Mac only): Requires Xcode (from App Store).

---

🔹 Step 2: Create a New MAUI Project

1. Open Visual Studio → Create a new project.

2. Search for ".NET MAUI App" → Select C# → Click Next.

3. Name your project (e.g., MyFirstMauiApp) → Choose a location → Click Create.

---

🔹 Step 3: Understand the Project Structure

MAUI projects have a shared codebase for all platforms:

text

MyFirstMauiApp/
├── Platforms/       # Platform-specific code (Android, iOS, etc.)
├── Resources/      # Images, fonts, and assets
├── App.xaml        # Global app styling & resources
├── App.xaml.cs     # App entry point
└── MainPage.xaml   # Default UI page

---

🔹 Step 4: Build Your First Screen

1. Edit MainPage.xaml

Replace the default code with a simple UI:

xml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyFirstMauiApp.MainPage">
    
    <VerticalStackLayout Spacing="20" Padding="30">
        
        <!-- Header -->
        <Label Text="Welcome to MAUI!" 
               FontSize="32" 
               HorizontalOptions="Center" />
        
        <!-- Image -->
        <Image Source="dotnet_bot.png" 
               WidthRequest="200" 
               HeightRequest="200" 
               HorizontalOptions="Center" />
        
        <!-- Button -->
        <Button Text="Click Me!" 
                Clicked="OnButtonClicked" 
                HorizontalOptions="Center" />
        
        <!-- Counter Label -->
        <Label x:Name="CounterLabel" 
               Text="Count: 0" 
               FontSize="18" 
               HorizontalOptions="Center" />
    </VerticalStackLayout>
</ContentPage>

2. Edit MainPage.xaml.cs (Code-Behind)

Add button click logic:

csharp

public partial class MainPage : ContentPage
{
    int count = 0;

    public MainPage()
    {
        InitializeComponent();
    }

    private void OnButtonClicked(object sender, EventArgs e)
    {
        count++;
        CounterLabel.Text = $"Count: {count}";

        if (count == 1)
            CounterLabel.Text += " (Click again!)";
    }
}

---

🔹 Step 5: Add an Image

1. Download an image (e.g., dotnet_bot.png).

2. Place it in Resources/Images/.

3. Set its Build Action to MauiImage (right-click → Properties).

---

🔹 Step 6: Run the App

On Windows (Android)

1. Select Android Emulator from the dropdown.

2. Click Start Debugging (F5).

On Mac (iOS)

1. Select iOS Simulator.

2. Click Start Debugging (F5).

✅ You should see your app running!

---

🔹 Step 7: Deploy to a Physical Device

Android

1. Enable USB Debugging on your phone (Settings → Developer Options).

2. Connect via USB → Select your device in Visual Studio → Run.

iOS (Mac only)

1. Connect iPhone via USB.

2. Select your device → Run.

---

🔹 Step 8: Publish to App Stores

Android (Google Play Store)

1. Build in Release Mode:

   • Right-click project → Publish → Create Android App Bundle (.aab).

2. Upload to Google Play Console.

iOS (Apple App Store)

1. Archive in Release Mode:

   • Right-click project → Archive for Publishing.

2. Upload via App Store Connect.

---

🔹 Next Steps

• Explore MAUI Documentation

• Try adding:

  • Navigation (Shell or NavigationPage)

  • Data Binding (MVVM pattern)

  • API calls (HttpClient)

---

🎉 Congratulations! You Built Your First MAUI App!

Now you can customize it further and publish it to app stores.