Grid控件新增项重叠而非自动换行的技术问题

问题现象 #

向Grid中添加新项时，新项会与最后一项处于同一单元格。多次点击按钮时，并未生成新行，而是在最后一项上方叠加新的exercise控件，它们在左上角单元格重叠，预期应为新项创建新行。

问题原因 #

XAML代码存在两个关键问题：

• 使用BindableLayout.ItemsSource绑定ExercisesInGroup，但未定义BindableLayout.ItemTemplate，导致所有项复用同一套Grid内的控件，而非为每个项生成独立布局容器。
• 所有输入框和按钮硬编码了Grid.Row="0"，新增项会被强制渲染在同一行，最终造成重叠。

解决方案 #

修改XAML代码，为Grid配置BindableLayout.ItemTemplate，让每个Exercise对象生成独立的行结构：

<ViewCell>
 <!-- Display ExerciseType of the group -->
 <StackLayout Margin="0,0,0,0"
              x:Name="ExerciseStack">
     
     <Label Text="{Binding ExerciseType.Name}" FontSize="25" Padding="10" />
        
     <Grid x:Name="ExerciseGrid">
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="2*" />
             <ColumnDefinition Width="2*" />
             <ColumnDefinition Width="*" />
         </Grid.ColumnDefinitions>

         <!-- 为BindableLayout定义ItemTemplate，每个项对应一行 -->
         <BindableLayout.ItemsSource>
             <Binding Path="ExercisesInGroup" />
         </BindableLayout.ItemsSource>
         <BindableLayout.ItemTemplate>
             <DataTemplate>
                 <!-- 通过绑定项索引设置Grid行号 -->
                 <Grid Grid.Row="{Binding Source={RelativeSource AncestorType={x:Type ListView}}, Path=ItemsSource.IndexOf(.)}">
                     <Entry Grid.Column="0" Placeholder="Reps" Keyboard="Numeric" Text="{Binding Reps}" />
                     <Entry Grid.Column="1" Placeholder="Volume" Keyboard="Numeric" Text="{Binding Weight}" />
                     <Button Grid.Column="2" Text="Complete" Command="{Binding Source={RelativeSource AncestorType={x:Type ViewModels:WorkoutViewModel}}, Path=CompleteExerciseCommand}" />
                 </Grid>
             </DataTemplate>
         </BindableLayout.ItemTemplate>
     </Grid>
     <Button Text="Add Exercise" Command="{Binding BindingContext.AddExerciseToGroupCommand, Source={x:Reference Workouts}}" VerticalOptions="End"/>
 </StackLayout>
</ViewCell>

如果不想在XAML中处理索引绑定，也可以在Exercise类中新增RowIndex属性，在添加新项时手动赋值行号，再绑定到Grid.Row上，逻辑会更清晰。

代码验证 #

你的C#逻辑无需修改：

• 正确创建Exercise对象并添加到ObservableCollection<Exercise>
• 分组不存在时自动创建新分组并加入集合
• ObservableCollection会自动通知UI更新，数据绑定逻辑正常

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