.NET MAUI嵌套CollectionView游戏分数显示截断问题求助

架构老林

2026-6-20

.NET MAUI保龄球分数记录应用横向分数行截断问题修复

我正在开发一款C# .NET MAUI保龄球团队分数记录应用，要求支持2名及以上队员的联赛，每场比赛可根据联赛规则设置1场及以上对局（多数联赛要求3局，部分支持更多）。目前遇到的问题是：在显示球员姓名、平均分、让分后，横向展示的游戏分数行被截断，仅能看到部分内容。

问题效果

截图显示：球员姓名、平均分、让分输入框正常展示，但下方横向排列的分数输入行仅能看到前几个条目，超出屏幕宽度的部分被截断，无法查看或编辑。

相关代码

MainViewModel.cs

using CollectionView2022.Models;
namespace CollectionView2022
{
    public partial class MainViewModel : ObservableObject
    {
        [ObservableProperty]
        int rows;
        [ObservableProperty]
        int cols;
        [ObservableProperty]
        ObservableCollection<Bowler> bowlers;
        [ObservableProperty]
        List<Game> scores;
        List<string> gameNames = new List<string> { "Rick", "Bob", "Colton", "Jeff" };
        public MainViewModel()
        {
            Rows = 1;
            Cols = 1;
            Bowlers = new ObservableCollection<Bowler>();
        }
        [RelayCommand]
        private void Generate()
        {
            int dr = 0;
            int dc = 0;
            int s = 200;
            do
            {
                Bowlers.Add(new Bowler
                {
                    Average = 0,
                    Name = gameNames[dr],
                    Handicap = 0

                });
                Bowlers[dr].Scores = new List<Game>();
                do
                {
                    Bowlers[dr].Scores.Add((Game)new Game { score = s });
                    dc++;
                    s=s+10;
                } while (dc < cols);
                dc = 0;
                dr++;
            } while (dr < rows);
            
        }
        
    }
}

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:model="clr-namespace:CollectionView2022.Models"
             xmlns:viewmodel="clr-namespace:CollectionView2022"
             x:DataType="viewmodel:MainViewModel"
             x:Class="CollectionView2022.MainPage">

    <ScrollView>
        <VerticalStackLayout
        Padding="30,0"
        Spacing="25">

            <HorizontalStackLayout>
                <Label
                Text="Enter Bowlers: "
                
                SemanticProperties.HeadingLevel="Level1"/>
                <Entry 
                   x:Name="EnterRows" Text="{Binding Rows}" Keyboard="Numeric" ReturnType="Next"/>
                <Label
                Text="Enter Games: "
                
                SemanticProperties.HeadingLevel="Level1"/>
                <Entry ReturnCommand="{Binding GenerateCommand}"
                x:Name="EnterCols" Text="{Binding Cols}" Keyboard="Numeric" ReturnType="Send"/>
                <Button Text="Generate" Command="{Binding GenerateCommand}"/>
                
            </HorizontalStackLayout>
            <CollectionView ItemsSource="{Binding Bowlers}" SelectionMode="Single" SelectionChanged="CollectionView_SelectionChanged">
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="model:Bowler">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Entry Grid.Column="0" Text="{Binding Name}" Keyboard="Text" ReturnType="Next"/>
                            <Entry Grid.Column="1" Text="{Binding Average}" Keyboard="Numeric" ReturnType="Next"/>
                            <Entry Grid.Column="2" Text="{Binding Handicap}" Keyboard="Numeric" ReturnType="Next"/>
                            <CollectionView Grid.Row="1" Grid.ColumnSpan="8" ItemsLayout="HorizontalList" ItemsSource="{Binding Scores}">
                                <CollectionView.ItemTemplate>
                                    <DataTemplate x:DataType="model:Game">
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="Auto" />
                                            </Grid.ColumnDefinitions>
                                            
                                            <HorizontalStackLayout>
                                                <Entry Text="{Binding score}" Keyboard="Numeric" ReturnType="Next"/>
                                            </HorizontalStackLayout>

                                        </Grid>

                                    </DataTemplate>
                                </CollectionView.ItemTemplate>
                            </CollectionView>
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
            
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

MainPage.xaml.cs

using CollectionView2022.Models;
namespace CollectionView2022
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            BindingContext=new MainViewModel();
        }

        private void CollectionView_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {

        }
    }
}

Game.cs（Model）

namespace CollectionView2022.Models
{
    public class Game
    {
        public int score { get; set; }
    }
}

Bowler.cs（Model）

namespace CollectionView2022.Models
{
    public class Bowler
    {
        public string Name { get; set; }
        public int Average { get; set; }
        public int Handicap { get; set; }
        public List<Game> Scores { get; set; }
    }
}

GlobalUsings.cs

global using CommunityToolkit.Mvvm.ComponentModel;
global using CommunityToolkit.Mvvm.Input;
global using System.Collections.ObjectModel;
global using System.ComponentModel;
global using System.Diagnostics;
global using System.Runtime.CompilerServices;
global using System.Text.Json;

修复方案

横向分数行被截断的核心原因是：外层ScrollView仅支持垂直滚动，内部横向CollectionView没有被包裹在支持横向滚动的容器中，超出屏幕宽度的内容无法显示。

具体修改步骤

给横向分数的CollectionView添加横向滚动容器
将横向排列的分数CollectionView包裹在ScrollView中，并设置Orientation="Horizontal"，让超出屏幕的分数项可以横向滚动查看：

<!-- 替换原横向CollectionView代码 -->
<ScrollView Grid.Row="1" Grid.ColumnSpan="3" Orientation="Horizontal">
    <CollectionView ItemsSource="{Binding Scores}" ItemsLayout="HorizontalList">
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="model:Game">
                <Entry WidthRequest="60" Margin="2,0" Text="{Binding score}" Keyboard="Numeric" ReturnType="Next"/>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ScrollView>

简化布局结构
移除Game数据模板中冗余的Grid和HorizontalStackLayout，直接使用Entry并设置固定宽度（如WidthRequest="60"），避免布局浪费空间。

优化外层Grid列定义
原Grid定义了过多不必要的Auto列，简化为仅保留3列对应球员信息，分数行通过ColumnSpan="3"覆盖全部宽度：

<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="100" />
    <ColumnDefinition Width="80" />
    <ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>

额外优化建议

给分数Entry设置统一宽度和内边距，保证布局整齐；
添加分数列标题行，提升界面可读性；
优化Generate方法的循环逻辑，避免重复初始化错误。

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

.NET MAUI嵌套CollectionView游戏分数显示截断问题求助

问题效果 #

相关代码 #

MainViewModel.cs #

MainPage.xaml #

MainPage.xaml.cs #

Game.cs（Model） #

Bowler.cs（Model） #

GlobalUsings.cs #

修复方案 #

具体修改步骤 #

额外优化建议 #