First .Net Maui App Walkthrough Complete Guide

Prerequisites

Before diving into the creation of the app, ensure you have the following prerequisites:

1. Visual Studio 2022 with the .NET Multi-platform App UI development workload installed.
2. .NET 6 SDK or later installed.
3. Basic knowledge of C# and object-oriented programming.

If you don't have Visual Studio 2022, you can download it from the official website. During installation, make sure to select the "Mobile development with .NET" workload.

Step-by-Step Guide to Creating a .NET MAUI App

Step 1: Create a New .NET MAUI Project

1. Open Visual Studio 2022.
2. Click on Create a new project.
3. In the Create a new project window, search for "MAUI" in the search box and select .NET MAUI App.
4. Click Next.
5. In the Configure your new project window, enter a Project name, choose a Location for your project, and optionally specify a Solution name.
6. Click Next.
7. In the Additional information window, verify that .NET 6.0 (Long Term Support) is selected. You can also choose the target platforms you want to support (e.g., Android, iOS, Windows, etc.).
8. Click Create to generate the project.

Visual Studio will take a moment to create the project and restore the necessary NuGet packages.

Step 2: Understand the Project Structure

After creating the project, your solution explorer should look something like this:

• YourProjectName (Solution)
  • YourProjectName (Project)
    • Assets
      • Images
      • Styles
    • Platforms
      • Android
      • iOS
      • Windows
      • macOS
    • Views
      • MainPage.xaml
      • MainPage.xaml.cs
    • App.xaml
    • App.xaml.cs
    • ** MauiProgram.cs**

Here's a brief overview of the important parts:

• Assets: Contains resources like images and styles used by your app.
• Platforms: Contains platform-specific code for each target platform.
• Views: Contains the XAML and code-behind files for your user interface.
• App.xaml: Defines global resources and styles for your app.
• App.xaml.cs: Contains the code-behind for the App.xaml file.
• MauiProgram.cs: Configures the services and creates the app instance.

Step 3: Modify the MainPage

Let's modify the default MainPage.xaml to display a simple "Hello World" message.

1. Open MainPage.xaml.

2. Replace the existing content with the following XAML code:

   <?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="YourProjectName.MainPage"
                Title="Hello World">
       <VerticalStackLayout
           Spacing="25"
           Padding="30"
           VerticalOptions="Center">
   
           <Label 
               Text="Hello, World!"
               HorizontalOptions="Center"
               FontSize="32"
               FontAttributes="Bold" />
   
           <Button 
               x:Name="counterBtn"
               Text="Click me"
               Clicked="OnCounterClicked"
               HorizontalOptions="Center" />
   
           <Label 
               x:Name="counterLabel"
               Text="Current count: 0"
               HorizontalOptions="Center"
               FontSize="18"
               FontAttributes="Italic" />
       </VerticalStackLayout>
   </ContentPage>
   

3. Save the file.

Step 4: Add Code-Behind Functionality

Next, let's add some functionality to handle button clicks and update the counter.

1. Open MainPage.xaml.cs.

2. Replace the existing content with the following code:

   using Microsoft.Maui.Controls;
   using System.Diagnostics;
   
   namespace YourProjectName
   {
       public partial class MainPage : ContentPage
       {
           private int _counter = 0;
   
           public MainPage()
           {
               InitializeComponent();
           }
   
           private void OnCounterClicked(object sender, EventArgs e)
           {
               _counter++;
               counterLabel.Text = $"Current count: {_counter}";
   
               Debug.WriteLine("Button clicked");
           }
       }
   }
   

3. Save the file.

Step 5: Run the App

Now that we have set up our app, let's run it on different targets.

Debugging on Windows

1. Select Windows (Desktop) as the target from the dropdown menu in the toolbar.
2. Click the Start button (or press F5) to build and run the app.
3. You should see the "Hello World" app window with a label and button.

Debugging on Android

To debug on Android, you need an Android device connected via USB or an Android emulator.

1. Select Android (Device) or Android (Emulator) as the target.
2. Click the Start button or press F5 to build and deploy the app.
3. Verify that the app launches and displays the "Hello World" interface.

Debugging on iOS

For iOS, you need a Mac with Xcode installed (since iOS apps cannot be run on Windows directly).

1. Connect your Mac to Visual Studio.
2. Select iOS (Device) or iOS (Simulator) as the target.
3. Click the Start button or press F5 to build and deploy the app.
4. Verify that the app launches and displays the "Hello World" interface.

Additional Tips

• Code Reusability: .NET MAUI allows you to share code across platforms. The majority of your business logic and UI code can be written once and reused.
• Styling and Themes: You can customize the appearance of your app using XAML styles and themes.
• Data Binding: .NET MAUI supports data binding, making it easy to bind UI elements to your data models.

Conclusion

Congratulations! You've successfully created and run your first .NET MAUI application. This simple app demonstrates the basics of creating a user interface using XAML, handling user interactions in code-behind, and deploying to different platforms.

As you become more comfortable with .NET MAUI, you can explore more advanced features such as data bindings, navigation, and services to build more complex applications.