MAUI中CollectionView单项展开收起GUI实现方案（仅GUI层）

核心逻辑 #

利用CollectionView的SelectedItem唯一性，配合DataTrigger控制按钮区域的可见性，点击新项时自动替换选中项，实现旧项收起、新项展开的效果。

修改后的完整XAML代码 #

<CollectionView x:Name="ItemCollectionView"
                SelectedItem="{Binding SelectedMyItem}">
    <!-- 若ViewModel未定义SelectedMyItem，可仅保留x:Name供后续引用 -->
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="models:MyItem">
            <StackLayout>
                <!-- 点击列表项区域触发选中切换 -->
                <Frame Margin="10,5">
                    <Frame.GestureRecognizers>
                        <TapGestureRecognizer 
                            Command="{Binding Source={x:Reference ItemCollectionView}, Path=SelectedItem}"
                            CommandParameter="{Binding .}"/>
                    </Frame.GestureRecognizers>
                    
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>

                        <Label Text="{Binding Name}"/>
                        <Label Grid.Column="1" Text="{Binding Number}" HorizontalTextAlignment="End"/>
                        <Label Grid.Row="1" Text="{Binding Description}"/>
                    </Grid>
                </Frame>

                <!-- 选项按钮区域，默认隐藏 -->
                <Grid IsVisible="False" Margin="10,0,10,5">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>

                    <Button Text="Option 1" Margin="5"/>
                    <Button Grid.Column="1" Text="Option 2" Margin="5"/>

                    <!-- 通过DataTrigger控制显示/隐藏 -->
                    <Grid.Triggers>
                        <DataTrigger TargetType="Grid"
                                     Binding="{Binding Source={x:Reference ItemCollectionView}, Path=SelectedItem}"
                                     Value="{Binding .}">
                            <Setter Property="IsVisible" Value="True"/>
                        </DataTrigger>
                    </Grid.Triggers>
                </Grid>
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

关键细节说明 #

• 点击Frame区域时，通过TapGestureRecognizer将当前项设置为CollectionView的SelectedItem，因为SelectedItem只能存在一个，切换时自动替换旧选中项
• 按钮Grid默认隐藏，仅当当前项与CollectionView的SelectedItem匹配时，DataTrigger触发将IsVisible设为True
• 完全基于GUI层面实现，无需修改ViewModel的业务逻辑，符合MVVM模式要求

可选优化：点击空白收起所有项 #

给页面添加点击手势，点击空白区域时清空选中项，收起所有按钮：

<ContentPage.GestureRecognizers>
    <TapGestureRecognizer 
        Command="{Binding Source={x:Reference ItemCollectionView}, Path=SelectedItem}"
        CommandParameter="{x:Null}"/>
</ContentPage.GestureRecognizers>

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