Xamarin Forms中使用MVVM如何仅为CollectionView选中的Frame设置颜色

问题根源 #

你当前把背景色属性定义在全局的页面ViewModel中，所有CollectionView的Item都绑定了同一个全局属性，所以只要属性变更，所有Item的Frame都会同步变色。要实现单个选中项变色，只需要把选中状态下沉到每个Item对应的数据模型中即可，全程不需要写View后台代码，完全符合MVVM规范。

解决方案 #

1. 改造Scene数据模型

给每个Item添加独立的背景色属性，并且实现属性变更通知：

public class Scene : INotifyPropertyChanged
{
    // 你原有Scene类的其他属性全部保留
    private Color _backgroundTest = Color.White; // 默认背景色
    public Color BackgroundTest
    {
        get => _backgroundTest;
        set
        {
            if (_backgroundTest == value) return;
            _backgroundTest = value;
            OnPropertyChanged(nameof(BackgroundTest));
        }
    }

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

2. 修改页面ViewModel逻辑

删掉原来全局的BackgroundTest、FrameColorChange字段，只操作当前点击的Item属性：

// 单选场景需要额外维护当前选中项的引用，多选场景可以删掉这个字段
private Scene _currentSelectedScene;

private void TriggerScene(Scene scene)
{
    // === 多选逻辑：直接切换当前点击项的颜色 ===
    // scene.BackgroundTest = scene.BackgroundTest == Color.White ? Color.Gray : Color.White;

    // === 单选逻辑：先恢复之前选中项的颜色，再修改当前点击项 ===
    if (_currentSelectedScene != null)
    {
        _currentSelectedScene.BackgroundTest = Color.White;
    }
    if (_currentSelectedScene != scene)
    {
        scene.BackgroundTest = Color.Gray;
        _currentSelectedScene = scene;
    }
    else
    {
        _currentSelectedScene = null; // 点击已选中项时取消选中，不需要可删除
    }
}

3. 调整XAML绑定

DataTemplate内的默认BindingContext就是当前Item对应的Scene实例，直接绑定即可，不需要用RelativeSource绑定到全局ViewModel：

<!-- 可以删掉原来的VisualStateManager配置，避免和绑定逻辑冲突 -->
<Frame  CornerRadius="10"  HasShadow="False" 
        BackgroundColor="{Binding BackgroundTest, Converter={StaticResource colorConverter}}" 
        HeightRequest="75" Margin="5,0,0,0" >

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