Learn .NET MAUI - Full Course for Beginners | Build cross-platform apps in C#

Introduction

This tutorial is designed to guide you through the basics of .NET MAUI (Multi-platform App UI), enabling you to build beautiful native cross-platform applications for iOS, Android, macOS, and Windows using C#. By following this step-by-step guide, you will learn how to design user interfaces, implement the MVVM (Model-View-ViewModel) pattern, navigate between pages, and access platform features.

Step 1: Install .NET MAUI

Visit the official .NET MAUI website to download and install the required tools

• .NET MAUI Website
• Ensure you have Visual Studio installed with the .NET MAUI workload.
• Follow the installation instructions specific to your operating system (Windows or macOS).

Step 2: Create Your First .NET MAUI App

• Open Visual Studio and create a new project.
• Select "MAUI App" from the project templates.
• Name your project and choose a location to save it.
• Click “Create” to generate the project structure.

Step 3: Understand Project Architecture

Get familiar with the folder structure

• Platforms: Contains platform-specific code and resources.
• Resources: Contains images and styles used in your app.
• Views: Holds the XAML files for your app’s user interfaces.
• Review the App.xaml and MainPage.xaml files to see the starting point of your application.

Step 4: Implement MVVM Pattern

• Create models to represent your data.

Create a ViewModel class

• Implement INotifyPropertyChanged to notify the view of property changes.
• Example code:

  public class SampleViewModel : INotifyPropertyChanged
  {
      private string _sampleProperty;
      public string SampleProperty
      {
          get => _sampleProperty;
          set
          {
              _sampleProperty = value;
              OnPropertyChanged(nameof(SampleProperty));
          }
      }
      public event PropertyChangedEventHandler PropertyChanged;
      protected void OnPropertyChanged(string propertyName) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
  }
  

Step 5: Build User Interfaces with XAML

• Open MainPage.xaml and start designing your UI.
• Use layouts such as StackLayout, Grid, and CollectionView for organizing your content.
• Example of a simple layout:

  <StackLayout>
      <Label Text="{Binding SampleProperty}" />
      <Entry Text="{Binding SampleProperty}" />
  </StackLayout>
  

Step 6: Navigation Between Pages

• Create additional pages as needed (e.g., SecondPage.xaml).

Implement navigation using the Shell or NavigationPage

• Example of navigating to another page:

  await Navigation.PushAsync(new SecondPage());
  

Step 7: Access Platform Features

Use platform-specific APIs, such as geolocation

• Add necessary permissions in the AndroidManifest.xml or equivalent for other platforms.
• Example of accessing geolocation:

  var location = await Geolocation.GetLastKnownLocationAsync();
  

Step 8: Implement Dark and Light Themes

• Define resources for light and dark themes in App.xaml.
• Switch themes based on user preferences:

  <Application.Resources>
      <ResourceDictionary>
          <Style TargetType="Label">
              <Setter Property="TextColor" Value="Gray" />
          </Style>
      </ResourceDictionary>
  </Application.Resources>
  

Conclusion

By following these steps, you have gained the foundational knowledge needed to start building cross-platform applications with .NET MAUI. As you progress, consider exploring more advanced topics such as HTTP REST calls, data binding with the .NET Community Toolkit, and integrating platform-specific functionalities. For further learning, check out the provided resources and documentation linked above. Happy coding!