Binding IsEnabled (with Command) OR CanExecute (with RelayCommandAttribute) for Button in a custom control?

[MDale-RAC]

Preface: I am using the CommunityToolkit.Maui and CommunityToolkit.Mvvm NuGet packages

---

I have encountered this issue a few times now, and was wondering what the recommended solution or documentation to follow would be.

I have a visual component (control), which has a BindableProperty for an ICommand for a button (binding to the Command property).

I was hoping to also bind the IsEnabled for this button to a BindableProperty.

For example:

ViewWithButton.XAML:

<ContentView
	xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:controls="clr-namespace:Namespace.Controls"
	x:Name="this"
	x:Class="Namespace.Controls.ViewWithButton"
	x:DataType="controls:ViewWithButton" >
	<Frame
		BindingContext="{x:Reference this}" >
		[...]
		<Button
			Command="{Binding ButtonCommand}"
			IsEnabled="{Binding IsButtonEnabled}"
			Text="DoThing" />
	</Frame>
</ContentView>

(Code-Behind left out for brevity; random thought: would order matter here too for bindings?)

MainPage.XAML

<ContentPage
	xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:controls="clr-namespace:Namespace.Controls"
	xmlns:viewModels="clr-namespace:Namespace.ViewModels"
	x:Class="Namespace.Views.MainPage"
	x:DataType="viewModels:MainViewModel" >
	<ScrollView >
		<VerticalStackLayout >
			[...]
			<controls:ViewWithButton
				ButtonCommand="{Binding ButtonCommand}"
				IsButtonEnabled="{Binding IsButtonEnabled}" />
			[...]
		</VerticalStackLayout>
	</ScrollView>
</ContentPage>

(Code-Behind left out for brevity; MainViewModel injected and set as BindingContext in constructor; no other logic is present here)

MainViewModel.cs

using ObservableObject = CommunityToolkit.Mvvm.ComponentModel.ObservableObject;
using ObservablePropertyAttribute = CommunityToolkit.Mvvm.ComponentModel.ObservablePropertyAttribute;
using RelayCommandAttribute = CommunityToolkit.Mvvm.Input.RelayCommandAttribute;

namespace Namespace.ViewModels
{
	public partial class MainViewModel: ObservableObject
	{
		[ObservableProperty]
		private bool _isbuttonEnabled;

		[...]
		
		public MainViewModel()
		{
			IsButtonEnabled = false;
		}

		[...]

		[RelayCommand]
		private void Button()
		{
			// Execute Button Logic!
			// For instance:
			IsButtonEnabled = !IsButtonEnabled
			// Button disabled after 2 clicks!
		}
		
		[...]
	}
}

Hooking up the bindable properties to the ContentPage and the respective ViewModel, the IsEnabled (set to false) appears to be ignored. If I explicitly update the value (toggle on, toggle back off), it DOES disable the button, but the initial state is not reflected (button is definitely enabled).

In the custom control, the Command is defined before the IsEnabled.
Same for the ContentPage it is the same, the command is bound before IsEnabled.

---

After some searching, I've seen some other resources that say that:

1. Order DOES matter, Command should be bound before IsEnabled (And if that is followed for a ContentPage without custom controls - e.g. one file definition - I have had success with this approach)
2. It seems as though one should use the CanExecute (from the ICommand) (This brings me to my second caveat below)

---

When using MVVM, I define my commands in my view model using the [RelayCommand] attribute (see above).

With this type of definition, how would I go about customizing the CanExecute aspect of this RelayCommand?

---

Naively, I would like to keep the Command as the logic for the action taken when the button is clicked, and to use IsEnabled as the logic to dictate whether or not the user CAN interact with the button at all.

Given the above, does anyone have any recommendations/suggestions/comments or documentation to provide, in an effort to find some solutions or to otherwise address these points of confusion/issues I have encountered?

Many many thanks in advance!