'ViewModel' is not usable as an object element because it is not public or does not define a public parameterless constructor or a type converter MAUI

Question

I am not sure that I understand MVVM correctly. This is what I did:

BaseViewModel

public class BaseViewModel : ObservableValidator
{
    public event NotifyWithValidationMessages? ValidationCompleted;
    
    public BaseViewModel() : base()
    {}
    
    public virtual ICommand ValidateCommand => new RelayCommand(() =>
    {
        ClearErrors();
    
        ValidateAllProperties();
    
        var validationMessages = this.GetErrors()
                                     .ToDictionary(k => k.MemberNames.First().ToLower(), v => v.ErrorMessage);
    
        ValidationCompleted?.Invoke(validationMessages);
    });
    
    [IndexerName("ErrorDictionary")]
    public ValidationStatus this[string propertyName]
    {
        get
        {
            var errors = this.GetErrors()
                             .ToDictionary(k => k.MemberNames.First(), v => v.ErrorMessage) ?? new Dictionary();
    
            var hasErrors = errors.TryGetValue(propertyName, out var error);
            return new ValidationStatus(hasErrors, error ?? string.Empty);
        }
    }
}

RegisterModel

public class RegisterModel : BaseViewModel
{
    [Required(ErrorMessage = "User Name is required")]
    public string? Username { get; set; }
    
    [EmailAddress]
    [Required(ErrorMessage = "Email is required")]
    public string? Email { get; set; }
    
    [Required(ErrorMessage = "Password is required")]
    [DataType(DataType.Password)]
    public string? Password { get; set; }
    
    public RegisterModel() : base()
    {
    }
}

RegisterViewModel

public class RegisterViewModel : RegisterModel
{
    private readonly ISecurityClient securityClient;
    
    public RegisterViewModel(ISecurityClient securityClient) : base()
    {
        this.securityClient = securityClient;
    }
    
    public ICommand NavigateToLoginPageCommand => new RelayCommand(async() =>
        await Shell.Current.GoToAsync(PageRoutes.LoginPage, true)
    );
    
    public ICommand RegisterCommand => new RelayCommand(OnRegisterCommand);
    
    private async void OnRegisterCommand()
    {
        if (this?.HasErrors ?? true)
            return;
    
        var requestParam = this.ConvertTo();
    
        var success = await securityClient.RegisterAsync(requestParam);
    
        if (!success)
        {
            await Application.Current.MainPage.DisplayAlert("", "Register faild", "OK");
            return;
        }
        await Application.Current.MainPage.DisplayAlert("", "Registered successfully.
You can now login.", "OK");
    
        await Shell.Current.GoToAsync(PageRoutes.LoginPage, true);
    }
}

RegisterPage (code-behind)

public partial class RegisterPage : ContentPage
{
    public RegisterViewModel ViewModel => BindingContext as RegisterViewModel;
    
    public RegisterPage(RegisterViewModel viewModel)
    {
        InitializeComponent();
    
        BindingContext = viewModel;
        viewModel.ValidationCompleted += OnValidationHandler;
    }
    
    private void OnValidationHandler(Dictionary validationMessages)
    {
        if (validationMessages is null)
            return;
    
        lblValidationErrorUserName.Text = validationMessages.GetValueOrDefault("username");
        lblValidationErrorEmail.Text = validationMessages.GetValueOrDefault("email");
        lblValidationErrorPassword.Text = validationMessages.GetValueOrDefault("password");
    }
}

When I add the following line to the XAML:

I get the the following error: 'RegisterViewModel' is not usable as an object element because it is not public or does not define a public parameterless constructor or a type converter.

Whole XAML:

I registered the page and the view model in DI container.

//viewModels
builder.Services.AddSingleton();

//pages
builder.Services.AddSingleton();

Any guidance is welcome.

Julian · Accepted Answer

Problem

Your problem is that you're trying to instantiate a ViewModel without passing arguments to the constructor although your ViewModel only defines a constructor with a required parameter. You either need to define a parameterless constructor or provide arguments to the constructor.

Here is your constructor:

public class RegisterViewModel : RegisterModel
{
    private readonly ISecurityClient securityClient;

    public RegisterViewModel(ISecurityClient securityClient) : base()
    {
        this.securityClient = securityClient;
    }

    //...
}

You're trying to instantiate it without arguments here:

This instantiation is unnecessary, because you're already setting the BindingContext in the code-behind using the ViewModel instance that is passed in via dependency injection:

public partial class RegisterPage : ContentPage
{
    public RegisterViewModel ViewModel => BindingContext as RegisterViewModel;

    public RegisterPage(RegisterViewModel viewModel)
    {
        InitializeComponent();

        BindingContext = viewModel;
        viewModel.ValidationCompleted += OnValidationHandler;
    }

    //...
}

Solution

You can safely remove the code that sets the BindingContext in the XAML:

And make sure that the required argument somehow gets passed into the ViewModel's constructor.

Here are a few ways to do this:

var registerVm = new RegisterViewModel(securityClient);
builder.Services.AddSingleton(registerVm);

You could also pass the ISecurityClient into the IoC container:

builder.Services.AddSingleton(new SecurityClient());
builder.Services.AddSingleton();

Alternatively, depending on how the ISecurityClient implementation is defined, assuming it's something like "SecurityClient", you could also register it like this (avoiding any constructor calls altogether provided that the constructor of "SecurityClient" doesn't take any parameters):

builder.Services.AddSingleton();
builder.Services.AddSingleton();

This should automatically resolve the constructor with the required argument.

Further notes

If you want Intellisense support for your ViewModel inside your XAML, you could add compiled bindings to your XAML like this (using the x:DataType attribute):

or use design-time XAML.

'ViewModel' is not usable as an object element because it is not public or does not define a public parameterless constructor or a type converter MAUI

Answers (1)

Problem

Solution

Further notes

Related Questions

&#39;ViewModel&#39; is not usable as an object element because it is not public or does not define a public parameterless constructor or a type converter MAUI

Answers (1)

Problem

Solution

Further notes

Related Questions

'ViewModel' is not usable as an object element because it is not public or does not define a public parameterless constructor or a type converter MAUI