Tutorial: Build Your First Mobile App with .NET MAUI and C#

In this step-by-step guide, you’ll learn how to create a cross-platform mobile app using .NET MAUI (Multi-platform App UI) and C#. By the end, you’ll have a functional app that runs on Android, iOS, Windows, and macOS.

---

Prerequisites

✅ Visual Studio 2022 (with .NET MAUI workload installed)
✅ Basic C# knowledge
✅ An Android/iOS emulator or physical device

---

Step 1: Set Up Your Development Environment

1. Install Visual Studio 2022 (Community Edition is free).

2. In the installer, select:

   • ".NET Multi-platform App UI development" workload.

   • Android/iOS emulators (if needed).

---

Step 2: Create a New .NET MAUI Project

1. Open Visual Studio → Click "Create a new project".

2. Search for ".NET MAUI App" → Select the template.

3. Name your project (e.g., "MyFirstMauiApp") → Click "Create".

---

Step 3: Design the User Interface (UI)

Open MainPage.xaml and replace the default code with:

xml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyFirstMauiApp.MainPage">
    
    <StackLayout Padding="20">
        <Label Text="Welcome to .NET MAUI!" 
               FontSize="24"
               HorizontalOptions="Center" />
        
        <Entry Placeholder="Enter your name" 
               x:Name="NameEntry" />
        
        <Button Text="Click Me!" 
                Clicked="OnButtonClicked" />
        
        <Label x:Name="GreetingLabel" 
               FontSize="18" />
    </StackLayout>
</ContentPage>

---

Step 4: Add Logic in C# (Code-Behind)

Open MainPage.xaml.cs and add:

csharp

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void OnButtonClicked(object sender, EventArgs e)
    {
        string name = NameEntry.Text;
        GreetingLabel.Text = $"Hello, {name}! 👋";
    }
}

---

Step 5: Run the App

1. Select a platform (Android, iOS, Windows) from the debug dropdown.

2. Press F5 (or click the "Start" button) to launch the app.

3. Test the app:

   • Enter your name → Click the button → See the greeting!

---

Next Steps

• Add Navigation → Try Navigation.PushAsync(new SecondPage()).

• Use Data Binding → Implement MVVM (Model-View-ViewModel).

• Deploy to a Physical Device → Connect via USB or Wi-Fi debugging.

Ref Video : Youtube - Evan Gudmestad