Xamarin CollectionView命令与选中高亮无法同时生效问题求助

原项目使用ListView结合Xamarin Community Toolkit的EventToCommandBehavior和自定义ViewCell实现搜索功能，通过自定义渲染器修改ViewCell背景色，但在Mac适配iOS场景下该方案失效，单元格背景色无法修改。

切换为CollectionView后，出现两种互斥问题：

• 给Grid添加TapGestureRecognizer时，页面底部按钮可正常启用，但CollectionView中项的选中高亮不生效，用户无法确认选中状态
• 移除TapGestureRecognizer，改用CollectionView内置的SelectionMode="Single"、SelectionChangedCommand配置时，项的选中高亮生效，但页面底部按钮无法启用

商店IAP页面存在类似问题：购买确认弹窗弹出前，IAP项从未显示高亮状态。

相关代码 #

XAML代码 #

<!--Faction Search Results-->
<Frame Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="6" BackgroundColor="Black" BorderColor="White" CornerRadius="5">
    <CollectionView ItemsSource="{Binding FactionItems}"
                    BackgroundColor="Transparent">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid x:DataType="Data:Faction" BackgroundColor="Black">
                    <Grid.GestureRecognizers>
                        <TapGestureRecognizer 
                            NumberOfTapsRequired="1"
                            Command="{Binding Source={RelativeSource AncestorType={x:Type local:FactionTopPageViewModel}}, Path=ItemTapped}"        
                            CommandParameter="{Binding .}">
                        </TapGestureRecognizer>
                    </Grid.GestureRecognizers>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="{markups:OnScreenSize DefaultSize='12', iPod='20', iPhoneSE='20', iPhoneXR='20', iPhoneX='20', iPhone13='25', iPhone7p='25', iPhone11pm='25', iPhone13pm='16', 
                            iPadMini='35', iPad9p7='35', iPad='35', iPadAir='35', iPad11='35', iPad12p9='40', Nexus1='20',  NexusR='25', Nexus7R='30', Pixel2R='25', Pixel3R='25', GalaxyS8='25', Nexus6P='25', Pixel3XL='25', PixelC='40'}" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Label Padding="10,5" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" Text="{Binding FactionName}" HorizontalOptions="Start" VerticalTextAlignment="End" FontAttributes="Bold"
                           FontSize="{markups:OnScreenSize DefaultSize='12', iPod='15', iPhoneSE='15', iPhoneXR='18', iPhoneX='19', iPhone13='19', iPhone7p='19', iPhone11pm='19', iPhone13pm='16', 
                            iPadMini='30', iPad9p7='30', iPad='32', iPadAir='32', iPad11='34', iPad12p9='34', Nexus1='14',  NexusR='14', Nexus7R='22', Pixel2R='20', Pixel3R='20', GalaxyS8='20', Nexus6P='18', Pixel3XL='18', PixelC='34'}" />
                    <Label Padding="0,5" Grid.Row="0" Grid.Column="4" Grid.ColumnSpan="2" Text="{Binding NumberMembersString}" HorizontalOptions="Center" VerticalTextAlignment="End" FontAttributes="Bold"
                           FontSize="{markups:OnScreenSize DefaultSize='12', iPod='15', iPhoneSE='15', iPhoneXR='18', iPhoneX='19', iPhone13='19', iPhone7p='19', iPhone11pm='19', iPhone13pm='16', 
                            iPadMini='30', iPad9p7='30', iPad='32', iPadAir='32', iPad11='34', iPad12p9='34', Nexus1='14',  NexusR='14', Nexus7R='22', Pixel2R='20', Pixel3R='20', GalaxyS8='20', Nexus6P='18', Pixel3XL='18', PixelC='34'}"/>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup Name="CommonStates">
                            <VisualState Name="Normal"></VisualState>
                            <VisualState Name="Selected">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="#ae00ff"/>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</Frame>

ViewModel代码 #

public Command<Faction> ItemTapped { get; }
public FactionTopPageViewModel()
{
    ItemTapped = new Command<Faction>(OnItemSelected);
}
private void OnItemSelected(Faction faction)
{
    if (faction == null)
    {
        SelectedItem = null;
        DisableFactionButtons();
        return;
    }
    EnableFactionButtons();
    SelectedItem = faction;
}

方案1：使用CollectionView内置选择机制（推荐） #

此方案利用CollectionView原生选择能力，同时确保按钮状态逻辑正常触发：

1. 修改XAML配置：移除Grid上的TapGestureRecognizer，给CollectionView添加内置选择相关属性：

<CollectionView ItemsSource="{Binding FactionItems}"
                BackgroundColor="Transparent"
                SelectionMode="Single"
                SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                SelectionChangedCommand="{Binding SelectionChangedCommand}">

2. 更新ViewModel逻辑：替换原有ItemTapped命令，新增SelectionChangedCommand处理选中变更及按钮状态：

public ICommand SelectionChangedCommand { get; }
public Faction SelectedItem { get; set; }

public FactionTopPageViewModel()
{
    SelectionChangedCommand = new Command(HandleSelectionChanged);
}

private void HandleSelectionChanged()
{
    if (SelectedItem == null)
    {
        DisableFactionButtons();
    }
    else
    {
        EnableFactionButtons();
    }
}

3. 保留VisualState配置：原Grid中的VisualStateManager配置无需修改，CollectionView选中时会自动触发Selected状态，实现高亮效果。

方案2：手动维护选中状态（适配非CollectionView场景） #

若需保留TapGestureRecognizer，可通过给模型添加选中属性，手动控制高亮状态：

1. 扩展Faction模型：添加IsSelected属性并实现INotifyPropertyChanged：

public class Faction : INotifyPropertyChanged
{
    private bool _isSelected;
    public bool IsSelected
    {
        get => _isSelected;
        set
        {
            _isSelected = value;
            OnPropertyChanged(nameof(IsSelected));
        }
    }

    // 原有属性（如FactionName、NumberMembersString）...

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 修改XAML的VisualState配置：将Selected状态绑定到IsSelected属性：

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup Name="SelectionStates">
        <VisualState Name="Unselected">
            <VisualState.Setters>
                <Setter Property="BackgroundColor" Value="Black"/>
            </VisualState.Setters>
        </VisualState>
        <VisualState Name="Selected">
            <VisualState.StateTriggers>
                <DataTrigger TargetType="Grid" Binding="{Binding IsSelected}" Value="True"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Property="BackgroundColor" Value="#ae00ff"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

3. 更新ViewModel的ItemTapped逻辑：维护唯一选中项，确保高亮状态正确切换：

public ObservableCollection<Faction> FactionItems { get; }
public Command<Faction> ItemTapped { get; }

public FactionTopPageViewModel()
{
    ItemTapped = new Command<Faction>(OnItemSelected);
}

private void OnItemSelected(Faction faction)
{
    if (faction == null)
    {
        DisableFactionButtons();
        return;
    }
    // 重置所有项的选中状态，确保仅当前项高亮
    foreach (var item in FactionItems)
    {
        item.IsSelected = item == faction;
    }
    EnableFactionButtons();
    SelectedItem = faction;
}

IAP页面通用解决思路 #

IAP页面的高亮问题可直接复用上述两种方案：

• 若用CollectionView展示IAP项，优先使用方案1的内置选择机制
• 若采用其他布局（如StackLayout），使用方案2的手动维护选中状态方式实现高亮

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