The easiest and best MVVM toolkit also for .NET MAUI.

Guys, this is unbelievable. Microsoft Community toolkit has added a tool that means you never have to worry about which MVVM framework you’re voting for. None can be as good as this one. It can be used not only for .NET MAUI, but also for other technologies (e.g. WPF). But before I sing your praises, let’s look at what this package has to offer us:

Introducing CommunityToolkit.Mvvm

First of all, you don’t need to implement INotifyPropertyChanged in ViewModels. And by that I mean not even its parent classes. Since this component is a code generator, it’s enough to make your classes partial, and the INotifyPropertyChanged implementation is done by it, instead of you. This means that your class will be supplemented with the best implementation so that you can easily use common methods like SetProperty in the setter branch of your properties. Okay, okay, but almost any MVVM framework could do this, and you didn’t even need to use a code generator, just simply derive from a parent class. I’ll do you one better: what if you didn’t have to write the setter and getter branches of the properties at all? What if the toolkit made them itself? If you could implement a property declaration from two lines of code?
Well, that’s what makes this toolkit good: It does all that for you.

And if that’s not enough, you don’t even have to bother creating Commands. The toolkit automatically creates a command for you from your methods.
But let’s see how you can use it.

Use CommunityToolkit.MVVM in .NET MAUI

Let’s see what my ViewModel looked like before I used this toolkit:

namespace Carloo.ViewModels.SignInPage
{
    public partial class SignInPageViewModel : BaseViewModel
    {
        private Command signInCommand;
        public Command SignInCommand
        {
            get { return signInCommand ?? (signInCommand = new Command(() => _ = SignIn(), () => true)); }
        }

        private string userName;
        public string UserName
        {
            get { return userName; }
            set { SetProperty(ref userName, value, nameof(UserName)); }
        }

        private string password;
        public string Password
        {
            get { return password; }
            set { SetProperty(ref password, value, nameof(Password)); }
        }

        public SignInPageViewModel()
        {

        }

        private void SignIn()
        {
            try
            {
                ...
            }
            catch (Exception ex)
            {
                // todo error
            }
        }
    }
}

And now let’s see what this Toolkit can do with source code to make life easier:

namespace Carloo.ViewModels.SignInPage
{
    [INotifyPropertyChanged]
    public partial class SignInPageViewModel
    {
        [ObservableProperty]
        private string userName;

        [ObservableProperty]
        private string password;

        public SignInPageViewModel()
        {

        }

        [ICommand]
        private void SignIn()
        {
            try
            {
                ...
            }
            catch (Exception ex)
            {
                // todo error
            }
        }
    }
}

In other ways, however, Resharper also had the tools to provide similar simplicity for implementing MVVM. But if I remember correctly, it didn’t have all that. Like, say, that you could release PropertyChanged on a completely unrelated property, even with an attribute declaration, without writing code.

        [ObservableProperty]
        [AlsoNotifyFor(nameof(CanSignIn))]
        private string _userName;

        [ObservableProperty]
        [AlsoNotifyFor(nameof(CanSignIn))]
        private string _password;


        public bool CanSignIn { get => !string.IsNullOrWhiteSpace(UserName) && !string.IsNullOrWhiteSpace(Password); }

Learn more

I am very excited about using this tool in production environments. If you want to learn more about it, please visit the following pages:
https://devblogs.microsoft.com/ifdef-windows/announcing-net-community-toolkit-v8-0-0-preview-1/
https://docs.microsoft.com/en-gb/windows/communitytoolkit/mvvm/introduction

This content has 2 years. Some of the information in this post may be out of date or no longer work. Please, read this page keeping its age in your mind.

.NET MAUI: App.xaml, MainPage.xaml is missing from the project

.NET MAUI is still in beta so there are no final project templates to create a new MAUI application. The current project template omits the App.xaml, and MainPage.xaml files from the project (at least on mac), so we have to add them ourselves.

Enable on Visual Studio, to show all files

Enable showing all files

And select the missing files, then right click on them, and add them to the project.

Include the missing files to the project
This content has 2 years. Some of the information in this post may be out of date or no longer work. Please, read this page keeping its age in your mind.

Run .NET MAUI apps with Visual Studio for Mac

VS for Mac 17.0 Preview version is not yet supporting MAUI applications. But you can run them on macOS too, but you will need a terminal window for it!

MAUI projects can not be set as a runnable project (yet)
.NET 6 Xamarin and MAUl projects are not supported with this version of Visual Studio. The included target frameworks are not supported: net6.0-android|net6.0-ios|net6.0-maccatalyst

If you are not familiar, how to set up your environment to start developing with .NET newest technology named MAUI, then read this article by me: https://www.banditoth.hu/2021/12/29/setup-net-maui-project-on-macos/

Build and run on macOS

Open up a terminal, and navigate next to your .sln file. Give out the following command:

dotnet build YourSolutionName -t:Run -f net6.0-maccatalyst

This will run your application on macOS. If you wish, you can change the last parameter to net6.0-android or net6.0-ios too.

This content has 2 years. Some of the information in this post may be out of date or no longer work. Please, read this page keeping its age in your mind.

Upgrading Xamarin.Forms projects to .NET MAUI with upgrade assistant

MAUI is still in preview state, so the production apps are not recommended to upgrade to .NET MAUI. But it is important to be open to new technology, so take some time to review the update.

It’s possible that by the time you read this post, you’ll be able to convert a MAUI projects from UI, but it’s not currently an available feature for me.

What you will need

  • Windows machine
  • Visual Studio 2022 installed

Install required tools for MAUI

Open a command prompt and give out the following command:

dotnet workload install maui

If you have installed maui already, then you wont need to run this command again.

Install upgrade-assistant

There is a tool developed by Microsoft, not originally for MAUI, but because it is based on a fully extensible model, it has been made available for MAUI projects. Xamarin.Forms projects can be translated to the new version of the projects with this app:
https://dotnet.microsoft.com/en-us/platform/upgrade-assistant

dotnet tool install --global upgrade-assistant

Use the upgrade assistant

It is important to note that this application cannot independently translate Xamarin.Forms apps to MAUI. It only helps us in the upgrade process.

That’s why the app asks for constant instructions, so we can’t leave the machine running while we make coffee πŸ™‚

Let’s change the directory of your command prompt to the directory where you store the .sln file

upgrade-assistant upgrade SolutionName.sln

Watch out for the output of the console. If everything goes well, your solution can be transformed to maui without issues.

In the header section of the console output, you will see what steps are required (or suggested) in order to complete the migration. You can decide what to do with the next step: Apply, skip, or do something else with it. If everything goes well, you will only need to press apply.

The output of the upgrade-assistant

Once you have finished the upgrade assistant process, you can see the changes. Mostly in source codes and project files.

Namespace changes

This content has 2 years. Some of the information in this post may be out of date or no longer work. Please, read this page keeping its age in your mind.

Setup .NET MAUI project on macOS

You may also be interested to know how Xamarin.Forms has grown and who will be its successor. I was interested too, so I took the time between the two holidays to test the .NET MAUI developed by Microsoft, so you’ll get a couple of articles about it. First, I’ll show you the installation and how I managed it under macOS.

It’s possible that by the time you read this post, you’ll be able to create a MAUI project from UI, but it’s not currently an available feature for me. However, a lot of the tutorials were outdated because .NET 6 with VisualStudio2022 has been released, and xCode 13 is not in beta either, so you can skip some unnecessary installations.

But what is definitely needed

  • macOS capable device,
  • Visual Studio 2022,
  • xCode 13.

Get started on macOS

First thing first, fire up your macOS terminal, because we will start working in that.

If you havent installed Redth’s MAUI check tool yet, lets do this with the command

dotnet tool install -g redth.net.maui.check

Once it has been successfully installed, you will see the following output

You can invoke the tool using the following command: maui-check
Tool 'redth.net.maui.check' (version '0.10.0') was successfully installed.

So it says, that you can invoke the maui-check command from now on, but it’s a lie, since some things of ZSH terminal, we need to manually fresh up the terminals internal things, otherwise the maui-check command will fail with “Unknown command”.

export PATH=$HOME/.dotnet/tools:$PATH

From now on, you can freely invoke the

maui-check

Which results you the following output:

      _   _   _____   _____     __  __      _      _   _   ___                  
     | \ | | | ____| |_   _|   |  \/  |    / \    | | | | |_ _|                 
     |  \| | |  _|     | |     | |\/| |   / _ \   | | | |  | |                  
  _  | |\  | | |___    | |     | |  | |  / ___ \  | |_| |  | |                  
 (_) |_| \_| |_____|   |_|     |_|  |_| /_/   \_\  \___/  |___|                 
                                                                                
? .NET MAUI Check v0.10.0.0 ?
────────────────────────────────────────────────────────────────────────────────
This tool will attempt to evaluate your .NET MAUI development environment.
If problems are detected, this tool may offer the option to try and fix them for
you, or suggest a way to fix them yourself.

Thanks for choosing .NET MAUI!
────────────────────────────────────────────────────────────────────────────────
⏳ Synchronizing configuration... ok
⏳ Scheduling appointments... ok

It can fix a lot of things for you automatically, watch the output carefully, it prompts that you want to fix the issues or not.

To be honest, i don’t know this command will do the work any of the things above, but if you run this, after doing the things above, its also fine:

sudo dotnet workload install maui

Create a new MAUI project

Lets find a suitable place for our new project, then give out the following command:

dotnet new maui -n YourMauiProjectName

From now on, you can leave the terminal, and start editing the project in your favourite IDE, example the VS2022

Run your very first application

Since the projects are cannot be set as run projects in Visual Studio 2022 yet, we need to run our apps from the command line with this command

dotnet build YourMauiProjectName -t:Run -f net6.0-maccatalyst

This will run your app with mac Catalyst compilation, but you can create Android and iOS versions also with this command

This content has 2 years. Some of the information in this post may be out of date or no longer work. Please, read this page keeping its age in your mind.