Binding to command defined in viewmodel not working using CommunityToolkit.Maui

Question

I have a MAUI app that I am using CommunityToolkit.Maui to implement the MVVM pattern. I have the XAML markup with the code-behind and a view model in which I define a set of methods attributed with [RelayCommand]. In the XAML, I am creating a label with a label gesture recognizer, and in the gesture recognizer I use Tapped="{Binding actionMethod}". The Content definition includes the reference to the viewModel as this:

         xmlns:viewModels="clr-namespace:MyProject.Maui.ViewModels"

         x:DataType="viewModels:OrderDashboardViewModel"

I am getting an error stating :

Error XFC0009: No property, BindableProperty, or event found for "Tapped", or mismatching type between value and property. (XFC0009)

When I start the {Binding... statement, intellisense offers the name of the relay command as an option but when I try to compile it errors out with those errors.

What am I missing?

Answer 1

Hello,

Firstly, please add command to the <TapGestureRecognizer Command="{Binding actionMethodCommand}" />, not add the command to the tap event directly. And add Command in the end of actionMethod manually.

Then, if you want to binding the viewmodel, please do not set DataType, you can set bindingContext in the XAML like following code.

<ContentPage 

...
              xmlns:viewModels="clr-namespace:MyProject.Maui.ViewModels"
             >
    <ContentPage.BindingContext>
        <viewModels:OrderDashboardViewModel />
    </ContentPage.BindingContext>
    <VerticalStackLayout>
        <Label
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center"
            HorizontalOptions="Center" >
            <Label.GestureRecognizers>
                <TapGestureRecognizer
                    Command="{Binding actionMethodCommand}"
                    />
            </Label.GestureRecognizers>
        </Label>
    </VerticalStackLayout>
</ContentPage>

Here is my tested viewmodel.

public partial class OrderDashboardViewModel : ObservableObject
{
    [RelayCommand]

    public void actionMethod( )
    {
        Debug.WriteLine("Executed");

    }
}

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.