Xamarin Forms中CollectionView预选中功能不生效问题求助

问题原因 #

• 赋值顺序错误：你在构造函数中先初始化了空的WorkerFlockDetails集合，就立刻尝试取第4项赋值给selectedFlock，此时集合还没有任何数据，selectedFlock只会是null，之后调用Init()填充数据后也没有重新给选中项赋值。
• 选中项属性没有触发属性变更通知：SelectedFlock的set方法中仅更新了私有字段，没有调用PropertyChanged通知UI层属性发生了变更，UI无法感知到选中项的更新。
• 选中视觉效果被遮挡（可选修复）：你在VisualState中修改的是Grid的背景色，但Grid上层的Frame设置了不透明的背景色，会挡住Grid的选中颜色，导致即使选中生效也看不到视觉变化。

修复代码 #

1. 修正ViewModel代码

class HomeWorkerViewModel : INotifyPropertyChanged
{
    public HomeWorkerViewModel(){
        WorkerFlockDetails = new ObservableCollection<WorkerFlock>();
        // 先加载数据
        Init();
        // 数据加载完成后再赋值选中项
        SelectedFlock = WorkerFlockDetails.Skip(3).FirstOrDefault();
    }

    // Init方法保持原有填充数据的逻辑不变
    void Init()
    {
        // 原有填充WorkerFlockDetails的代码
    }

    public ObservableCollection<WorkerFlock> workerFlockDetails;
    public ObservableCollection<WorkerFlock> WorkerFlockDetails
    {
        get => workerFlockDetails;
        set
        {
            workerFlockDetails = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(WorkerFlockDetails)));
        }
    }

    private WorkerFlock selectedFlock;
    public WorkerFlock SelectedFlock
    {
        get { return selectedFlock; }
        set
        {
            if (selectedFlock != value)
            {
                try
                {
                    selectedFlock = value;
                    // 新增属性变更通知
                    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(SelectedFlock)));
                }
                catch
                {

                }
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

2. 修正XAML绑定与选中视觉效果

首先给SelectedItem绑定显式指定双向模式，保证值变更能双向同步：

<CollectionView x:Name="WorkerFlockView" 
                ItemsSource="{Binding WorkerFlockDetails}" 
                SelectedItem="{Binding SelectedFlock, Mode=TwoWay}"
                SelectionMode="Single" 
                SelectionChangedCommand="{Binding ViewFlockControlPointsCommand}" 
                HeightRequest="100">

如果需要选中视觉效果正常显示，修改VisualState的Setter目标为Frame的背景色，同时给Frame设置名称：

<!-- 给Frame添加x:Name属性 -->
<Frame x:Name="ItemFrame" Margin="0,0,0,0" Padding="0" HorizontalOptions="CenterAndExpand" BackgroundColor="#F7F7F7" Opacity="0.93" HasShadow="{OnPlatform Android=true, iOS=false}"  CornerRadius="0" IsClippedToBounds="True" >

<!-- 修改选中状态的Setter -->
<VisualState Name="Selected">
    <VisualState.Setters>
        <Setter TargetName="ItemFrame" Property="BackgroundColor" Value="Blue" />
    </VisualState.Setters>
</VisualState>

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