.NET MAUI中如何实现CollectionView的Grid行高动态自适应？

要让CollectionView中的Frame根据文本内容自动扩展高度，你需要调整以下几个关键设置：

关键修改点 #

• 长文本Label开启自动换行：给包含多内容的Label添加LineBreakMode="WordWrap"，确保文本能换行显示，从而撑高容器。
• Grid行定义全部使用Auto：所有承载动态内容的Grid行，将RowDefinitions中的*替换为Auto，让行高完全由内容决定。
• 调整Frame的垂直布局属性：设置Frame的VerticalOptions="Start"，避免父容器限制其高度扩展。

修改后的完整代码 #

<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
    <Grid RowDefinitions="*,60" BackgroundColor="{StaticResource PageBackgroundColor}" Padding="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        <CollectionView Grid.Row="0" HorizontalOptions="Fill" VerticalOptions="Fill"
                        ItemsSource="{Binding Inspections}"
                        VerticalScrollBarVisibility="Always"
                        ItemsLayout="VerticalList" ItemSizingStrategy="MeasureAllItems">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <!-- 修改Frame的VerticalOptions为Start -->
                    <Frame Padding="15" HasShadow="False" VerticalOptions="Start">
                        <Grid HorizontalOptions="Fill"
                                VerticalOptions="Fill"
                                BackgroundColor="White"
                                RowSpacing="25"
                                RowDefinitions="Auto,Auto,Auto"
                                ColumnDefinitions="*,Auto">
                            <StackLayout
                                Orientation="Horizontal"
                                Grid.Row="0"
                                Grid.Column="0">
                                <Label Text="{Binding Path=BusinessName}"
                                        Style="{StaticResource LabelTitleStyle}" />
                                <Grid Padding="15,0,0,0">
                                    <baseChip:Chip
                                        HorizontalOptions="Fill" VerticalOptions="Fill"
                                        Style="{StaticResource ChipContainer}"
                                        HasShadow="False"
                                        BackgroundColor="{Binding Path=ChipBackgroundColor}">
                                    </baseChip:Chip>
                                    <Label
                                        Text="{Binding Path=ChipText}" 
                                        Style="{StaticResource ChipLabel}"
                                        HorizontalOptions="CenterAndExpand"
                                        VerticalOptions="CenterAndExpand"
                                        TextColor="{Binding Path=ChipTextColor}"/>
                                </Grid>
                            </StackLayout>

                            <Image
                                Grid.Row="0"  
                                Grid.Column="1"
                                HorizontalOptions="End"
                                VerticalOptions="Center"
                                Aspect="AspectFit">
                                <Image.Source>
                                    <FontImageSource Glyph="{x:Static helper:MaterialFontHelper.FilePdfBox}"
                                                        Color="{StaticResource DarkGray}"
                                                        Size="20"
                                                        FontFamily="MaterialDesignIcons"/>
                                </Image.Source>
                            </Image>


                            <Grid Grid.Row="1"
                                    Grid.Column="0"
                                    Grid.ColumnSpan="2"
                                    RowDefinitions="Auto, Auto"
                                    ColumnDefinitions="*, *">

                                <Label
                                    Grid.Row="0"
                                    Grid.Column="0"
                                    Text="Inspection Type"
                                    Style="{StaticResource LabelKeyStyle}" />

                                <!-- 给长文本Label添加LineBreakMode -->
                                <Label
                                    Grid.Row="1"
                                    Grid.Column="0"
                                    Text="ksd kahdkahd kahd kahd  aojsoiud aasjlj sdlkja dlkja da asdadas  alsajdlaksjdlajd  alsjdalkjd alksjd sa"
                                    Style="{StaticResource LabelValueStyle}"
                                    LineBreakMode="WordWrap" />

                                <Label
                                    Grid.Row="0"
                                    Grid.Column="1"
                                    Text="Primary Inspector"
                                    Style="{StaticResource LabelKeyStyle}" />

                                <Label
                                    Grid.Row="1"
                                    Grid.Column="1"
                                    Style="{StaticResource LabelValueStyle}" >
                                    <Label.FormattedText>
                                        <FormattedString>
                                            <Span Text="{Binding Path=InspectorFirstName}"/>
                                            <Span Text=" "/>
                                            <Span Text="{Binding Path=InspectorLastName}"/>
                                        </FormattedString>
                                    </Label.FormattedText>
                                </Label>
                            </Grid>

                            <!-- 修改RowDefinitions为Auto, Auto -->
                            <Grid Grid.Row="2"
                                    Grid.Column="0"
                                    Grid.ColumnSpan="2"
                                    RowDefinitions="Auto, Auto"
                                    ColumnDefinitions="*, *">

                                <Label
                                    Grid.Row="0"
                                    Grid.Column="0"
                                    Text="Scheduled Date"
                                    Style="{StaticResource LabelKeyStyle}" />

                                <Label
                                    Grid.Row="1"
                                    Grid.Column="0"
                                    Text="{Binding Path=ScheduledStartDate, Converter={StaticResource dateFormatter},ConverterParameter='long'}"
                                    Style="{StaticResource LabelValueStyle}" />

                                <Label
                                    Grid.Row="0"
                                    Grid.Column="1"
                                    Text="Completed Date"
                                    Style="{StaticResource LabelKeyStyle}" />

                                <Label
                                    Grid.Row="1"
                                    Grid.Column="1"
                                    Text="{Binding Path=CompletionDate, Converter={StaticResource dateFormatter},ConverterParameter='long'}"
                                    Style="{StaticResource LabelValueStyle}" />
                            </Grid>
                        </Grid>
                    </Frame>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
        <StackLayout
                Grid.Row="1"
                VerticalOptions="End"
                HorizontalOptions="FillAndExpand"
                BackgroundColor="{StaticResource White}">
            <controlTemplate:BeginInspectionContentView></controlTemplate:BeginInspectionContentView>
        </StackLayout>
    </Grid>
</StackLayout>

原因说明 #

1. Label换行：默认LineBreakMode是NoWrap，长文本会被截断，设置为WordWrap后文本会自动换行，Label高度随之增加。
2. Grid行高Auto：*会按比例分配父容器空间，无法随内容动态调整；Auto会根据子元素的实际高度自动调整行高。
3. Frame垂直布局：VerticalOptions="Start"让Frame仅占据内容所需的高度，而不是被父容器强制填充，确保内容能完全展示。

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