Introduction by Microsoft

This cannot be done better than by the original creators at Microsoft:

• What is .NET MAUI? [1 of 8]
• How to Install .NET MAUI on a PC [2 of 8]
• NET MAUI Architecture Overview [3 of 8]
• Build .NET MAUI UI with XAML [4 of 8]
• NET MAUI Data Binding with MVVM & XAML [5 of 8]

Go to second page

Lessons learned

New stuff I didn't know so far as a takeaway from this introductory course. Basically when knowing a lot about WPF, UWP and AvaloniaUI this is not new. Still, there are some key aspects worth pointing out in this tutorial.

Property Generation

As seen in Part [5 of 8] the nuget CommunityToolkit.Mvvm will take away the usual boilerplate code from the developer and outogenerate Code. Repetitive code is writing properties that use INotifyPropertyChanged. These ones can be simplified heavily like so:

public partial class MainViewModel : ObservableObject
{
    [ObservableProperty]
    protected string text;
}

Making this a partical class that inherits ObservableObject and annotates members in this case it generates the following code (shortened):

public string Text
{
    get => text;
    set
    {
        if (!Equals(text, value))
        {
            OnTextChanging(value);
            OnPropertyChanging(KnownINotifyPropertyChangingArgs.Text);
            text = value;
            OnTextChanged(value);
            OnPropertyChanged(KnownINotifyPropertyChangedArgs.Text);
        }
    }
}

So this is cool. It has every event required for changing properties and more. It is framework agnostic.

RelayCommand Generation

Same as with properties, usually a RelayCommand for encapsulating Methods is implemented as a standard. Again CommunityToolkit.Mvvm come in handy an generates The command for us (seen in Part [5 of 8]):

[RelayCommand]
protected void Add()
{
    Text = string.Empty;
}

So this will eventually generate a RelayCommand like so:

partial class MainViewModel
{
    private RelayCommand? addCommand;
    public IRelayCommand AddCommand => addCommand ??= new RelayCommand(new Action(Add));
}

So there you go. More boilerplate code has been removed.

Builtin Dependency Injection

Another feature that comes in handy: Builtin Dependency Injection (seen in Part [5 of 8]). So actually the main application build has dependency injection functionality built in.

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    builder
        .UseMauiApp<App>()
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
        });

    // Here comes the Dependency Injection setup
    builder.Services.AddSingleton<MainPage>();
    builder.Services.AddSingleton<MainViewModel>();

    return builder.Build();
}

For example the C# class for the main view can now be injected with the view model, since it's a known type. Remember that the root elements of the injevtion hierarchy must have empty constructors!

public partial class MainPage : ContentPage
{
    public MainPage(MainViewModel vm)
    {
        InitializeComponent();
        BindingContext = vm;
    }
}

Accessing IServiceProvider

After certain types have been registered one might want to retrieve a service or type from IServiceProvider. This is where the Community Toolkit comes in handy. Let the IServiceProvider be injected into the main App class.

public partial class App : Application
{
    public App(IServiceProvider services)
    {
        InitializeComponent();

        // Regiter your IServiceProvider with community tools
        Ioc.Default.ConfigureServices(services);
    }
}

That’s it, you can now use the MVVM CommunityToolkit’s Ioc.Default implementation to access the registered Services, ViewModels and Views. It's a very simple way to use the injection classes.

Links & Resources

• YouTube Video Introduction Series of Videos by Microsoft to introduce .Net MAUI
• .NET MAUI Community Toolkit The .NET MAUI Community Toolkit is a collection of common elements for development with .NET MAUI that developers tend to replicate across multiple apps. It simplifies and demonstrates common developer tasks when building apps with .NET MAUI.
• MAUI Documentation Official documentation by Microsoft.

Second Page