How to have a Command(able) view or a Button with content in MAUI?

Question

I need a composite clickable MAUI component on which I can bind a command.

• Buttons can't contain content, only text.
• ContentViews don't have Command so I tried this way

//

public partial class BtnView : BaseContentView<BtnVm>
{
    public ICommand Command { get; set; }

    public object CommandParameter { get; set; }

    public BtnView() : base()
    {
        InitializeComponent();
    }

    public static BindableProperty CommandProperty { get; set; } = BindableProperty.Create(nameof(Command), typeof(Command), typeof(BtnView));
    public static BindableProperty CommandParameterProperty { get; set; } = BindableProperty.Create(nameof(CommandParameter), typeof(object), typeof(BtnView));
}

This way, I hoped Command property to be bindable but:

• I get an XFC0009 error when binding a Command

No property, BindableProperty, or event found for "Command", or mismatching type between value and property.

• There's no mechanism to fire it by clicking.

How am I meant to implement this kind of component?

Answer 1

Like Xamarin Forms, Maui can attach a TapGestureRecognizer to any visual element. See also TapGestureRecognizer doc.

Add this to the ContentView in xaml:

<ContentView.GestureRecognizers>
    <TapGestureRecognizer
        NumberOfTapsRequired="1"
        Tapped="OnTapped">
    </TapGestureRecognizer>
</ContentView.GestureRecognizers>

Add this to the "code behind" in xaml.cs:

protected void OnTapped(object sender, EventArgs args)
{
    // Do something here.
}