.NET MAUI中CollectionView默认选中项UI不更新且取值为空的问题

问题描述 #

在.NET MAUI应用中为CollectionView设置默认选中项：ViewModel构造函数中填充Tasks集合，并将SelectedTask赋值为集合指定元素。代码中SelectedTask赋值正确，但UI无反应；点击CheckItem按钮时SelectedTask始终为null。手动选中CollectionView项时，UI正常更新且命令能获取选中值。

ViewModel代码 #

public partial class NewPage1ViewModel : ObservableObject
{
    public ObservableCollection<TaskItem> Tasks { get; }

    [ObservableProperty]
    TaskItem _selectedTask;

    public NewPage1ViewModel()
    {
        Tasks = new ObservableCollection<TaskItem>
        {
            new TaskItem { Name = "Task 1", Deadline = DateTime.Now.AddDays(1) },
            new TaskItem { Name = "Task 2", Deadline = DateTime.Now.AddDays(2) },
            new TaskItem { Name = "Task 3", Deadline = DateTime.Now.AddDays(3) },
            new TaskItem { Name = "Task 4", Deadline = DateTime.Now.AddDays(4) },
        };

        // 此处SelectedTask赋值正确，但UI无同步
        SelectedTask = Tasks.FirstOrDefault(); // 或Tasks[2]
    }

    [RelayCommand]
    private void CheckItem()
    {
        // 此处SelectedTask始终为null
        if (SelectedTask is null)
        {
            Debug.WriteLine("selected item is null");
        }
    }
}

public class TaskItem
{
    public string Name { get; set; }
    public DateTime Deadline { get; set; }
}

页面XAML代码 #

<VerticalStackLayout>
    <Button Command="{Binding CheckItemCommand}" Text="Check item" />
    <Label
        Margin="0,20,0,0"
        FontSize="Medium"
        Text="Selected Task:" />
    <Label
        FontAttributes="Bold"
        FontSize="Large"
        Text="{Binding SelectedTask.Name}" />
    <Label
        FontAttributes="Bold"
        FontSize="Large"
        Text="{Binding SelectedTask.Deadline, StringFormat='{}{0:MM/dd/yyyy}'}" />

    <StackLayout Padding="10">
        <Label FontSize="Large" Text="Tasks" />

        <CollectionView
            ItemsSource="{Binding Tasks}"
            SelectedItem="{Binding SelectedTask}"
            SelectionMode="Single">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout Padding="10" Orientation="Horizontal">
                        <Label FontSize="Medium" Text="{Binding Name}" />
                        <Label
                            FontSize="Medium"
                            HorizontalOptions="EndAndExpand"
                            Text="{Binding Deadline, StringFormat='{}{0:MM/dd/yyyy}'}" />

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup Name="CommonStates">
                                <VisualState Name="Normal" />
                                <VisualState Name="Selected">
                                    <VisualState.Setters>
                                        <Setter Property="BackgroundColor" Value="LightSkyBlue" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</VerticalStackLayout>

修复方案 #

1. 修正SelectedItem绑定模式 #

CollectionView的SelectedItem默认绑定模式为OneWay，无法在ViewModel提前赋值时同步到UI。需显式设置为TwoWay，确保ViewModel与UI双向同步：

<CollectionView
    ItemsSource="{Binding Tasks}"
    SelectedItem="{Binding SelectedTask, Mode=TwoWay}"
    SelectionMode="Single">

2. 调整VisualStateManager位置 #

原XAML中VisualStateManager.VisualStateGroups放置在StackLayout子元素末尾，导致选中样式无法生效。需将其移动到StackLayout的最前端：

<DataTemplate>
    <StackLayout Padding="10" Orientation="Horizontal">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal" />
                <VisualState Name="Selected">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="LightSkyBlue" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Label FontSize="Medium" Text="{Binding Name}" />
        <Label
            FontSize="Medium"
            HorizontalOptions="EndAndExpand"
            Text="{Binding Deadline, StringFormat='{}{0:MM/dd/yyyy}'}" />
    </StackLayout>
</DataTemplate>

3. 延迟赋值确保UI绑定完成（可选） #

若构造函数赋值时机过早，可通过Dispatcher延迟设置SelectedTask，保证UI完成绑定后再同步：

public NewPage1ViewModel()
{
    Tasks = new ObservableCollection<TaskItem>
    {
        new TaskItem { Name = "Task 1", Deadline = DateTime.Now.AddDays(1) },
        new TaskItem { Name = "Task 2", Deadline = DateTime.Now.AddDays(2) },
        new TaskItem { Name = "Task 3", Deadline = DateTime.Now.AddDays(3) },
        new TaskItem { Name = "Task 4", Deadline = DateTime.Now.AddDays(4) },
    };

    Application.Current.Dispatcher.Dispatch(async () =>
    {
        await Task.Delay(100);
        SelectedTask = Tasks.FirstOrDefault();
    });
}

验证效果 #

• 启动应用后，CollectionView自动选中指定项，UI显示选中背景色及SelectedTask详情
• 点击"Check item"按钮，SelectedTask可正确获取选中值，不再为null

内容的提问来源于stack exchange，提问作者Zoltán