.NET MAUI中CollectionView选中项跳转详情页空白问题求助

问题描述 #

使用.NET MAUI开发时，点击CollectionView中的商品项跳转到详情页，通过SelectionChanged事件实现时，详情页显示空白。该功能在ListView中可正常运行，切换为CollectionView后出现此问题。

相关代码 #

页面1 XAML代码 #

<CollectionView SelectionMode="Single" 
                x:Name="listview" 
                IsVisible="true" 
                RemainingItemsThreshold="12" 
                SelectionChanged="listview_SelectionChanged" 
                ItemsLayout="VerticalGrid, 2">
    
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="18">
                <Grid.RowDefinitions>
                    <RowDefinition Height="100" />
                    <RowDefinition Height="100" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="120" />
                    <ColumnDefinition Width="120" />
                </Grid.ColumnDefinitions>
                <Image Source="splash_logo.png"  Grid.RowSpan="1" Grid.Column="0" Grid.Row="0"/>
                <Label Text="{Binding prod_name}" TextColor="Black" FontSize="Medium" FontAttributes="Bold" Grid.Column="0" Grid.Row="1" VerticalTextAlignment="Center" HorizontalOptions="CenterAndExpand"/>
                <HorizontalStackLayout Grid.Row="2" Grid.Column="0" >
                    <Label Text="Rs." TextColor="Black"/>
                    <Label Text="{Binding prod_price}" TextColor="Black"  LineBreakMode="TailTruncation"/>
                </HorizontalStackLayout>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

页面1 后台代码（原问题代码） #

private async void listview_SelectionChanged(object sender, SelectionChangedEventArgs e) {

  if (e.CurrentSelection != null) {

    await Navigation.PushAsync(new cataloguepage {

      BindingContext = e.CurrentSelection as csv
    });
    
  } else {
    await DisplayAlert("Alert", "No Item Selected", "ok");
  }
}

详情页XAML代码 #

<ContentPage.Content>
    <StackLayout Padding="15">
        <Label Text="{Binding prod_name}" TextColor="Black" FontAttributes="Bold" FontSize="Large" Padding="10" HorizontalOptions="Center"/>
        <Label Text="{Binding prod_img}" TextColor="#289" Padding="10"  HorizontalTextAlignment="Center"  FontAttributes="Bold" FontSize="Medium" HeightRequest="200" WidthRequest="100" VerticalTextAlignment="Center"/>
        <Label Text="{Binding prod_price}"  TextColor="Black" FontSize="Medium" HorizontalTextAlignment="Center"/>
        <Label Text="{Binding prod_desc}" TextColor="Black"/>
    </StackLayout>
</ContentPage.Content>

问题原因 #

CollectionView的CurrentSelection属性类型是**IEnumerable<object>**（集合类型），而ListView的SelectedItem是单个object。原代码试图将集合直接转换为csv对象，结果得到null，导致详情页的BindingContext为空，因此显示空白。

解决方案 #

修改SelectionChanged事件处理代码，从CurrentSelection集合中提取单个选中项：

private async void listview_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    // 从选中集合中获取第一个元素
    var selectedItem = e.CurrentSelection.FirstOrDefault() as csv;
    
    if (selectedItem != null)
    {
        await Navigation.PushAsync(new cataloguepage { BindingContext = selectedItem });
        // 清空选中状态，避免重复点击同一项不触发事件
        listview.SelectedItem = null;
    }
    else
    {
        await DisplayAlert("Alert", "No Item Selected", "ok");
    }
}

关键说明 #

1. 使用FirstOrDefault()从CurrentSelection集合中获取单个选中项，因为设置了SelectionMode="Single"，所以集合中最多只有一个元素。
2. 添加listview.SelectedItem = null可以重置选中状态，确保用户再次点击同一个项时仍能触发SelectionChanged事件。

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