.NET MAUI commands never get executed

Question

I have a view in .NET MAUI that has some buttons like this:

<Button Text="d2" Command="{Binding RollCommand}" CommandParameter="2" />
<Button Text="d4" Command="{Binding RollCommand}" CommandParameter="4" />
<Button Text="d6" Command="{Binding RollCommand}" CommandParameter="6" />
<Button Text="d8" Command="{Binding RollCommand}" CommandParameter="8" />
<Button Text="d10" Command="{Binding RollCommand}" CommandParameter="10" />
<Button Text="d12" Command="{Binding RollCommand}" CommandParameter="12" />
<Button Text="d20" Command="{Binding RollCommand}" CommandParameter="20" />

The data context is set up for the view above:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DiceRoller2"
             x:Class="DiceRoller2.MainPage">

    <ContentPage.BindingContext>
        <local:DiceRollerViewModel />
    </ContentPage.BindingContext>

    // ...

And the command is defined in this view model:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;
using CommunityToolkit.Mvvm.ComponentModel;

namespace DiceRoller2
{
    [INotifyPropertyChanged]
    public partial class DiceRollerViewModel
    {
        public DiceRollerViewModel()
        {
            RollCommand = new Command<int>(Roll);
        }

        public int Dice { get; set; }

        public string Result { get; set; }

        public ICommand RollCommand { get; set; }

        public void Roll(int sides)
        {
            var rolls = new List<int>();
            for (var i = 0; i < Dice; i++)
            {
                rolls.Add(Random.Shared.Next(1, sides + 1));
            }
            Result = $"Rolled {Dice}d{sides} and got {string.Join(", ", rolls)} for a total of {rolls.Sum()}.";
        }
    }
}

However, when I run the app, clicking the buttons does nothing; even if I set a breakpoint in the Roll method, it never gets hit, even though a breakpoint in the view model's constructor does get hit.

What could I be missing? Why is the command to roll the dice not executing? The WPF data binding debugging options in Visual Studio don't seem to apply to MAUI, unfortunately...

Answer 1

Firstly, it is recommended that we should use CommunityToolkit.Mvvm when using MVVM in your MAUI project.

And then I think the issue is related to the CommandParameter, it should be a String type instead of Integer. You can refer to my below code snippets:

1. Install the nuget package CommunityToolkit.Mvvm in your project.

2. View: MainPage.xaml

   <Button WidthRequest="100" HeightRequest="50" Text="Add" Command="{Binding RollCommand} " CommandParameter="22"></Button>

In code-behind, don't forget to use binding with ViewModel:

    public MainPage()
    {
        InitializeComponent();
        BindingContext = new DiceRollerViewModel();
    }

3. ViewModel: DiceRollerViewModel.cs

When using MVVM, the VM should implement the ObservableObject as below:

using CommunityToolkit.Mvvm.ComponentModel;
using System.Diagnostics;
using System.Windows.Input;

namespace MauiApptest01
{
    public class DiceRollerViewModel : ObservableObject
    {
        public ICommand RollCommand { get; set; }

        public DiceRollerViewModel()
        {

            RollCommand = new Command<string>(Roll);
        }
        private void Roll(string sides)
        {
             Debug.WriteLine("Answer: This is a test "+ sides);
        }
    }
}

4. When clicking the button, the command is being triggered in your debug output like below :

Answer: This is a test22