Creating a Simple MAUI App - Step by Step

Let's create a basic .NET MAUI (Multi-platform App UI) application that displays a greeting message and has a counter button.

Prerequisites

• Visual Studio 2022 (with .NET MAUI workload installed)

• .NET 7 or later SDK

Step 1: Create a new MAUI project

1. Open Visual Studio 2022

2. Click "Create a new project"

3. Search for "MAUI" and select ".NET MAUI App"

4. Click "Next"

5. Name your project (e.g., "SimpleMauiApp")

6. Choose a location and click "Next"

7. Select the target framework (.NET 7 or later)

8. Click "Create"

Step 2: Understand the project structure

The project contains several important files:

• App.xaml - Application resources and startup

• App.xaml.cs - Application code-behind

• MainPage.xaml - Your main page's UI

• MainPage.xaml.cs - Main page's code-behind

Step 3: Modify the MainPage.xaml

Replace the content of MainPage.xaml with:

xml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SimpleMauiApp.MainPage"
             Title="Simple MAUI App">

    <VerticalStackLayout 
        Spacing="25" 
        Padding="30,0"
        VerticalOptions="Center">

        <Label 
            Text="Hello, MAUI!"
            SemanticProperties.HeadingLevel="Level1"
            FontSize="32"
            HorizontalOptions="Center" />

        <Label 
            Text="Welcome to .NET MAUI"
            SemanticProperties.HeadingLevel="Level2"
            FontSize="18"
            HorizontalOptions="Center" />

        <Button 
            x:Name="CounterBtn"
            Text="Click me"
            HorizontalOptions="Center"
            Clicked="OnCounterClicked" />

        <Label
            x:Name="CounterLabel"
            Text="Count: 0"
            HorizontalOptions="Center"
            FontSize="18" />

    </VerticalStackLayout>
</ContentPage>

Step 4: Modify the MainPage.xaml.cs

Replace the content of MainPage.xaml.cs with:

csharp

namespace SimpleMauiApp;

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

    public MainPage()
    {
        InitializeComponent();
    }

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

        if (count == 1)
            CounterBtn.Text = $"Clicked {count} time";
        else
            CounterBtn.Text = $"Clicked {count} times";

        // Vibrate on click (mobile only)
        try
        {
            Vibration.Default.Vibrate(TimeSpan.FromMilliseconds(100));
        }
        catch (Exception)
        {
            // Vibration not supported on this platform
        }
    }
}

Step 5: Add vibration permission (Android only)

For Android, you need to add vibration permission:

1. Open Platforms/Android/AndroidManifest.xml

2. Add this line before the <application> tag:

xml

<uses-permission android:name="android.permission.VIBRATE" />

Step 6: Run the application

1. In Visual Studio, select your target platform:

   • Windows Machine (for Windows)

   • Android Emulator (for Android)

   • Other available options for iOS/Mac

2. Click the "Start Debugging" button (green arrow) or press F5

Step 7: Test the app

• You should see a screen with "Hello, MAUI!" and a button

• Click the button to see the counter increase

• The button text will update to show the click count

• On mobile devices, you should feel a short vibration on each click

Additional Enhancements (Optional)

Add platform-specific styling

In App.xaml, add these resources:

xml

<Application.Resources>
    <ResourceDictionary>
        <Color x:Key="Primary">#512BD4</Color>
        <Color x:Key="Secondary">#DFD8F7</Color>
        
        <Style TargetType="Label">
            <Setter Property="TextColor" Value="{StaticResource Primary}" />
        </Style>
        
        <Style TargetType="Button">
            <Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
            <Setter Property="TextColor" Value="White" />
            <Setter Property="CornerRadius" Value="10" />
            <Setter Property="Padding" Value="14,10" />
        </Style>
    </ResourceDictionary>
</Application.Resources>

Add an image

1. Add an image to the Resources/Images folder

2. Update MainPage.xaml to include:

xml

<Image
    Source="dotnet_bot.png"
    HeightRequest="200"
    HorizontalOptions="Center" />

Final Notes

• MAUI apps can run on Android, iOS, macOS, and Windows from a single codebase

• The UI adapts to each platform's native look and feel

• You can add platform-specific code using compiler directives like #if ANDROID or #if IOS

This simple app demonstrates the basic structure of a MAUI application with XAML for UI and C# for logic. From here, you can explore more complex layouts, navigation, data binding, and platform-specific features.