.NET MAUI中嵌套CollectionView的Grid内Button命令无法触发

问题现象 #

• 在.NET MAUI项目视图中，通过MVVM CommunityToolkit给按钮绑定ViewModel的RelayCommand，点击按钮时命令完全不触发（函数内断点从未命中）
• 尝试替换嵌套Grid为单个Grid，问题仍存在；热重载偶尔能临时生效，但重启应用后问题复现
• 移除视图中的CollectionView后按钮可正常工作，恢复CollectionView则问题重现

相关代码 #

View的XAML代码 #

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:lang="clr-namespace:LocalizationResourceManager.Maui;assembly=LocalizationResourceManager.Maui"
             xmlns:local="clr-namespace:MatchDirector.ViewModels"
             xmlns:model="clr-namespace:Models;assembly=Models"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:utils="clr-namespace:MauiUtils;assembly=MauiUtils"
             x:Class="MatchDirector.GroupsContentPage"
             Title="{lang:Translate Groups}">


    <Grid x:DataType="local:CompetitionViewModel">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="1"/>
        <ColumnDefinition Width="3*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>

    <Grid Grid.Row="0" Grid.RowSpan="2" Grid.Column="0">
        <CollectionView ItemsSource="{Binding GroupList}" SelectedItem="{Binding SelectedGroup, Mode=TwoWay}" SelectionMode="Single">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="model:Group">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Selected">
                                    <VisualState.Setters>
                                        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray700}}"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Label VerticalTextAlignment="Center" HorizontalTextAlignment="Start" Padding="15, 10" FontSize="32" Text="{Binding .}"/>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Grid>

    <BoxView WidthRequest="1" BackgroundColor="{StaticResource Gray100}" Grid.Row="0" Grid.RowSpan="2" Grid.Column="1"/>

    <Grid Grid.Row="0" Grid.Column="2">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <CollectionView x:Name="CompetitorsCV" Grid.Row="0" ItemsSource="{Binding CompetitorsOfGroup}" SelectedItem="{Binding SelectedCompetitor, Mode=TwoWay}" SelectionMode="Single">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="model:Competitor">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Selected">
                                    <VisualState.Setters>
                                        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray700}}"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Label Padding="15, 10" VerticalTextAlignment="Center" HorizontalTextAlignment="Start" FontSize="28">
                            <Label.FormattedText>
                                <FormattedString>
                                    <Span Text="{Binding FirstName}"/>
                                    <Span Text=" "/>
                                    <Span Text="{Binding LastName}"/>
                                </FormattedString>
                            </Label.FormattedText>
                        </Label>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

    </Grid>

    <Grid Grid.Row="1" Grid.Column="2" >
        <Button Text="Test" Command="{Binding DisqualifySelectedCommand}"/>
    </Grid>

</Grid>
        

    </Grid>

</ContentPage>

ViewModel中的命令代码 #

[RelayCommand]
public async Task DisqualifySelected()
{
    Console.WriteLine("Hello");
    return;
}

临时解决方案（破坏MVVM结构） #

在View的代码后置文件中通过Clicked事件手动调用：

private void Button_Clicked(object sender, EventArgs e)
{
    if (BindingContext is CompetitionViewModel vm)
    {
        vm.DisqualifySelected();
    }
}

问题根源与正确解决方案 #

问题根源 #

原XAML布局存在多余的闭合Grid标签：最外层只声明了一个<Grid x:DataType="local:CompetitionViewModel">，但代码末尾却有两个</Grid>，导致按钮所在的Grid被排除在正确的BindingContext作用域之外。当存在CollectionView时，数据模板的上下文会干扰绑定解析，使得按钮无法找到ViewModel中的命令；而移除CollectionView时，绑定上下文的解析逻辑发生变化，按钮又能临时识别到命令。

正确解决方案 #

删除XAML中多余的那个</Grid>标签，修正后的布局末尾部分如下：

<Grid Grid.Row="1" Grid.Column="2" >
        <Button Text="Test" Command="{Binding DisqualifySelectedCommand}"/>
    </Grid>

</Grid>

</ContentPage>

修正后，按钮所在的Grid处于正确的BindingContext作用域内，点击按钮即可正常触发ViewModel中的RelayCommand，无需破坏MVVM结构。

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