MAUI中Checkbox使用EventToCommandBehavior抛出InvalidOperationException求助

问题场景 #

通过StackLayout的ItemsSource批量渲染Checkbox，使用MAUI CommunityToolkit的EventToCommandBehavior将Checkbox的CheckedChanged事件绑定到页面ViewModel的命令。该实现在Xamarin中可正常运行，但在MAUI中页面渲染阶段抛出InvalidOperationException，异常消息为：Operation is not valid due to the current state of the object。

异常调用栈 #

at Microsoft.Maui.Controls.Binding.ApplyRelativeSourceBinding(BindableObject targetObject, BindableProperty targetProperty) in D:\a\_work\1\s\src\Controls\src\Core\Binding.cs:line 152
  at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__128_0(Object state)
  at Android.App.SyncContext.<>c__DisplayClass2_0.<Post>b__0() in /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.App/SyncContext.cs:line 36
  at Java.Lang.Thread.RunnableImplementor.Run() in /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Java.Lang/Thread.cs:line 36
  at Java.Lang.IRunnableInvoker.n_Run(IntPtr jnienv, IntPtr native__this) in /Users/runner/work/1/s/xamarin-android/src/Mono.Android/obj/Release/net6.0/android-31/mcw/Java.Lang.IRunnable.cs:line 84
  at Android.Runtime.JNINativeWrapper.Wrap_JniMarshal_PP_V(_JniMarshal_PP_V callback, IntPtr jnienv, IntPtr klazz) in /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.Runtime/JNINativeWrap

相关代码 #

XAML代码 #

<StackLayout 
    BindableLayout.ItemsSource="{Binding GameVariants}">
    <BindableLayout.ItemTemplate>
        <DataTemplate x:DataType="bindable:SelectExpansion">
            <StackLayout Orientation="Horizontal" VerticalOptions="Center">
                <CheckBox
                    IsEnabled="{Binding IsExpansion}"
                    IsChecked="{Binding Selected}">
                    <CheckBox.Behaviors>
                        <toolkit:EventToCommandBehavior
                            EventName="CheckedChanged"
                            Command="{Binding Source={RelativeSource AncestorType={x:Type vm:SelectExpansionsPageViewModel}}, Path=SelectExpansionCommand}"
                            CommandParameter="{Binding .}" />
                    </CheckBox.Behaviors>
                </CheckBox>
                <Label Text="{Binding Expansion}" VerticalTextAlignment="Center" />
            </StackLayout>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

页面后台代码 #

public partial class SelectExpansionsPage : ContentPage
{
    public SelectExpansionsPage(SelectExpansionsPageViewModel vm)
    {
        BindingContext = vm;
        InitializeComponent();
    }
}

ViewModel代码 #

public partial class SelectExpansionsPageViewModel : ObservableObject
{
    public SelectExpansionsPageViewModel(Game state)
    {
        GameVariants = new ObservableCollection<SelectExpansion>(AvailableExpansions.Expansions.Select(item =>
        {
            item.Selected = state.Expansions.Contains(item.Expansion);

            return item;
        }));
    }

    public ObservableCollection<SelectExpansion> GameVariants { get; }
    
    [RelayCommand]
    public void SelectExpansion(SelectExpansion item)
    {
        Debug.WriteLine("Select item changed");
    }
}

原因分析 #

MAUI中DataTemplate内部的RelativeSource绑定逻辑与Xamarin存在差异：当DataTemplate初始化时，其内部控件尚未完全挂载到页面的可视化树中，此时尝试通过AncestorType直接查找ViewModel类型的对象，MAUI无法正确定位到目标绑定上下文，从而触发状态无效的异常。

解决方法 #

方案1：使用x:Reference绑定页面上下文 #

给页面添加命名，通过x:Reference直接指向页面，再绑定其BindingContext中的命令：

1. 给ContentPage添加x:Name：

<ContentPage x:Class="YourNamespace.SelectExpansionsPage" x:Name="SelectExpansionsPage" ...>

2. 修改EventToCommandBehavior的Command绑定：

<toolkit:EventToCommandBehavior
    EventName="CheckedChanged"
    Command="{Binding BindingContext.SelectExpansionCommand, Source={x:Reference Name=SelectExpansionsPage}}"
    CommandParameter="{Binding .}" />

方案2：将命令传递给子项对象 #

在SelectExpansion类中添加命令属性，ViewModel初始化时将自身命令赋值给每个子项：

1. 扩展SelectExpansion类：

public class SelectExpansion
{
    // 原有属性
    public bool IsExpansion { get; set; }
    public bool Selected { get; set; }
    public string Expansion { get; set; }

    // 新增命令属性
    public ICommand SelectCommand { get; set; }
}

2. ViewModel构造函数中赋值命令：

GameVariants = new ObservableCollection<SelectExpansion>(AvailableExpansions.Expansions.Select(item =>
{
    item.Selected = state.Expansions.Contains(item.Expansion);
    item.SelectCommand = SelectExpansionCommand; // 绑定父ViewModel的命令
    return item;
}));

3. XAML中直接绑定子项的命令：

<toolkit:EventToCommandBehavior
    EventName="CheckedChanged"
    Command="{Binding SelectCommand}"
    CommandParameter="{Binding .}" />

方案3：调整RelativeSource指向ContentPage #

通过RelativeSource查找父级ContentPage，再获取其BindingContext中的命令，这种方式更兼容MAUI的可视化树查找逻辑：

<toolkit:EventToCommandBehavior
    EventName="CheckedChanged"
    Command="{Binding BindingContext.SelectExpansionCommand, Source={RelativeSource AncestorType={x:Type ContentPage}}}"
    CommandParameter="{Binding .}" />

内容的提问来源于stack exchange，提问作者Sebastian Busek